From 3bdb91adf9cbb90bb294275829d5bb5ee1fe40d2 Mon Sep 17 00:00:00 2001
From: dakahn <dakahn@protonmail.com>
Date: Thu, 5 Dec 2019 11:36:19 -0600
Subject: [PATCH 01/13] fix(filter): add role button and update story for
 clarity

---
 packages/react/src/components/Tag/Tag-story.js | 2 +-
 packages/react/src/components/Tag/Tag.js       | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/components/Tag/Tag-story.js b/packages/react/src/components/Tag/Tag-story.js
index be94ef51a9f3..1b9ddcf8971a 100644
--- a/packages/react/src/components/Tag/Tag-story.js
+++ b/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') };
diff --git a/packages/react/src/components/Tag/Tag.js b/packages/react/src/components/Tag/Tag.js
index a13c40faea37..39dfe0676ef5 100644
--- a/packages/react/src/components/Tag/Tag.js
+++ b/packages/react/src/components/Tag/Tag.js
@@ -43,6 +43,7 @@ const Tag = ({
   return filter ? (
     <span
       className={tagClasses}
+      role="button"
       title={title || 'Clear filter'}
       tabIndex="0" // eslint-disable-line jsx-a11y/no-noninteractive-tabindex
       {...other}>

From 49a2e0dc88c77fce0807872205190aec0511c38c Mon Sep 17 00:00:00 2001
From: "D.A. Kahn" <dakahn@protonmail.com>
Date: Mon, 9 Dec 2019 17:49:08 -0600
Subject: [PATCH 02/13] fix(tag): change span to button, remove role and add
 button-reset helper

---
 packages/react/src/components/Tag/Tag.js | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/react/src/components/Tag/Tag.js b/packages/react/src/components/Tag/Tag.js
index 39dfe0676ef5..2f935285c742 100644
--- a/packages/react/src/components/Tag/Tag.js
+++ b/packages/react/src/components/Tag/Tag.js
@@ -41,19 +41,18 @@ const Tag = ({
     [`${prefix}--tag--filter`]: filter,
   });
   return filter ? (
-    <span
+    <button
       className={tagClasses}
-      role="button"
       title={title || 'Clear filter'}
       tabIndex="0" // eslint-disable-line jsx-a11y/no-noninteractive-tabindex
       {...other}>
       {children !== null && children !== undefined ? children : TYPES[type]}
       <Close16 aria-label={title || 'Clear filter'} />
-    </span>
+    </button>
   ) : (
-    <span className={tagClasses} {...other}>
+    <button className={tagClasses} {...other}>
       {children !== null && children !== undefined ? children : TYPES[type]}
-    </span>
+    </button>
   );
 };
 

From 5ad6d504ce18a7e26b0bdcdbac1d00de0fe9172b Mon Sep 17 00:00:00 2001
From: "D.A. Kahn" <dakahn@protonmail.com>
Date: Mon, 9 Dec 2019 17:53:36 -0600
Subject: [PATCH 03/13] fix(tag): add button-reset to tag styling

---
 packages/components/src/components/tag/_tag.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components/src/components/tag/_tag.scss b/packages/components/src/components/tag/_tag.scss
index b6c19da5843d..eba5e4ecc693 100644
--- a/packages/components/src/components/tag/_tag.scss
+++ b/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;
     padding: 0 $carbon--spacing-03;

From 180be7ff2dfd5fb3f6cfffc1210826d42d7a2fd4 Mon Sep 17 00:00:00 2001
From: "D.A. Kahn" <dakahn@protonmail.com>
Date: Tue, 10 Dec 2019 12:10:59 -0600
Subject: [PATCH 04/13] test(tag): add Axe test

---
 packages/react/src/components/Tag/Tag-test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/components/Tag/Tag-test.js b/packages/react/src/components/Tag/Tag-test.js
index 48fbd294f0f2..8db34cc6262f 100644
--- a/packages/react/src/components/Tag/Tag-test.js
+++ b/packages/react/src/components/Tag/Tag-test.js
@@ -20,7 +20,7 @@ describe('Tag', () => {
 
   describe('automated accessibility testing', () => {
     it('should have no Axe violations', async () => {
-      const { container } = render(<Tag />);
+      const { container } = render(<Tag>This is not a tag</Tag>);
       await expect(container).toHaveNoAxeViolations();
     });
   });

From ba059f0b66ad742b8daa52975a9d0062e47a0e99 Mon Sep 17 00:00:00 2001
From: "D.A. Kahn" <dakahn@protonmail.com>
Date: Tue, 10 Dec 2019 15:55:46 -0600
Subject: [PATCH 05/13] fix(tag): remove unused aria, title, tab-index; add DAP

---
 packages/react/src/components/Tag/Tag-test.js | 9 +++++++++
 packages/react/src/components/Tag/Tag.js      | 5 ++---
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/components/Tag/Tag-test.js b/packages/react/src/components/Tag/Tag-test.js
index 8db34cc6262f..fc1fe3289fa9 100644
--- a/packages/react/src/components/Tag/Tag-test.js
+++ b/packages/react/src/components/Tag/Tag-test.js
@@ -23,6 +23,15 @@ describe('Tag', () => {
       const { container } = render(<Tag>This is not a tag</Tag>);
       await expect(container).toHaveNoAxeViolations();
     });
+
+    it('should have no DAP violations', async () => {
+      const { container } = render(<Tag>This is not a tag</Tag>);
+      await expect(container).toHaveNoDAPViolations('Tag');
+    });
+  });
+
+  describe('with a screenreader', () => {
+    afterEach(cleanup);
   });
 
   describe('Renders as expected', () => {
diff --git a/packages/react/src/components/Tag/Tag.js b/packages/react/src/components/Tag/Tag.js
index 2f935285c742..fcf14e04caa0 100644
--- a/packages/react/src/components/Tag/Tag.js
+++ b/packages/react/src/components/Tag/Tag.js
@@ -43,11 +43,10 @@ const Tag = ({
   return filter ? (
     <button
       className={tagClasses}
-      title={title || 'Clear filter'}
-      tabIndex="0" // eslint-disable-line jsx-a11y/no-noninteractive-tabindex
+      aria-label={`${title} ${children}` || `Clear filter ${children}`}
       {...other}>
       {children !== null && children !== undefined ? children : TYPES[type]}
-      <Close16 aria-label={title || 'Clear filter'} />
+      <Close16 />
     </button>
   ) : (
     <button className={tagClasses} {...other}>

From 1c7d3b0b0b13c0a8cf99018c8e95080f1d71e0c2 Mon Sep 17 00:00:00 2001
From: "D.A. Kahn" <dakahn@protonmail.com>
Date: Tue, 10 Dec 2019 18:38:35 -0600
Subject: [PATCH 06/13] test(tag): add busted unit tests for screenreader HALP

---
 packages/react/src/components/Tag/Tag-test.js | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/packages/react/src/components/Tag/Tag-test.js b/packages/react/src/components/Tag/Tag-test.js
index fc1fe3289fa9..0b9b40cdc246 100644
--- a/packages/react/src/components/Tag/Tag-test.js
+++ b/packages/react/src/components/Tag/Tag-test.js
@@ -32,6 +32,19 @@ describe('Tag', () => {
 
   describe('with a screenreader', () => {
     afterEach(cleanup);
+
+    it('should have an aria-label', () => {
+      const { container } = render(
+        <Tag data-id="aliens">This is not a tag</Tag>
+      );
+      const button = container.querySelector('[aria-label]');
+      expect(button).toBeInstanceOf(HTMLElement);
+
+      const ariaLabel = button.getAttribute('aria-label');
+      expect(ariaLabel).toBeDefined();
+
+      expect(ariaLabel).toEqual('Clear Filter This is not a tag');
+    });
   });
 
   describe('Renders as expected', () => {

From 846bd210fe576eaf542df4f1a287e8ae09ce7059 Mon Sep 17 00:00:00 2001
From: "D.A. Kahn" <dakahn@protonmail.com>
Date: Wed, 11 Dec 2019 16:23:51 -0600
Subject: [PATCH 07/13] test(tag): add aria-label test

---
 packages/react/src/components/Tag/Tag-test.js | 9 ++++-----
 packages/react/src/components/Tag/Tag.js      | 6 +++++-
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/packages/react/src/components/Tag/Tag-test.js b/packages/react/src/components/Tag/Tag-test.js
index 0b9b40cdc246..ddc99c699c48 100644
--- a/packages/react/src/components/Tag/Tag-test.js
+++ b/packages/react/src/components/Tag/Tag-test.js
@@ -33,17 +33,16 @@ describe('Tag', () => {
   describe('with a screenreader', () => {
     afterEach(cleanup);
 
-    it('should have an aria-label', () => {
-      const { container } = render(
-        <Tag data-id="aliens">This is not a tag</Tag>
-      );
+    it('filtered variant should have appropriate aria-label', () => {
+      const { container } = render(<Tag filter>This is not a tag</Tag>);
+
       const button = container.querySelector('[aria-label]');
       expect(button).toBeInstanceOf(HTMLElement);
 
       const ariaLabel = button.getAttribute('aria-label');
       expect(ariaLabel).toBeDefined();
 
-      expect(ariaLabel).toEqual('Clear Filter This is not a tag');
+      expect(ariaLabel).toEqual('Clear filter This is not a tag');
     });
   });
 
diff --git a/packages/react/src/components/Tag/Tag.js b/packages/react/src/components/Tag/Tag.js
index fcf14e04caa0..58f9f479b49c 100644
--- a/packages/react/src/components/Tag/Tag.js
+++ b/packages/react/src/components/Tag/Tag.js
@@ -43,7 +43,11 @@ const Tag = ({
   return filter ? (
     <button
       className={tagClasses}
-      aria-label={`${title} ${children}` || `Clear filter ${children}`}
+      aria-label={
+        title !== undefined
+          ? `${title} ${children}`
+          : `Clear filter ${children}`
+      }
       {...other}>
       {children !== null && children !== undefined ? children : TYPES[type]}
       <Close16 />

From fc275f62a3ad071af0e33316a519f3f225c43fd1 Mon Sep 17 00:00:00 2001
From: DAK <40970507+dakahn@users.noreply.github.com>
Date: Thu, 12 Dec 2019 00:08:02 -0600
Subject: [PATCH 08/13] Update packages/react/src/components/Tag/Tag-test.js

Co-Authored-By: Josh Black <josh@josh.black>
---
 packages/react/src/components/Tag/Tag-test.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/react/src/components/Tag/Tag-test.js b/packages/react/src/components/Tag/Tag-test.js
index ddc99c699c48..c03ef5606bd6 100644
--- a/packages/react/src/components/Tag/Tag-test.js
+++ b/packages/react/src/components/Tag/Tag-test.js
@@ -11,7 +11,6 @@ import TagSkeleton from '../Tag/Tag.Skeleton';
 import { shallow } from 'enzyme';
 import { settings } from 'carbon-components';
 import { render, cleanup } from '@carbon/test-utils/react';
-import { afterEach } from 'jest-circus';
 
 const { prefix } = settings;
 

From 6beb042d69db7e81b8b9db2e6e33e646be5244be Mon Sep 17 00:00:00 2001
From: DAK <40970507+dakahn@users.noreply.github.com>
Date: Thu, 12 Dec 2019 00:08:09 -0600
Subject: [PATCH 09/13] Update packages/react/src/components/Tag/Tag-test.js

Co-Authored-By: Josh Black <josh@josh.black>
---
 packages/react/src/components/Tag/Tag-test.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/react/src/components/Tag/Tag-test.js b/packages/react/src/components/Tag/Tag-test.js
index c03ef5606bd6..32c418715fc8 100644
--- a/packages/react/src/components/Tag/Tag-test.js
+++ b/packages/react/src/components/Tag/Tag-test.js
@@ -30,7 +30,6 @@ describe('Tag', () => {
   });
 
   describe('with a screenreader', () => {
-    afterEach(cleanup);
 
     it('filtered variant should have appropriate aria-label', () => {
       const { container } = render(<Tag filter>This is not a tag</Tag>);

From 3f41457fe3f6da73f9d8f49002b1c0bb9438b0be Mon Sep 17 00:00:00 2001
From: DAK <40970507+dakahn@users.noreply.github.com>
Date: Thu, 12 Dec 2019 15:11:21 -0600
Subject: [PATCH 10/13] Update packages/react/src/components/Tag/Tag-test.js

Co-Authored-By: Josh Black <josh@josh.black>
---
 packages/react/src/components/Tag/Tag-test.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/react/src/components/Tag/Tag-test.js b/packages/react/src/components/Tag/Tag-test.js
index 32c418715fc8..980987622dac 100644
--- a/packages/react/src/components/Tag/Tag-test.js
+++ b/packages/react/src/components/Tag/Tag-test.js
@@ -30,7 +30,6 @@ describe('Tag', () => {
   });
 
   describe('with a screenreader', () => {
-
     it('filtered variant should have appropriate aria-label', () => {
       const { container } = render(<Tag filter>This is not a tag</Tag>);
 

From eaebfd0bd421067ef038aa9e46f97905f244d087 Mon Sep 17 00:00:00 2001
From: DAK <40970507+dakahn@users.noreply.github.com>
Date: Tue, 17 Dec 2019 13:13:46 -0600
Subject: [PATCH 11/13] Update packages/react/src/components/Tag/Tag-test.js

Co-Authored-By: Josh Black <josh@josh.black>
---
 packages/react/src/components/Tag/Tag-test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/components/Tag/Tag-test.js b/packages/react/src/components/Tag/Tag-test.js
index 980987622dac..b4762ea7fef0 100644
--- a/packages/react/src/components/Tag/Tag-test.js
+++ b/packages/react/src/components/Tag/Tag-test.js
@@ -30,7 +30,7 @@ describe('Tag', () => {
   });
 
   describe('with a screenreader', () => {
-    it('filtered variant should have appropriate aria-label', () => {
+    it('should have an accessible label when used as a filter', () => {
       const { container } = render(<Tag filter>This is not a tag</Tag>);
 
       const button = container.querySelector('[aria-label]');

From cf69e2ffe151960395e920c740d53eb164e6ec6a Mon Sep 17 00:00:00 2001
From: dakahn <dakahn@protonmail.com>
Date: Tue, 17 Dec 2019 13:43:29 -0600
Subject: [PATCH 12/13] test(tags): add less specific check for children for
 aria-label

---
 packages/react/src/components/Tag/Tag-test.js | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/packages/react/src/components/Tag/Tag-test.js b/packages/react/src/components/Tag/Tag-test.js
index 980987622dac..09befc546561 100644
--- a/packages/react/src/components/Tag/Tag-test.js
+++ b/packages/react/src/components/Tag/Tag-test.js
@@ -31,15 +31,16 @@ describe('Tag', () => {
 
   describe('with a screenreader', () => {
     it('filtered variant should have appropriate aria-label', () => {
-      const { container } = render(<Tag filter>This is not a tag</Tag>);
+      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');
 
-      const button = container.querySelector('[aria-label]');
-      expect(button).toBeInstanceOf(HTMLElement);
-
-      const ariaLabel = button.getAttribute('aria-label');
-      expect(ariaLabel).toBeDefined();
-
-      expect(ariaLabel).toEqual('Clear filter This is not a tag');
+      // This check would mirror our "Accessibility label must contain at least all of visible label"
+      // requirement
+      expect(accessibilityLabel).toEqual(expect.stringContaining(children));
     });
   });
 

From 582848eb344ee6d7c5c9c52bab2f8df34cc0c483 Mon Sep 17 00:00:00 2001
From: "D.A. Kahn" <dakahn@protonmail.com>
Date: Wed, 18 Dec 2019 14:09:20 -0600
Subject: [PATCH 13/13] test(tag): add <main> wrapper for DAP test element

---
 packages/react/src/components/Tag/Tag-test.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/components/Tag/Tag-test.js b/packages/react/src/components/Tag/Tag-test.js
index 06664c2d36f6..bc899d9f194e 100644
--- a/packages/react/src/components/Tag/Tag-test.js
+++ b/packages/react/src/components/Tag/Tag-test.js
@@ -24,7 +24,11 @@ describe('Tag', () => {
     });
 
     it('should have no DAP violations', async () => {
-      const { container } = render(<Tag>This is not a tag</Tag>);
+      const { container } = render(
+        <main>
+          <Tag>This is not a tag</Tag>
+        </main>
+      );
       await expect(container).toHaveNoDAPViolations('Tag');
     });
   });