-
Notifications
You must be signed in to change notification settings - Fork 1.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: adds shift click functionality to datatable #6942
feat: adds shift click functionality to datatable #6942
Conversation
i didn't include any testing because i wanted to get approval on functionality before committing time to implementing tests. |
Deploy preview for carbon-elements ready! Built with commit 8d9af92 |
Deploy preview for carbon-components-react ready! Built without sensitive environment variables with commit 8d9af92 https://deploy-preview-6942--carbon-components-react.netlify.app |
Deploy preview for carbon-elements ready! Built with commit 8de51e8 |
Deploy preview for carbon-components-react ready! Built with commit 8de51e8 https://deploy-preview-6942--carbon-components-react.netlify.app |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The shift-click functionality doesn't seem to be working on Firefox latest in Windows 10.
Like mentioned in the linked issue we'll need screen reader support for this feature in VoiceOver and Jaws on their respective browsers and OSes.
i feel stupid for missing this initially because most of my prototypal work leading up to this was trying to figure out why it wasn't working in firefox to begin with. i've added a workaround. to give additional context to this workaround- it seems that shift clicking a checkbox doesn't work in firefox. it's a known bug, so there's no native support for it. it simply doesn't work. so i've removed the onClick event from the input and moved it to the label. |
NVDA checkbox selection functionality seems completely broken after your last update. JAWS works as expected. Neither screen reader informs the user a batch selection option is available and batch selection doesn't work with either JAWS or NVDA in my testing (worth mentioning is that this didn't work in Chrome's History grid either 😞). @tw15egan can you check VoiceOver and see what those test results look like? Just to reiterate, quoting from #4084 (comment)
If we're going to design interactions that forego smart/better filtering options and instead rely on the user carefully selecting potentially hundreds of checkboxes in a list of potentially thousands then having this ease of use feature be something exclusive to sighted users is probably unacceptable. |
@dakahn I'm seeing the same thing with VoiceOver on MacOS |
@davidmenendez Not sure what is needed in terms of adding a11y to the new shift-click functionality, but the old voiceover functionality (selecting a checkbox with VoiceOver) is broken with these changes so that would def need to be addressed. |
@davidmenendez the accessibility concerns are technical in nature. No need to involve design. To satisfy the accessibility requirements we need screen reader support for VoiceOver in Safari, JAWS 2020 on Windows 10, and NVDA. As it stands we currently have functionality regressions. We've lost select/unselect keyboard controls in VoiceOver and NVDA. You may need to roll back your changes until you see what specific change broke Voiceover/NVDA. After that a good place to start would be to investigate how this feature is implemented from an accessibility standpoint in other web based data tables/grids. Then hopefully reverse engineer those solutions. |
ok. thanks for the feedback. i've never worked with these tools before, so i'll have to check those out. I'm assuming the reason it's breaking those tools is because in order to get the shift click to work in firefox requires changing the onClick handler from the actual input to the label. i'll continue to work on this and seek additional help here if I have any questions about these tools. |
@davidmenendez voiceover on Mac is pretty easy to work with, just need to triple tap the power / touchID button to enable it. Thanks for taking the time to work on this, it's much appreciated! 🙏 Feel free to reach out with any questions |
still working on addressing accessibility issues |
The more I continue to work on this the more I'm just not sure that this can be accomplished within the set guidelines. The main problem being how labels and check boxes interact with each other natively in different browsers. The biggest hurdle being that Firefox doesn't support shift clicking a checkbox. If you attempt to shift click any native checkbox it don't fire any kind of event. My original solution to move any click events to a label or outside div has proven to be ineffective because it's not accessible. Using VoiceOver to toggle a checkbox triggers the I'll try to continue to hack this, but I'm not sure if this is feasible at the moment. I can't even find another major component library that supports this functionality and I suspect it's because they also figured out it's not worth the hassle to attempt to rewrite how check boxes and labels interact with each other. Not even Material UI has this implemented. If anyone has any ideas I'd love to hear them. |
This is an incredibly important feature for many users and we constantly hear from them. It's definitely a tricky topic due to the cross-browser support and accessibility considerations but let's see how we can move forward from here. @tw15egan @dakahn, I'd love your feedback on the following options/paths: 1. Change how Carbon checkboxes are rendered 2. Replace 3. Implement this feature without Firefox support |
@janhassel just wanted to follow up with this issue, approach 2 seems very intriguing especially with the precedence in GMail. If I remember correctly, Data Table already uses Do you know if there is a minimal example/prototype of this approach that we could take a look at? |
@joshblack i'll give this a go. I don't think from a technical standpoint that it should be too difficult to offer an option in the existing checkbox component to give a div rendered option or perhaps i'd just start with using this custom checkbox in this component to start and if it works i can open an additional PR to port it over to the standard checkbox component. My main concern has just been i don't know if it'll be satisfactory from an accessibility point of view. but i'll start working on this locally and see what I can come up with and update my PR accordingly. |
@davidmenendez did the work @joshblack mentioned get implemented? |
@tw15egan @dakahn @joshblack i was able to switch the input to a div and i was able to use voiceover to control the multi selection. i think i was doing the voiceover controls correctly, though i'm cretainly no expert. the last commit i added removed the checkbox states like |
so at this point i am looking for confirmation that the current functionality is or is not acceptable in case i wasn't clear about that in my last comment. thanks! |
@davidmenendez sorry for the delay! That's awesome to see 🥳 @dakahn @tw15egan do you have time this week to go over the changes? |
Circling back on this. Checked using Firefox latest on Windows 10 with NVDA and JAWS 2020 on Chrome latest on Windows 10 Checkboxs on the the Selection variant of Datatable are broken for both Windows readers. Can't use spacebar to make selection. Worth noting is that keyboard controls without a screen reader work as intended for non-batch selection, For reference for testers (probably stated somewhere above): keyboard controls for batch actions are
|
@tw15egan was suggesting that we add this to our next sprint (start date April 5th) to build off of what you've worked on @davidmenendez and bring this to GA, does that sound good to everyone? 👀 |
not sure if I was meant to be added to this issue for sprint 7 but can we confirm that the screen reader regressions aren't caused by the commented code in
do we have any updates on investigations related to this? until we have an established pattern to follow or a set of requirements to implement, this is kind of in limbo. it's also worth noting that keyboard shift selection is not supported in Gmail so it may be a complete nonissue and this PR would be good to go once the commented code is reenabled |
Looks like it didn't get added to the current sprint -- so I assume it's also not being investigated. I'll comment on our sprint issue and we can get it in the next one 👍🏽 |
hey! it's been a while. i completely forgot about this. where are we with this? |
@davidmenendez unfortunately no updates on our end for this 😞 . Looking back, I think the work stalled around figuring out the correct behavior and then was not picked up again. As of right now, this is not being addressed. The earliest we're going to begin delivering new work into stable will be Q2 2022 after our v11 release which would be the soonest we could revisit this. Sorry that I couldn't offer better news about this, I can't imagine how frustrating trying to get functionality like this landed has been. |
no problem @joshblack i know you're all very busy. if there's anything i can do to help please let me know. |
I'm closing this PR for now. We can track any more discussions in this issue: #10995 |
DCO Assistant Lite bot: Thanks for your submission! We ask that you all sign our Developer Certificate of Origin before we can accept your contribution. You can sign the DCO by adding a comment below using this text: I have read the DCO document and I hereby sign the DCO. 1 out of 2 committers have signed the DCO. |
Closes #4084
Adds shift click functionality to the datatable for multiple selecting and deselecting rows.
Changelog
New
Testing / Reviewing