From ba109cacadcd104c4191358fd7dbb6a784ebfa48 Mon Sep 17 00:00:00 2001 From: origami-z <5257855+origami-z@users.noreply.github.com> Date: Mon, 4 Nov 2024 17:00:42 +0000 Subject: [PATCH 1/8] Add known dropdown a11y issue --- .../components/dropdown/accessibility.mdx | 42 +++++++++++++++++++ 1 file changed, 42 insertions(+) diff --git a/site/docs/components/dropdown/accessibility.mdx b/site/docs/components/dropdown/accessibility.mdx index fb36a2dd017..7eb3262c862 100644 --- a/site/docs/components/dropdown/accessibility.mdx +++ b/site/docs/components/dropdown/accessibility.mdx @@ -8,6 +8,48 @@ data: $ref: ./#/data --- +## Known accessibility issue + +**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 APG example on the w3c (Who created WCAG) which is the industry standard on accessibility. + +**Issue Details**: + +- Affected Components: Combobox (role=listbox) +- OS: MacOS 14.4.1+ +- 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 when possible +- 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 + +We will continue to monitor this situation and update this note when the issue has been resolved. + ## Keyboard interactions From d9f3716a151de051b789108ca879e9606de68c2a Mon Sep 17 00:00:00 2001 From: origami-z <5257855+origami-z@users.noreply.github.com> Date: Mon, 4 Nov 2024 17:18:07 +0000 Subject: [PATCH 2/8] Fix links --- site/docs/components/dropdown/accessibility.mdx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/site/docs/components/dropdown/accessibility.mdx b/site/docs/components/dropdown/accessibility.mdx index 7eb3262c862..e1338e56d69 100644 --- a/site/docs/components/dropdown/accessibility.mdx +++ b/site/docs/components/dropdown/accessibility.mdx @@ -44,9 +44,10 @@ Recommendations: 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 + +- 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 We will continue to monitor this situation and update this note when the issue has been resolved. From 53ad32350cafe9c7e705cafe135d17ebbbb068f0 Mon Sep 17 00:00:00 2001 From: Zhihao Cui <5257855+origami-z@users.noreply.github.com> Date: Mon, 4 Nov 2024 17:33:43 +0000 Subject: [PATCH 3/8] Update bold --- site/docs/components/dropdown/accessibility.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/site/docs/components/dropdown/accessibility.mdx b/site/docs/components/dropdown/accessibility.mdx index e1338e56d69..098065d1e50 100644 --- a/site/docs/components/dropdown/accessibility.mdx +++ b/site/docs/components/dropdown/accessibility.mdx @@ -32,7 +32,7 @@ VoiceOver users using Safari may experience difficulties when interacting with c 1. Open the combo box using space/enter 1. Try to navigate and select an option. -Recommendations: +**Recommendations**: - Use Chrome or Firefox when possible - Otherwise here is a workaround: @@ -43,7 +43,7 @@ Recommendations: 1. You should be able to navigate using right and left arrows with feedback 1. VO key+space to make a selection. -Resources: +**Resources**: - https://bugs.webkit.org/show_bug.cgi?id=231724 - https://discussions.apple.com/thread/255614236?sortBy=rank From f12218190233e9be28d52323825ac38d29cd315f Mon Sep 17 00:00:00 2001 From: Zhihao Cui <5257855+origami-z@users.noreply.github.com> Date: Thu, 14 Nov 2024 17:23:39 +0000 Subject: [PATCH 4/8] Update mac version --- site/docs/components/dropdown/accessibility.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/site/docs/components/dropdown/accessibility.mdx b/site/docs/components/dropdown/accessibility.mdx index 098065d1e50..45d6f0cdd5d 100644 --- a/site/docs/components/dropdown/accessibility.mdx +++ b/site/docs/components/dropdown/accessibility.mdx @@ -15,7 +15,7 @@ data: **Issue Details**: - Affected Components: Combobox (role=listbox) -- OS: MacOS 14.4.1+ +- OS: MacOS 14 - Browser: Safari v15+ - Assistive Technology: VoiceOver - Issue Confirmed on: 10/8/24 @@ -34,7 +34,7 @@ VoiceOver users using Safari may experience difficulties when interacting with c **Recommendations**: -- Use Chrome or Firefox when possible +- 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 From 8674d1a35a1db4374e5c115cf8ce8f003c63e1b6 Mon Sep 17 00:00:00 2001 From: Josh Wooding <12938082+joshwooding@users.noreply.github.com> Date: Tue, 17 Dec 2024 12:16:04 +0000 Subject: [PATCH 5/8] Update site/docs/components/dropdown/accessibility.mdx --- site/docs/components/dropdown/accessibility.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/docs/components/dropdown/accessibility.mdx b/site/docs/components/dropdown/accessibility.mdx index 45d6f0cdd5d..9e35205ef98 100644 --- a/site/docs/components/dropdown/accessibility.mdx +++ b/site/docs/components/dropdown/accessibility.mdx @@ -8,7 +8,7 @@ data: $ref: ./#/data --- -## Known accessibility issue +## Accessibility considerations **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 APG example on the w3c (Who created WCAG) which is the industry standard on accessibility. From f1c7d43a8b17d6ccfdd10e91ffa0f0be99c228b8 Mon Sep 17 00:00:00 2001 From: Jake <93048400+jake-costa@users.noreply.github.com> Date: Tue, 17 Dec 2024 12:52:49 -0600 Subject: [PATCH 6/8] Accessibility doc updates on known a11y issue for Dropdown/Combo-box --- .../components/combo-box/accessibility.mdx | 36 +++++++++++++++++++ .../components/dropdown/accessibility.mdx | 4 +-- 2 files changed, 38 insertions(+), 2 deletions(-) diff --git a/site/docs/components/combo-box/accessibility.mdx b/site/docs/components/combo-box/accessibility.mdx index 8701324d412..67308601099 100644 --- a/site/docs/components/combo-box/accessibility.mdx +++ b/site/docs/components/combo-box/accessibility.mdx @@ -8,6 +8,42 @@ data: $ref: ./#/data --- +## Accessibility considerations + +**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 + +Update 12/17/24: This issue has been resolved in MacOS 15. + ## Keyboard interactions diff --git a/site/docs/components/dropdown/accessibility.mdx b/site/docs/components/dropdown/accessibility.mdx index 9e35205ef98..ef4f6b88277 100644 --- a/site/docs/components/dropdown/accessibility.mdx +++ b/site/docs/components/dropdown/accessibility.mdx @@ -10,7 +10,7 @@ data: ## Accessibility considerations -**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 APG example on the w3c (Who created WCAG) which is the industry standard on accessibility. +**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**: @@ -49,7 +49,7 @@ VoiceOver users using Safari may experience difficulties when interacting with c - https://discussions.apple.com/thread/255614236?sortBy=rank - https://github.com/w3c/aria-practices/issues/2060 -We will continue to monitor this situation and update this note when the issue has been resolved. +Update 12/17/24: This issue has been resolved in MacOS 15. ## Keyboard interactions From 712978f7d605cf48e5a67768dc0d2b53ae67e167 Mon Sep 17 00:00:00 2001 From: Jake <93048400+jake-costa@users.noreply.github.com> Date: Tue, 17 Dec 2024 12:59:28 -0600 Subject: [PATCH 7/8] Fixed WCAG link --- site/docs/components/combo-box/accessibility.mdx | 2 +- site/docs/components/dropdown/accessibility.mdx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/site/docs/components/combo-box/accessibility.mdx b/site/docs/components/combo-box/accessibility.mdx index 67308601099..ddfde994c0a 100644 --- a/site/docs/components/combo-box/accessibility.mdx +++ b/site/docs/components/combo-box/accessibility.mdx @@ -10,7 +10,7 @@ data: ## Accessibility considerations -**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. +**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**: diff --git a/site/docs/components/dropdown/accessibility.mdx b/site/docs/components/dropdown/accessibility.mdx index ef4f6b88277..2dbd987c041 100644 --- a/site/docs/components/dropdown/accessibility.mdx +++ b/site/docs/components/dropdown/accessibility.mdx @@ -10,7 +10,7 @@ data: ## Accessibility considerations -**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. +**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**: From acad98fdd69b07c322a95d956106e6147d886bc6 Mon Sep 17 00:00:00 2001 From: Jake <93048400+jake-costa@users.noreply.github.com> Date: Tue, 17 Dec 2024 13:07:52 -0600 Subject: [PATCH 8/8] Added Resolved Update for A11y Issue --- site/docs/components/combo-box/accessibility.mdx | 4 ++-- site/docs/components/dropdown/accessibility.mdx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/site/docs/components/combo-box/accessibility.mdx b/site/docs/components/combo-box/accessibility.mdx index ddfde994c0a..c057e729772 100644 --- a/site/docs/components/combo-box/accessibility.mdx +++ b/site/docs/components/combo-box/accessibility.mdx @@ -10,6 +10,8 @@ data: ## 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**: @@ -42,8 +44,6 @@ VoiceOver users using Safari may experience difficulties when interacting with c - https://discussions.apple.com/thread/255614236?sortBy=rank - https://github.com/w3c/aria-practices/issues/2060 -Update 12/17/24: This issue has been resolved in MacOS 15. - ## Keyboard interactions diff --git a/site/docs/components/dropdown/accessibility.mdx b/site/docs/components/dropdown/accessibility.mdx index 2dbd987c041..f114cc861cf 100644 --- a/site/docs/components/dropdown/accessibility.mdx +++ b/site/docs/components/dropdown/accessibility.mdx @@ -10,6 +10,8 @@ data: ## 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**: @@ -49,8 +51,6 @@ VoiceOver users using Safari may experience difficulties when interacting with c - https://discussions.apple.com/thread/255614236?sortBy=rank - https://github.com/w3c/aria-practices/issues/2060 -Update 12/17/24: This issue has been resolved in MacOS 15. - ## Keyboard interactions