Skip to content

Commit

Permalink
feat: a11y status page content
Browse files Browse the repository at this point in the history
  • Loading branch information
@alisonjoseph
alisonjoseph committed Jan 3, 2024
1 parent 4e23037 commit 11ce0bf
Show file tree
Hide file tree
Showing 3 changed files with 70 additions and 59 deletions.
41 changes: 35 additions & 6 deletions src/components/A11yStatus/A11yStatus.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = <Tag type="green">Tested</Tag>;
const NotTested = <Tag type="purple">Not yet tested</Tag>;
const reactVersion = packageJson.dependencies['@carbon/react'];
const TestedTag = <Tag type="green">Tested</Tag>;
const NotTestedTag = <Tag type="purple">Not yet tested</Tag>;
const PartiallyTestedTag = <Tag type="blue">Partially tested</Tag>;
const ManuallyTestedTag = <Tag type="teal">Manually tested</Tag>;
const NotAvailableTag = <Tag>Not available</Tag>;

console.log(reactVersion);

return (
<div className="cds--row">
<div className="cds--col-lg-12 cds--col-no-gutter page-table__container">
<div className="cds--col-lg-12">
<p>
<strong>Latest version:</strong> {reactVersion} |{' '}
<strong>Framework</strong> React (@carbon/react)
</p>
</div>
<div
className={`${table} cds--col-lg-12 cds--col-no-gutter page-table__container`}>
<table className="page-table">
<thead>
<tr>
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -83,28 +102,38 @@ class A11yStatus extends React.Component {
});
}

console.log('hasDefaultAVT', hasDefaultAVT);

return (
<>
<tr key={`avt-tests-${componentName}`}>
<td>
<a href={componentUrl}>{componentName}</a>
</td>
<td>Default state</td>
<td>{hasDefaultAVT ? Tested : NotTested}</td>
<td>
{hasDefaultAVT
? TestedTag
: hasDefaultAVTManual
? ManuallyTestedTag
: hasDefaultAVTPartial
? PartiallyTestedTag
: NotTestedTag}
</td>
<td>
<a href={githubUrl}>Github link</a>
</td>
</tr>
<tr>
<td></td>
<td>Advanced states</td>
<td>{hasComplexAVT ? Tested : NotTested}</td>
<td>{hasComplexAVT ? TestedTag : NotTestedTag}</td>
<td></td>
</tr>
<tr>
<td></td>
<td>Keyboard states</td>
<td>{hasKeyboardNavAVT ? Tested : NotTested}</td>
<td>{hasKeyboardNavAVT ? TestedTag : NotAvailableTag}</td>
<td></td>
</tr>
<tr>
Expand Down
52 changes: 4 additions & 48 deletions src/components/A11yStatus/a11y-status.module.scss
View file
Original file line number Diff line number Diff line change
@@ -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;
}
36 changes: 31 additions & 5 deletions src/pages/components/overview/accessibility-status.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,14 @@ description:
tabs: ['Components', 'Accessibility Status']
---

import { Tag } from '@carbon/react';
import A11yStatus from 'components/A11yStatus';

<A11yStatus />

<PageDescription>

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.

</PageDescription>

Expand All @@ -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 |
| --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <Tag type="green">Tested</Tag> | When all tests pass and there are no violations when running the automated Equal Access Checker on default state, advanced states, and keyboard navigation |
| <Tag type="blue">Partially tested</Tag> | 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. |
| <Tag type="teal">Manually tested</Tag> | When screen reader tests are conducted manually and validated by a human to ensure quality |
| <Tag>Not available</Tag> | Usually, with keyboard navigation tests, when this type of test is not available for certain components |
| <Tag type="purple">Not yet tested</Tag> | 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 | <Tag type="green">Tested</Tag><br/><Tag type="purple">Not yet tested</Tag><br/><Tag type="blue">Partially tested</Tag> |
| Advanced states | Other states rather than the default state of a component. These could be interactive states of a component or its multiple variants. | <Tag type="green">Tested</Tag><br/><Tag type="purple">Not yet tested</Tag><br/><Tag type="blue">Partially tested</Tag> |
| Keyboard navigation | This test ensures every action a mouse user can do should have a keyboard equivalent. | <Tag type="green">Tested</Tag><br/><Tag>Not available</Tag><br/><Tag type="blue">Partially tested</Tag> |
| Screen reader | This test ensures that the visual information on the screen is reinforced programmatically. | <Tag type="purple">Not yet tested</Tag><br/><Tag type="teal">Manually tested</Tag><br/><Tag type="blue">Partially tested</Tag> |

## 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)
<A11yStatus />

0 comments on commit 11ce0bf

Please sign in to comment.