-
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
Overflow menu needs to trap tab keys within menu #1629
Comments
@carmacleod Thank you for writing this up! Just double-checking - Tab from the last and shift-tab from the first in latest code moves focus to the trigger button. It's happening at https://www.carbondesignsystem.com/components/overflow-menu/code, though "floating menu" mode need to be turned on in our React variant to get the similar behavior (you can see it by going to knobs tab at the bottom and check off |
Hi, @asudoh. Interesting. Ok, here's what I think, in order of importance:
Please note that the current react behavior of dropping down a menu and then allowing tab/shift+tab to escape the menu without closing is not ok. The react floatingMenu behavior for tab/shift+tab is better (we should do the same as whatever we decide in point 3. above). |
💯 thanks a lot for sharing your thoughts @carmacleod! |
We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. Thanks for your contributions. |
@carmacleod @asudoh I've submitted updates to the HTML semantics of the overflow menu (Vanilla only) which should help clarify to screen reader users that they are no longer on the menu. Can we re-test this and see if this issue is still relevant? Personally, I feel like the way that it's currently working is a bit more friendly than trapping the |
Thanks @elizabethsjudd. So, just to confirm, do the overflow menus at this link contain your new code? |
@carmacleod yes the website has the updated code (FYI, if you click on the code pen link it does NOT have the latest JS version and has some missing HTML that is outlined in this issue: #3603) |
Much better! Thanks @elizabethsjudd ! The only other thing I would suggest is to add Regarding the 3rd menu - the one with link items - maybe if the |
This is interesting because I saw that and asked @snidersd about it and she said it wasn't needed which is why I removed it from Carbon's code. I also viewed using the native list it informs the user (at least with VO) how many items are in the menu because with lists it tells you your on X item of Y so that it actually helped inform the user know when they are at the end of the list.
The reason I had the role on the links and buttons instead of the I'm currently working on updating the dropdown component which is very closely related to this component so I'd be curious about these points. |
Oh, cool! I always thought that was needed because they use it in the Authoring Practices Guide menu examples. But I see now that the mapping for li (parent is a menu) says:
Which is exactly what you said, and what VO is doing (I assume you tested on Safari and not Chrome?). [Edit: Confusingly, NVDA/Chrome reads the "1 of 6, 2 of 6" correctly for this APG example, which uses Also, Chrome and FF on Windows aren't following the mapping guidance in the HTML-AAM (Chrome doesn't set
Good point. The screen readers must be special-casing to understand the menu roles when menuitem role is on the li and focus is on the li's child. |
@carmacleod yes I typically test in VO in Safari as that's the most used combination for mac users. I do have a windows laptop as well that I use for testing JAWS when specific issues arise for it but it's a bit of a pain so I typically focus on VO for my initial testing. |
I always found it odd how screen readers with various browsers can be so drastically different experiences for the user (VO with Safari vs VO with Chrome). Trying to cover all scenarios is impossible for our very small team so we've really tried to focus on the main combinations (I usually review AIM's yearly report for numbers) but I'd love to know the numbers for actual IBM users but I don't think we (at least in Watson Health) are gathering that information. Do you know how other teams are scoping their testing based on data while still trying to cover while covering any many users as we can? |
Arrow/ESC keys supports in overflow menu have landed in React codebase, so closing. Anybody don't hesitate to speak up if any other discussions like tab between trigger/menu should remain open. Thanks! |
See https://github.com/IBM/carbon-components-react/issues/1742
The text was updated successfully, but these errors were encountered: