Add known dropdown a11y issue (#4379)

Co-authored-by: Josh Wooding <[email protected]>
Co-authored-by: Jake <[email protected]>

site/docs/components/combo-box/accessibility.mdx

@@ -82,3 +82,39 @@ data:
 
 </KeyboardControl>
 </KeyboardControls>
+
+## Accessibility considerations
+
+**Update 12/17/24**: This issue has been resolved in MacOS 15.
+
+**Browser/Assistive Technology Combination Issue**: We have identified an accessibility issue when using Safari and VoiceOver that affects the usability of combo boxes. This issue is not related to our design system but is a known limitation in the interaction between these specific technologies and can be confirmed using the [ARIA Authoring Practices Guide](https://www.w3.org/WAI/ARIA/apg/) (APG) example on the [World Wide Web Consortium](https://www.w3.org/) (w3c) Who created the [Web Content Accessibility Guidelines](https://www.w3.org/WAI/standards-guidelines/wcag/) (WCAG) which is the industry standard on accessibility.
+
+**Issue Details**:
+
+- Affected Components: Combobox (role=listbox)
+- OS: MacOS 14
+- Browser: Safari v15+
+- Assistive Technology: VoiceOver
+- Issue Confirmed on: 10/8/24
+- Problem: Focus is not managed correctly when using VoiceOver to select options from the combo box drop-down in Safari
+
+**User Impact**:
+VoiceOver users using Safari may experience difficulties when interacting with combo boxes across various websites and applications, not limited to those using our design system.
+
+**Steps To Reproduce Using APG**:
+
+1. Go to [APG Select-Only Combobox Example](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/) using Safari
+1. Turn on VoiceOver
+1. Navigate to the example
+1. Open the combo box using space/enter
+1. Try to navigate and select an option.
+
+**Recommendations**:
+
+- Use Chrome or Firefox, or update to MacOS 15.1+
+
+**Resources**:
+
+- https://bugs.webkit.org/show_bug.cgi?id=231724
+- https://discussions.apple.com/thread/255614236?sortBy=rank
+- https://github.com/w3c/aria-practices/issues/2060

site/docs/components/dropdown/accessibility.mdx

@@ -77,3 +77,47 @@ First opens the list if it is not already displayed and then moves visual focus
 
 </KeyboardControl>
 </KeyboardControls>
+
+## Accessibility considerations
+
+**Update 12/17/24**: This issue has been resolved in MacOS 15.
+
+**Browser/Assistive Technology Combination Issue**: We have identified an accessibility issue when using Safari and VoiceOver that affects the usability of combo boxes. This issue is not related to our design system but is a known limitation in the interaction between these specific technologies and can be confirmed using the [ARIA Authoring Practices Guide](https://www.w3.org/WAI/ARIA/apg/) (APG) example on the [World Wide Web Consortium](https://www.w3.org/) (w3c) Who created the [Web Content Accessibility Guidelines](https://www.w3.org/WAI/standards-guidelines/wcag/) (WCAG) which is the industry standard on accessibility.
+
+**Issue Details**:
+
+- Affected Components: Combobox (role=listbox)
+- OS: MacOS 14
+- Browser: Safari v15+
+- Assistive Technology: VoiceOver
+- Issue Confirmed on: 10/8/24
+- Problem: Focus is not managed correctly when using VoiceOver to select options from the combo box drop-down in Safari
+
+**User Impact**:
+VoiceOver users using Safari may experience difficulties when interacting with combo boxes across various websites and applications, not limited to those using our design system.
+
+**Steps To Reproduce Using APG**:
+
+1. Go to [APG Select-Only Combobox Example](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/) using Safari
+1. Turn on VoiceOver
+1. Navigate to the example
+1. Open the combo box using space/enter
+1. Try to navigate and select an option.
+
+**Recommendations**:
+
+- Use Chrome or Firefox, or update to MacOS 15.1+
+- Otherwise here is a workaround:
+
+1. Navigate to the example
+1. Open the combo box using space/enter
+1. VO key and right arrow to put VO focus on the dropdown
+1. VO key+shift and down arrow to go into the dropdown
+1. You should be able to navigate using right and left arrows with feedback
+1. VO key+space to make a selection.
+
+**Resources**:
+
+- https://bugs.webkit.org/show_bug.cgi?id=231724
+- https://discussions.apple.com/thread/255614236?sortBy=rank
+- https://github.com/w3c/aria-practices/issues/2060

site/docs/components/tabs/accessibility.mdx

@@ -12,6 +12,40 @@ data:
 
 Any focusable elements included in the tab content will need to be checked and tested accordingly.
 
+## Keyboard interactions
+
+<KeyboardControls>
+<KeyboardControl keyOrCombos="Tab">
+-	If focus is on outside of tabs, Tab enters focus into tabs.
+-	If focus is on a tab item, Tab exits the tab component and place focus onto the next element within the tabbing order.
+</KeyboardControl>
+
+<KeyboardControl keyOrCombos="Shift + Tab">
+  - If focus is inside a tab component, this action moves focus to the previous
+  element in the tabbing order.
+</KeyboardControl>
+
+<KeyboardControl keyOrCombos="Enter / Space">
+  - If focus is on tab hover state, this action selects a tab item.
+</KeyboardControl>
+
+<KeyboardControl keyOrCombos="Left arrow / Right arrow">
+  - This action moves focus between tab items in tab bar.
+</KeyboardControl>
+
+<KeyboardControl keyOrCombos="Up arrow / Down arrow">
+  - This action moves focus between tab items in an overflow menu list.
+</KeyboardControl>
+
+<KeyboardControl keyOrCombos="Home">
+  - If focus is on a tab, Home moves focus to the first tab.
+</KeyboardControl>
+
+<KeyboardControl keyOrCombos="End">
+- If focus is on a tab, End moves focus to the last tab.
+</KeyboardControl>
+</KeyboardControls>
+
 ## Accessibility considerations
 
 ### Scrollable region must have keyboard access ([scrollable-region-focusable](https://dequeuniversity.com/rules/axe/4.9/scrollable-region-focusable))
@@ -49,37 +83,3 @@ We anticipate when the release is published and aria actions is officially suppo
 Digital accessibility guidance continues to evolve as new design patterns and component challenges emerge. While we have worked to align with existing guidelines, some complex interactions and modern UI patterns present unique accessibility challenges that current guidelines may not fully address. We have implemented solutions that we believe create the most understandable and accessible experience possible, even when they conflict with current automated testing tools.
 
 We welcome feedback and alternative approaches to addressing any of these accessibility considerations. If you have suggestions for improving these components, please reach out to us as we are committed to continuous accessibility improvement of our user experiences.
-
-## Keyboard interactions
-
-<KeyboardControls>
-<KeyboardControl keyOrCombos="Tab">
--	If focus is on outside of tabs, Tab enters focus into tabs.
--	If focus is on a tab item, Tab exits the tab component and place focus onto the next element within the tabbing order.
-</KeyboardControl>
-
-<KeyboardControl keyOrCombos="Shift + Tab">
-  - If focus is inside a tab component, this action moves focus to the previous
-  element in the tabbing order.
-</KeyboardControl>
-
-<KeyboardControl keyOrCombos="Enter / Space">
-  - If focus is on tab hover state, this action selects a tab item.
-</KeyboardControl>
-
-<KeyboardControl keyOrCombos="Left arrow / Right arrow">
-  - This action moves focus between tab items in tab bar.
-</KeyboardControl>
-
-<KeyboardControl keyOrCombos="Up arrow / Down arrow">
-  - This action moves focus between tab items in an overflow menu list.
-</KeyboardControl>
-
-<KeyboardControl keyOrCombos="Home">
-  - If focus is on a tab, Home moves focus to the first tab.
-</KeyboardControl>
-
-<KeyboardControl keyOrCombos="End">
-- If focus is on a tab, End moves focus to the last tab.
-</KeyboardControl>
-</KeyboardControls>