Skip to content

Commit

Permalink
fix(tag): adds various fixes for screen reader accessibility; adds AAT (
Browse files Browse the repository at this point in the history
#4863)

* fix(filter): add role button and update story for clarity

* fix(tag): change span to button, remove role and add button-reset helper

* fix(tag): add button-reset to tag styling

* test(tag): add Axe test

* fix(tag): remove unused aria, title, tab-index; add DAP

* test(tag): add busted unit tests for screenreader HALP

* test(tag): add aria-label test

* Update packages/react/src/components/Tag/Tag-test.js

Co-Authored-By: Josh Black <josh@josh.black>

* Update packages/react/src/components/Tag/Tag-test.js

Co-Authored-By: Josh Black <josh@josh.black>

* Update packages/react/src/components/Tag/Tag-test.js

Co-Authored-By: Josh Black <josh@josh.black>

* Update packages/react/src/components/Tag/Tag-test.js

Co-Authored-By: Josh Black <josh@josh.black>

* test(tags): add less specific check for children for aria-label

* test(tag): add <main> wrapper for DAP test element

Co-authored-by: Josh Black <josh@josh.black>
  • Loading branch information
dakahn and joshblack committed Jan 6, 2020
1 parent 21025ae commit 00786f8
Show file tree
Hide file tree
Showing 4 changed files with 45 additions and 9 deletions.
1 change: 1 addition & 0 deletions packages/components/src/components/tag/_tag.scss
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
@mixin tags {
.#{$prefix}--tag {
@include type-style('label-01');
@include button-reset($width: false);

display: inline-flex;
align-items: center;
Expand Down
2 changes: 1 addition & 1 deletion packages/react/src/components/Tag/Tag-story.js
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ const props = {
'red'
),
disabled: boolean('Disabled (disabled)', false),
title: 'Clear Selection',
title: 'Clear Filter',
}),
filter() {
return { ...this.regular(), onClick: action('onClick') };
Expand Down
33 changes: 33 additions & 0 deletions packages/react/src/components/Tag/Tag-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,43 @@ import Tag from '../Tag';
import TagSkeleton from '../Tag/Tag.Skeleton';
import { shallow } from 'enzyme';
import { settings } from 'carbon-components';
import { render, cleanup } from '@carbon/test-utils/react';

const { prefix } = settings;

describe('Tag', () => {
afterEach(cleanup);

describe('automated accessibility testing', () => {
it('should have no Axe violations', async () => {
const { container } = render(<Tag>This is not a tag</Tag>);
await expect(container).toHaveNoAxeViolations();
});

it('should have no DAP violations', async () => {
const { container } = render(
<main>
<Tag>This is not a tag</Tag>
</main>
);
await expect(container).toHaveNoDAPViolations('Tag');
});
});

describe('with a screenreader', () => {
it('filtered variant should have appropriate aria-label', () => {
const children = 'tag content';
const { container } = render(<Tag filter>{children}</Tag>);
const button = container.querySelector('[aria-label], [aria-labelledby]');
const accessibilityLabel =
button.getAttribute('aria-label') ||
button.getAttribute('aria-labelledby');
// This check would mirror our "Accessibility label must contain at least all of visible label"
// requirement
expect(accessibilityLabel).toEqual(expect.stringContaining(children));
});
});

describe('Renders as expected', () => {
it('should render with the appropriate type', () => {
const tag = shallow(<Tag type="beta" />);
Expand Down
18 changes: 10 additions & 8 deletions packages/react/src/components/Tag/Tag.js
Original file line number Diff line number Diff line change
Expand Up @@ -41,19 +41,21 @@ const Tag = ({
[`${prefix}--tag--filter`]: filter,
});
return filter ? (
<span
role="button"
<button
className={tagClasses}
title={title || 'Clear filter'}
tabIndex="0" // eslint-disable-line jsx-a11y/no-noninteractive-tabindex
aria-label={
title !== undefined
? `${title} ${children}`
: `Clear filter ${children}`
}
{...other}>
{children !== null && children !== undefined ? children : TYPES[type]}
<Close16 aria-label={title || 'Clear filter'} />
</span>
<Close16 />
</button>
) : (
<span className={tagClasses} {...other}>
<button className={tagClasses} {...other}>
{children !== null && children !== undefined ? children : TYPES[type]}
</span>
</button>
);
};

Expand Down

0 comments on commit 00786f8

Please sign in to comment.