diff --git a/src/components/A11yStatus/A11yStatus.js b/src/components/A11yStatus/A11yStatus.js index cf45084095b..f35404b7d42 100644 --- a/src/components/A11yStatus/A11yStatus.js +++ b/src/components/A11yStatus/A11yStatus.js @@ -3,15 +3,31 @@ import React from 'react'; import { Tag } from '@carbon/react'; import componentList from '../../data/components.json'; import * as avtTestData from '@carbon/react/.playwright/INTERNAL_AVT_REPORT_DO_NOT_USE.json'; +import packageJson from '../../../package.json'; + +import { table } from './a11y-status.module.scss'; class A11yStatus extends React.Component { render() { - const Tested = Tested; - const NotTested = Not yet tested; + const reactVersion = packageJson.dependencies['@carbon/react']; + const TestedTag = Tested; + const NotTestedTag = Not yet tested; + const PartiallyTestedTag = Partially tested; + const ManuallyTestedTag = Manually tested; + const NotAvailableTag = Not available; + + console.log(reactVersion); return (
-
+
+

+ Latest version: {reactVersion} |{' '} + Framework React (@carbon/react) +

+
+
@@ -53,6 +69,9 @@ class A11yStatus extends React.Component { let hasDefaultAVT = false; let hasComplexAVT = false; let hasKeyboardNavAVT = false; + let hasDefaultAVTManual = false; + let hasDefaultAVTPartial = false; + if (componentTestData) { // Iterate through all specs in the suite, and all tags in // each spec, to determine if there is _any_ spec that includes @@ -83,6 +102,8 @@ class A11yStatus extends React.Component { }); } + console.log('hasDefaultAVT', hasDefaultAVT); + return ( <> @@ -90,7 +111,15 @@ class A11yStatus extends React.Component { {componentName} - + @@ -98,13 +127,13 @@ class A11yStatus extends React.Component { - + - + diff --git a/src/components/A11yStatus/a11y-status.module.scss b/src/components/A11yStatus/a11y-status.module.scss index 7dd9542764a..05ee6607d52 100644 --- a/src/components/A11yStatus/a11y-status.module.scss +++ b/src/components/A11yStatus/a11y-status.module.scss @@ -1,51 +1,7 @@ -.profileContainer:nth-child(3n + 2), -.profileContainer:nth-child(3n + 3) { - border-left: 1px solid $gray-30; - border-bottom: 1px solid $gray-30; +.table { + margin-top: $spacing-06; } -.profileContainer:nth-child(3n + 1) { - border-bottom: 1px solid $gray-30; -} - -.profileContainer:nth-last-child(-n + 3) { - @include breakpoint('lg') { - border-bottom: 0px; - } -} - -.profileContainer:nth-last-child(-n + 2) { - @include breakpoint('md') { - border-bottom: 0px; - } -} - -.cardContainer { - display: flex; - flex-direction: row; - justify-content: space-between; - background: $white-0; -} - -.contentContainer { - width: 100%; -} - -.imageContainer { - width: 100%; - height: 100%; -} - -.nameStyle { - @include type-style('heading-01', true); - color: $black-100; - padding-left: $spacing-05; - padding-top: $spacing-05; -} - -.titleStyle { - @include type-style('label-01', true); - color: $gray-80; - padding-left: $spacing-05; - width: 95%; +:global(.page-table .cds--tag) { + margin-left: 0; } diff --git a/src/pages/components/overview/accessibility-status.mdx b/src/pages/components/overview/accessibility-status.mdx index 59a2e4771bb..00ea7bc70b9 100755 --- a/src/pages/components/overview/accessibility-status.mdx +++ b/src/pages/components/overview/accessibility-status.mdx @@ -6,13 +6,14 @@ description: tabs: ['Components', 'Accessibility Status'] --- +import { Tag } from '@carbon/react'; import A11yStatus from 'components/A11yStatus'; - - -TODO: We need copy for the page description here. +Components are one of the key building blocks of the design system. Their +systematic reuse helps to create visual and functional consistency across +products. @@ -26,11 +27,36 @@ TODO: We need copy for the page description here. ## Accessibility tag status +For every latest release, Carbon runs tests on all components to meet the +accessibility requirements. These different statuses report the work that Carbon +has done in the back end. These tests appear only when the components are +stable. + +| Tag | Meaning | +| --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Tested | When all tests pass and there are no violations when running the automated Equal Access Checker on default state, advanced states, and keyboard navigation | +| Partially tested | When some tests pass or are removed, they are either combined into existing tests or substituted with new ones and moved to a different file. Skipped tests stay in the file but are clearly marked with test.skip. | +| Manually tested | When screen reader tests are conducted manually and validated by a human to ensure quality | +| Not available | Usually, with keyboard navigation tests, when this type of test is not available for certain components | +| Not yet tested | Usually, with experimental or unstable components, tests have not been conducted for either automated or manual testing | + ## Accessibility tests +Accessibility AVT (Accessibility Automated Verification Testing) involves the +use of automated tools and software to assess the accessibility of a digital +product against established accessibility standards, such as the Web Content +Accessibility Guidelines (WCAG). + +| Test | Meaning | Possible Tags | +| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | +| Default state | The default state of the component | Tested
Not yet tested
Partially tested | +| Advanced states | Other states rather than the default state of a component. These could be interactive states of a component or its multiple variants. | Tested
Not yet tested
Partially tested | +| Keyboard navigation | This test ensures every action a mouse user can do should have a keyboard equivalent. | Tested
Not available
Partially tested | +| Screen reader | This test ensures that the visual information on the screen is reinforced programmatically. | Not yet tested
Manually tested
Partially tested | + ## All component accessibility status This table reflects the latest accessibility testing of only the stable -components in React framework at the moment. +components in the React framework at the moment. -**Latest version:** 14.1.1 | **Framework:** React (carbon/carbon-react) +
Default state{hasDefaultAVT ? Tested : NotTested} + {hasDefaultAVT + ? TestedTag + : hasDefaultAVTManual + ? ManuallyTestedTag + : hasDefaultAVTPartial + ? PartiallyTestedTag + : NotTestedTag} + Github link
Advanced states{hasComplexAVT ? Tested : NotTested}{hasComplexAVT ? TestedTag : NotTestedTag}
Keyboard states{hasKeyboardNavAVT ? Tested : NotTested}{hasKeyboardNavAVT ? TestedTag : NotAvailableTag}