From 3b8b01b6021b071298b3c34f25d4432473df44f6 Mon Sep 17 00:00:00 2001 From: britt6612 Date: Tue, 14 Jan 2025 11:17:01 -0700 Subject: [PATCH 01/11] add rules for menu --- aries-site/src/data/wcag/components.json | 18 ++++++++++++++++++ aries-site/src/pages/components/menu.mdx | 17 ++++++++++------- 2 files changed, 28 insertions(+), 7 deletions(-) diff --git a/aries-site/src/data/wcag/components.json b/aries-site/src/data/wcag/components.json index c951d40fe..c5c7b8c75 100644 --- a/aries-site/src/data/wcag/components.json +++ b/aries-site/src/data/wcag/components.json @@ -12,6 +12,24 @@ { "rule": "2.4.9", "status": "conditional" }, { "rule": "3.2.1", "status": "passed" }, { "rule": "4.1.2", "status": "passed" } + ], + "menu": [ + { "rule": "1.4.11", "status": "passed" }, + { "rule": "1.4.13", "status": "passed" }, + { "rule": "1.4.3", "status": "passed" }, + { "rule": "2.1.1", "status": "passed" }, + { "rule": "2.1.2", "status": "passed" }, + { "rule": "2.4.7", "status": "passed" }, + { "rule": "2.4.11", "status": "passed" }, + { "rule": "2.4.12", "status": "passed" }, + { "rule": "2.4.13", "status": "passed" }, + { "rule": "2.4.4", "status": "conditional" }, + { "rule": "2.4.5", "status": "passed" }, + { "rule": "2.5.8", "status": "passed" }, + { "rule": "3.2.1", "status": "passed" }, + { "rule": "3.2.4", "status": "conditional" }, + { "rule": "3.2.5", "status": "passed" }, + { "rule": "4.1.2", "status": "passed" } ] } ] diff --git a/aries-site/src/pages/components/menu.mdx b/aries-site/src/pages/components/menu.mdx index b06d6edc0..b1b28ebca 100644 --- a/aries-site/src/pages/components/menu.mdx +++ b/aries-site/src/pages/components/menu.mdx @@ -1,5 +1,5 @@ import { Box } from 'grommet'; -import { BestPracticeGroup, Example } from '../../layouts'; +import { AccessibilitySection, BestPracticeGroup, Example } from '../../layouts'; import { MenuExample, MenuBatchActionsExample, @@ -41,12 +41,6 @@ To create a predictable experience for users, the following are guidelines for u **Avoid creating cascading menus.** Menus with multiple layers creates a confusing experience for the user because relevant actions may become nested and difficult to find. Refining menu items to necessary actions creates a more manageable user experience. -### Accessibility - -Accessibility features such as screen reader messages are automatically built into Menu. By default, these messages are "Open Menu" and "Close Menu". However, if a more specific message is necessary, a custom [a11yTitle](https://v2.grommet.io/menu?theme=hpe#a11yTitle) or [messages](https://v2.grommet.io/menu?theme=hpe#messages) may be applied. - -An icon can be used on a menu item to provide additional context about the action. It is recommended that an icon is used in conjunction with text to ensure the context of the menu item is clear. However, there may be cases where an icon alone is sufficient. For example, highly familiar action indicators, such as this example of [Menu with custom icon](#with-custom-icon) demonstrate when an icon only may be sufficient. - ## Organizing menu items Allow a user to quickly locate the menu item they desire by organizing menu items @@ -283,3 +277,12 @@ Used to indicate that a Menu cannot be interacted with. > + +### Accessibility + +Accessibility features such as screen reader messages are automatically built into Menu. By default, these messages are "Open Menu" and "Close Menu". However, if a more specific message is necessary, a custom [a11yTitle](https://v2.grommet.io/menu?theme=hpe#a11yTitle) or [messages](https://v2.grommet.io/menu?theme=hpe#messages) may be applied. + +An icon can be used on a menu item to provide additional context about the action. It is recommended that an icon is used in conjunction with text to ensure the context of the menu item is clear. However, there may be cases where an icon alone is sufficient. For example, highly familiar action indicators, such as this example of [Menu with custom icon](#with-custom-icon) demonstrate when an icon only may be sufficient. + +### WCAG compliance + From cde073fa63122215e25ea1f1fda5074432238588 Mon Sep 17 00:00:00 2001 From: britt6612 Date: Tue, 14 Jan 2025 14:48:51 -0700 Subject: [PATCH 02/11] add tag --- aries-site/src/data/structures/components.js | 1 + 1 file changed, 1 insertion(+) diff --git a/aries-site/src/data/structures/components.js b/aries-site/src/data/structures/components.js index 474b99bd0..08c943d59 100644 --- a/aries-site/src/data/structures/components.js +++ b/aries-site/src/data/structures/components.js @@ -850,6 +850,7 @@ export const components = [ }, { name: 'Menu', + accessibility: 'Passed WCAG 2.2 AAA', category: 'Controls', description: 'Menu is a component that contains a list of actions. When a user clicks an item in the menu, the menu closes and the action is executed.', From 9876784c62ad7dff266ee053c6d74df5fc401d6b Mon Sep 17 00:00:00 2001 From: britt6612 Date: Tue, 14 Jan 2025 15:44:31 -0700 Subject: [PATCH 03/11] update rules based on feedback --- aries-site/src/data/wcag/components.json | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/aries-site/src/data/wcag/components.json b/aries-site/src/data/wcag/components.json index c5c7b8c75..dcf024b99 100644 --- a/aries-site/src/data/wcag/components.json +++ b/aries-site/src/data/wcag/components.json @@ -17,14 +17,12 @@ { "rule": "1.4.11", "status": "passed" }, { "rule": "1.4.13", "status": "passed" }, { "rule": "1.4.3", "status": "passed" }, + { "rule": "1.4.6", "status": "passed" }, { "rule": "2.1.1", "status": "passed" }, { "rule": "2.1.2", "status": "passed" }, { "rule": "2.4.7", "status": "passed" }, - { "rule": "2.4.11", "status": "passed" }, - { "rule": "2.4.12", "status": "passed" }, { "rule": "2.4.13", "status": "passed" }, { "rule": "2.4.4", "status": "conditional" }, - { "rule": "2.4.5", "status": "passed" }, { "rule": "2.5.8", "status": "passed" }, { "rule": "3.2.1", "status": "passed" }, { "rule": "3.2.4", "status": "conditional" }, From ed57ed76f73e8a33f5620445d6750dbcd0e9322c Mon Sep 17 00:00:00 2001 From: britt6612 Date: Wed, 15 Jan 2025 09:02:56 -0700 Subject: [PATCH 04/11] changes rules to failing --- aries-site/src/data/wcag/components.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/aries-site/src/data/wcag/components.json b/aries-site/src/data/wcag/components.json index dcf024b99..169cc340a 100644 --- a/aries-site/src/data/wcag/components.json +++ b/aries-site/src/data/wcag/components.json @@ -20,8 +20,8 @@ { "rule": "1.4.6", "status": "passed" }, { "rule": "2.1.1", "status": "passed" }, { "rule": "2.1.2", "status": "passed" }, - { "rule": "2.4.7", "status": "passed" }, - { "rule": "2.4.13", "status": "passed" }, + { "rule": "2.4.7", "status": "failed" }, + { "rule": "2.4.13", "status": "failed" }, { "rule": "2.4.4", "status": "conditional" }, { "rule": "2.5.8", "status": "passed" }, { "rule": "3.2.1", "status": "passed" }, From b76d6695fe5743d8c7d69898be46ddf39e4d5411 Mon Sep 17 00:00:00 2001 From: britt6612 Date: Wed, 15 Jan 2025 09:07:22 -0700 Subject: [PATCH 05/11] add rule for anchor --- aries-site/src/data/wcag/components.json | 1 + 1 file changed, 1 insertion(+) diff --git a/aries-site/src/data/wcag/components.json b/aries-site/src/data/wcag/components.json index 169cc340a..cf49e94d7 100644 --- a/aries-site/src/data/wcag/components.json +++ b/aries-site/src/data/wcag/components.json @@ -10,6 +10,7 @@ { "rule": "2.4.4", "status": "conditional" }, { "rule": "2.4.7", "status": "passed" }, { "rule": "2.4.9", "status": "conditional" }, + { "rule": "2.4.13", "status": "failed" }, { "rule": "3.2.1", "status": "passed" }, { "rule": "4.1.2", "status": "passed" } ], From 81ce635b7e9c12daebb8429586dac57bb51a5e85 Mon Sep 17 00:00:00 2001 From: britt6612 Date: Wed, 15 Jan 2025 13:26:03 -0700 Subject: [PATCH 06/11] address rules --- aries-site/src/data/structures/components.js | 4 ++-- aries-site/src/data/wcag/components.json | 7 ++++--- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/aries-site/src/data/structures/components.js b/aries-site/src/data/structures/components.js index 08c943d59..e77aee674 100644 --- a/aries-site/src/data/structures/components.js +++ b/aries-site/src/data/structures/components.js @@ -30,7 +30,7 @@ import { TagPreview } from '../../examples/cardPreviews/tag'; export const components = [ { name: 'Anchor', - accessibility: 'Passed WCAG 2.2 AAA', + accessibility: 'Passed WCAG 2.2 AA', category: 'Controls', description: 'Hyperlinks used with text-based navigation, such as inline text.', @@ -850,7 +850,7 @@ export const components = [ }, { name: 'Menu', - accessibility: 'Passed WCAG 2.2 AAA', + accessibility: 'Passed WCAG 2.2 AA', category: 'Controls', description: 'Menu is a component that contains a list of actions. When a user clicks an item in the menu, the menu closes and the action is executed.', diff --git a/aries-site/src/data/wcag/components.json b/aries-site/src/data/wcag/components.json index cf49e94d7..4b8c0302b 100644 --- a/aries-site/src/data/wcag/components.json +++ b/aries-site/src/data/wcag/components.json @@ -15,15 +15,16 @@ { "rule": "4.1.2", "status": "passed" } ], "menu": [ - { "rule": "1.4.11", "status": "passed" }, - { "rule": "1.4.13", "status": "passed" }, { "rule": "1.4.3", "status": "passed" }, { "rule": "1.4.6", "status": "passed" }, + { "rule": "1.4.11", "status": "passed" }, + { "rule": "1.4.13", "status": "passed" }, { "rule": "2.1.1", "status": "passed" }, { "rule": "2.1.2", "status": "passed" }, + { "rule": "2.4.4", "status": "conditional" }, { "rule": "2.4.7", "status": "failed" }, { "rule": "2.4.13", "status": "failed" }, - { "rule": "2.4.4", "status": "conditional" }, + { "rule": "2.5.5", "status": "failed" }, { "rule": "2.5.8", "status": "passed" }, { "rule": "3.2.1", "status": "passed" }, { "rule": "3.2.4", "status": "conditional" }, From c8b0998ff656ad6a7c0c449f9ae01ea1814a3174 Mon Sep 17 00:00:00 2001 From: britt6612 Date: Wed, 15 Jan 2025 13:26:43 -0700 Subject: [PATCH 07/11] address rules --- aries-site/src/data/wcag/components.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aries-site/src/data/wcag/components.json b/aries-site/src/data/wcag/components.json index 4b8c0302b..848187bed 100644 --- a/aries-site/src/data/wcag/components.json +++ b/aries-site/src/data/wcag/components.json @@ -2,8 +2,8 @@ { "anchor": [ { "rule": "1.4.1", "status": "passed" }, - { "rule": "1.4.6", "status": "passed" }, { "rule": "1.4.3", "status": "passed" }, + { "rule": "1.4.6", "status": "passed" }, { "rule": "2.1.1", "status": "passed" }, { "rule": "2.1.2", "status": "passed" }, { "rule": "2.1.3", "status": "passed" }, From f6d981261660d795a8282655452d6ffb1d4ebc86 Mon Sep 17 00:00:00 2001 From: britt6612 Date: Thu, 16 Jan 2025 08:56:11 -0700 Subject: [PATCH 08/11] change to failing --- aries-site/src/data/structures/components.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aries-site/src/data/structures/components.js b/aries-site/src/data/structures/components.js index e77aee674..bcb68763a 100644 --- a/aries-site/src/data/structures/components.js +++ b/aries-site/src/data/structures/components.js @@ -850,7 +850,7 @@ export const components = [ }, { name: 'Menu', - accessibility: 'Passed WCAG 2.2 AA', + accessibility: 'Failed WCAG 2.2 AA', category: 'Controls', description: 'Menu is a component that contains a list of actions. When a user clicks an item in the menu, the menu closes and the action is executed.', From 455ad6b53b83c2520470024565463821418e955f Mon Sep 17 00:00:00 2001 From: Brittany <42451602+britt6612@users.noreply.github.com> Date: Thu, 16 Jan 2025 14:40:30 -0700 Subject: [PATCH 09/11] Update aries-site/src/pages/components/menu.mdx Co-authored-by: Matthew Glissmann --- aries-site/src/pages/components/menu.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aries-site/src/pages/components/menu.mdx b/aries-site/src/pages/components/menu.mdx index b1b28ebca..5b628ae6a 100644 --- a/aries-site/src/pages/components/menu.mdx +++ b/aries-site/src/pages/components/menu.mdx @@ -282,7 +282,7 @@ Used to indicate that a Menu cannot be interacted with. Accessibility features such as screen reader messages are automatically built into Menu. By default, these messages are "Open Menu" and "Close Menu". However, if a more specific message is necessary, a custom [a11yTitle](https://v2.grommet.io/menu?theme=hpe#a11yTitle) or [messages](https://v2.grommet.io/menu?theme=hpe#messages) may be applied. -An icon can be used on a menu item to provide additional context about the action. It is recommended that an icon is used in conjunction with text to ensure the context of the menu item is clear. However, there may be cases where an icon alone is sufficient. For example, highly familiar action indicators, such as this example of [Menu with custom icon](#with-custom-icon) demonstrate when an icon only may be sufficient. +An icon may be used on a menu item to provide additional context about the action. It is recommended that an icon is used in conjunction with text to ensure the context of the menu item is clear. However, there may be cases where an icon alone is sufficient. For example, highly familiar action indicators, such as this example of [Menu with custom icon](#with-custom-icon) demonstrate when an icon only may be sufficient. ### WCAG compliance From c19076ca9dbe261bfad349f34e760e03946b8a76 Mon Sep 17 00:00:00 2001 From: Jessica Rosenquist <54560994+jcfilben@users.noreply.github.com> Date: Thu, 16 Jan 2025 15:04:07 -0700 Subject: [PATCH 10/11] Added Button accessibility docs (#4649) * Added Button accessibility docs * adjust tag color based on message * adjust tag color based on message * added rule 4.1.3 * link to anchor rules * Changed note to inline notification * fixed passed with exceptions --- .../src/components/content/SubsectionText.js | 8 +++++- aries-site/src/data/structures/components.js | 1 + aries-site/src/data/wcag/components.json | 17 ++++++++++++ .../layouts/content/AccessibilitySection.js | 8 ++++++ .../src/layouts/content/WCAGRuleDetail.js | 2 +- .../src/layouts/content/WCAGRuleSummary.js | 4 +-- aries-site/src/pages/components/anchor.mdx | 2 -- aries-site/src/pages/components/button.mdx | 26 ++++++++++++++----- 8 files changed, 55 insertions(+), 13 deletions(-) diff --git a/aries-site/src/components/content/SubsectionText.js b/aries-site/src/components/content/SubsectionText.js index 5f93278b5..a961ef30f 100644 --- a/aries-site/src/components/content/SubsectionText.js +++ b/aries-site/src/components/content/SubsectionText.js @@ -21,6 +21,12 @@ const StyledBox = styled(Box)` } `; +const AccessibilityColorMap = accessibility => { + if (accessibility.includes('Passed')) return 'status-ok'; + if (accessibility.includes('Failed')) return 'status-critical'; + return 'status-warning'; +}; + export const SubsectionText = ({ children, level, @@ -37,7 +43,7 @@ export const SubsectionText = ({ {accessibility && ( document diff --git a/aries-site/src/data/structures/components.js b/aries-site/src/data/structures/components.js index 474b99bd0..868311169 100644 --- a/aries-site/src/data/structures/components.js +++ b/aries-site/src/data/structures/components.js @@ -90,6 +90,7 @@ export const components = [ }, { name: 'Button', + accessibility: 'Passed WCAG 2.2 AA', category: 'Controls', description: 'Buttons are graphic elements that indicate to users that actions can be performed.', diff --git a/aries-site/src/data/wcag/components.json b/aries-site/src/data/wcag/components.json index c951d40fe..d6fd5a4f8 100644 --- a/aries-site/src/data/wcag/components.json +++ b/aries-site/src/data/wcag/components.json @@ -12,6 +12,23 @@ { "rule": "2.4.9", "status": "conditional" }, { "rule": "3.2.1", "status": "passed" }, { "rule": "4.1.2", "status": "passed" } + ], + "button": [ + { "rule": "1.1.1", "status": "conditional" }, + { "rule": "1.3.1", "status": "conditional" }, + { "rule": "1.3.3", "status": "conditional" }, + { "rule": "1.4.3", "status": "exceptions" }, + { "rule": "1.4.6", "status": "failed" }, + { "rule": "2.1.1", "status": "passed" }, + { "rule": "2.1.2", "status": "passed" }, + { "rule": "2.1.3", "status": "passed" }, + { "rule": "2.4.7", "status": "passed" }, + { "rule": "2.4.13", "status": "failed" }, + { "rule": "2.5.3", "status": "conditional" }, + { "rule": "2.5.5", "status": "failed" }, + { "rule": "2.5.8", "status": "passed" }, + { "rule": "4.1.2", "status": "conditional" }, + { "rule": "4.1.3", "status": "passed" } ] } ] diff --git a/aries-site/src/layouts/content/AccessibilitySection.js b/aries-site/src/layouts/content/AccessibilitySection.js index f9a1aed17..284ea9540 100644 --- a/aries-site/src/layouts/content/AccessibilitySection.js +++ b/aries-site/src/layouts/content/AccessibilitySection.js @@ -1,5 +1,6 @@ /* eslint-disable react/prop-types */ import React, { useState, useMemo, useEffect } from 'react'; +import { Notification } from 'grommet'; import { WCAGRuleDetail, WCAGRuleSummary } from '.'; import componentData from '../../data/wcag/components.json'; @@ -87,6 +88,13 @@ export const AccessibilitySection = ({ title, version }) => { return ( <> + diff --git a/aries-site/src/layouts/content/WCAGRuleDetail.js b/aries-site/src/layouts/content/WCAGRuleDetail.js index 6b5fa798c..725a14588 100644 --- a/aries-site/src/layouts/content/WCAGRuleDetail.js +++ b/aries-site/src/layouts/content/WCAGRuleDetail.js @@ -24,7 +24,7 @@ const getStatusIcon = status => { return ; case 'conditional': return ; - case 'passed with exceptions': + case 'exceptions': return ; default: return ; diff --git a/aries-site/src/layouts/content/WCAGRuleSummary.js b/aries-site/src/layouts/content/WCAGRuleSummary.js index bcb87a53c..4e566f11b 100644 --- a/aries-site/src/layouts/content/WCAGRuleSummary.js +++ b/aries-site/src/layouts/content/WCAGRuleSummary.js @@ -12,7 +12,7 @@ const STATUS_MAP = { label: 'Passed', icon: , }, - passedWithExceptions: { + exceptions: { label: 'Passed with Exceptions', icon: , }, @@ -43,7 +43,7 @@ const calculateAccessibilityTestCounts = statuses => }, { passed: 0, - passedWithExceptions: 0, + exceptions: 0, failed: 0, conditional: 0, }, diff --git a/aries-site/src/pages/components/anchor.mdx b/aries-site/src/pages/components/anchor.mdx index 38ddac651..0fb08eff0 100644 --- a/aries-site/src/pages/components/anchor.mdx +++ b/aries-site/src/pages/components/anchor.mdx @@ -131,8 +131,6 @@ Used to indicate that an anchor cannot be interacted with. ### A11y guidance The following guidance should be considered for each instance of the component and is the responsibility of the implementer. WCAG criteria provided directly by the Grommet component are summarized under [WCAG compliance](#wcag-compliance). -**Note**: WCAG rules marked as conditional indicate that the implementer must take additional actions to ensure full compliance. - **Use 'target' and 'rel' props when linking externally:** If clicking an Anchor leads to an external URL, apply these props to the anchor: diff --git a/aries-site/src/pages/components/button.mdx b/aries-site/src/pages/components/button.mdx index 65f65e871..e7c5b7182 100644 --- a/aries-site/src/pages/components/button.mdx +++ b/aries-site/src/pages/components/button.mdx @@ -1,4 +1,8 @@ -import { BestPracticeGroup, Example } from '../../layouts'; +import { + AccessibilitySection, + BestPracticeGroup, + Example, +} from '../../layouts'; import { ButtonBadCancelPreview, ButtonBadGroupPreview, @@ -137,12 +141,6 @@ For buttons with icons ONLY, it is important that you show the two following ele 2. Inform the user of what will happen when the button is clicked by including `a11yTitle` or `aria-label`. -### Accessibility - -If pressing a Button results in a new URL, or the resultant UI makes sense as "a new browser tab," that is a link ``. Everything else is a `