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..78ddeb869 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.', @@ -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.', @@ -850,6 +851,7 @@ export const components = [ }, { name: 'Menu', + 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.', diff --git a/aries-site/src/data/wcag/components.json b/aries-site/src/data/wcag/components.json index c951d40fe..15fdf3acb 100644 --- a/aries-site/src/data/wcag/components.json +++ b/aries-site/src/data/wcag/components.json @@ -2,15 +2,50 @@ { "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" }, { "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" } + ], + "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" } + ], + "menu": [ + { "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.5.5", "status": "failed" }, + { "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/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 `