fix(tag): adds various fixes for screen reader accessibility; adds AAT (#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>

Author: dakahn

packages/components/src/components/tag/_tag.scss

@@ -17,6 +17,7 @@
 @mixin tags {
   .#{$prefix}--tag {
     @include type-style('label-01');
+    @include button-reset($width: false);
 
     display: inline-flex;
     align-items: center;

packages/react/src/components/Tag/Tag-story.js

@@ -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') };

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

@@ -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" />);

packages/react/src/components/Tag/Tag.js

@@ -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>
   );
 };