This is an issue in reference to #26 which is related to the "primitives and nested role=Menu/Menuitem" branch. All tests use native SR navigation (arrow keys) and TAB.
Preface: A seasoned SR user could have the knowledge to navigate and explore the menu test webpage with more nuance, whether through manual mode switching, certain key shortcuts, etc. But this test is with the SR’s default/automatic options and performed as if a new or beginner user is interacting with SVG elements. We would expect that all users could be able to navigate smoothly, regardless of experience levels.
Issue Summary
Issue #1: VoiceOver does not recognize the root grouped element in the HTML menu.
Issue #2: VoiceOver does not say the element is deselected as expected. It states the element is selected whether it is toggled on or off. This occurs in all the child elements. Example: when File 1 is selected, VO states “1 selected”, and when deselected it states, “File 1 selected.” This happens in both SVG and HTML.
Issue #3: VoiceOver does not say read the list labels for the menu or sub-menu elements. Example: VO states “File 1” instead of something like “File 1 of 4” as expected.
Issue #4: VoiceOver does not read off the menu labels after “File” when navigating to them. It instead reads of the previous menu as “X, collapsed, menu item.” This happens for all elements. Example: when navigating to the Edit menu after the sub-menu is closed, VO states “File, collapsed, menu item.” But the focus indicator is highlighting the “Edit” menu button. Selecting and navigating into the sub-menu has the correct labels. This happens in both SVG and HTML.
Starting at the "Interactions Instructions" heading: Use VoiceOver's Control+Option+Down arrow key to navigate into the SVG space with the "Enable Arrow Key Navigation" checkbox unchecked. Press TAB to access the File menu. Press Control+Option+SPACE to expand the menu list. Press Control+Option+SPACE to deselect the File menu, and continue navigating to the next menu item "Edit".
Expected behavior (Pass/Fail)
We aren't actually testing HTML in this project, but if we are comparing the SVG to HTML elements in how they perform we need to note the issues found.
This is an issue in reference to #26 which is related to the "primitives and nested role=Menu/Menuitem" branch. All tests use native SR navigation (arrow keys) and TAB.
Preface: A seasoned SR user could have the knowledge to navigate and explore the menu test webpage with more nuance, whether through manual mode switching, certain key shortcuts, etc. But this test is with the SR’s default/automatic options and performed as if a new or beginner user is interacting with SVG elements. We would expect that all users could be able to navigate smoothly, regardless of experience levels.
Issue Summary
Issue #1: VoiceOver does not recognize the root grouped element in the HTML menu.
Issue #2: VoiceOver does not say the element is deselected as expected. It states the element is selected whether it is toggled on or off. This occurs in all the child elements. Example: when File 1 is selected, VO states “1 selected”, and when deselected it states, “File 1 selected.” This happens in both SVG and HTML.
Issue #3: VoiceOver does not say read the list labels for the menu or sub-menu elements. Example: VO states “File 1” instead of something like “File 1 of 4” as expected.
Issue #4: VoiceOver does not read off the menu labels after “File” when navigating to them. It instead reads of the previous menu as “X, collapsed, menu item.” This happens for all elements. Example: when navigating to the Edit menu after the sub-menu is closed, VO states “File, collapsed, menu item.” But the focus indicator is highlighting the “Edit” menu button. Selecting and navigating into the sub-menu has the correct labels. This happens in both SVG and HTML.
Video of issue
Issue #1 Example starts at 00:00:10 Issue #2 and #3 Example starts at 00:00:20 Issue #4 Example starts at 00:00:35 Arrow Keys: https://user-images.githubusercontent.com/98043076/181073241-af2e1734-6a42-4959-9cc8-cbe5f9d75288.mp4 TAB key: https://user-images.githubusercontent.com/98043076/181073268-c25309d2-f4b6-4c6f-b99d-6a44f8f8fadb.mp4
Steps to reproduce
Starting at the "Interactions Instructions" heading: Use VoiceOver's Control+Option+Down arrow key to navigate into the SVG space with the "Enable Arrow Key Navigation" checkbox unchecked. Press TAB to access the File menu. Press Control+Option+SPACE to expand the menu list. Press Control+Option+SPACE to deselect the File menu, and continue navigating to the next menu item "Edit".
Expected behavior (Pass/Fail)
We aren't actually testing HTML in this project, but if we are comparing the SVG to HTML elements in how they perform we need to note the issues found.
Technical Details
VoiceOver (default) Safari 15.5 (17613.2.7.1.8) MacBook Pro/ macOS Monterey 12.4