From 8d708a43023eb274df419544482c1e5a2714209f Mon Sep 17 00:00:00 2001
From: LarryMatte <matte.larry@gmail.com>
Date: Tue, 4 Jun 2024 15:47:03 -0400
Subject: [PATCH] fix(tag): fix a11y et arialabel (#883)

* fix(tag): fix a11y et arialabel

* fix(tag): fix translation
---
 .../src/components/tag/tag.test.tsx.snap      | 180 ++++++++----------
 packages/react/src/components/tag/tag.tsx     |   5 +-
 packages/react/src/i18n/translations.ts       |   4 +-
 3 files changed, 88 insertions(+), 101 deletions(-)

diff --git a/packages/react/src/components/tag/tag.test.tsx.snap b/packages/react/src/components/tag/tag.test.tsx.snap
index 0d82708e14..0c2f0b5960 100644
--- a/packages/react/src/components/tag/tag.test.tsx.snap
+++ b/packages/react/src/components/tag/tag.test.tsx.snap
@@ -153,7 +153,7 @@ exports[`Tag Tag size=medium color=decorative-01 matches snapshot (desktop remov
   width: 1rem;
 }
 
-<span
+<div
   class="c0 c1"
 >
   <span
@@ -162,8 +162,7 @@ exports[`Tag Tag size=medium color=decorative-01 matches snapshot (desktop remov
     Test
   </span>
   <button
-    aria-hidden="true"
-    aria-label="deleteButtonAriaLabel"
+    aria-label="Remove tag Test"
     class="c3 c4 c5"
     data-testid="Test-remove-button"
     type="button"
@@ -176,7 +175,7 @@ exports[`Tag Tag size=medium color=decorative-01 matches snapshot (desktop remov
       width="16"
     />
   </button>
-</span>
+</div>
 `;
 
 exports[`Tag Tag size=medium color=decorative-01 matches snapshot (desktop with icons) 1`] = `
@@ -218,7 +217,7 @@ exports[`Tag Tag size=medium color=decorative-01 matches snapshot (desktop with
   width: var(--size-1x);
 }
 
-<span
+<div
   class="c0 c1"
 >
   <svg
@@ -237,7 +236,7 @@ exports[`Tag Tag size=medium color=decorative-01 matches snapshot (desktop with
   >
     Test
   </span>
-</span>
+</div>
 `;
 
 exports[`Tag Tag size=medium color=decorative-01 matches snapshot (desktop) 1`] = `
@@ -271,7 +270,7 @@ exports[`Tag Tag size=medium color=decorative-01 matches snapshot (desktop) 1`]
   white-space: nowrap;
 }
 
-<span
+<div
   class="c0 c1"
 >
   <span
@@ -279,7 +278,7 @@ exports[`Tag Tag size=medium color=decorative-01 matches snapshot (desktop) 1`]
   >
     Test
   </span>
-</span>
+</div>
 `;
 
 exports[`Tag Tag size=medium color=decorative-01 matches snapshot (mobile removable) 1`] = `
@@ -435,7 +434,7 @@ exports[`Tag Tag size=medium color=decorative-01 matches snapshot (mobile remova
   width: 1rem;
 }
 
-<span
+<div
   class="c0 c1"
 >
   <span
@@ -444,8 +443,7 @@ exports[`Tag Tag size=medium color=decorative-01 matches snapshot (mobile remova
     Test
   </span>
   <button
-    aria-hidden="true"
-    aria-label="deleteButtonAriaLabel"
+    aria-label="Remove tag Test"
     class="c3 c4 c5"
     data-testid="Test-remove-button"
     type="button"
@@ -458,7 +456,7 @@ exports[`Tag Tag size=medium color=decorative-01 matches snapshot (mobile remova
       width="24"
     />
   </button>
-</span>
+</div>
 `;
 
 exports[`Tag Tag size=medium color=decorative-01 matches snapshot (mobile with icons) 1`] = `
@@ -500,7 +498,7 @@ exports[`Tag Tag size=medium color=decorative-01 matches snapshot (mobile with i
   width: var(--size-1x);
 }
 
-<span
+<div
   class="c0 c1"
 >
   <svg
@@ -519,7 +517,7 @@ exports[`Tag Tag size=medium color=decorative-01 matches snapshot (mobile with i
   >
     Test
   </span>
-</span>
+</div>
 `;
 
 exports[`Tag Tag size=medium color=decorative-01 matches snapshot (mobile) 1`] = `
@@ -553,7 +551,7 @@ exports[`Tag Tag size=medium color=decorative-01 matches snapshot (mobile) 1`] =
   white-space: nowrap;
 }
 
-<span
+<div
   class="c0 c1"
 >
   <span
@@ -561,7 +559,7 @@ exports[`Tag Tag size=medium color=decorative-01 matches snapshot (mobile) 1`] =
   >
     Test
   </span>
-</span>
+</div>
 `;
 
 exports[`Tag Tag size=medium color=decorative-02 matches snapshot (desktop removable) 1`] = `
@@ -717,7 +715,7 @@ exports[`Tag Tag size=medium color=decorative-02 matches snapshot (desktop remov
   width: 1rem;
 }
 
-<span
+<div
   class="c0 c1"
 >
   <span
@@ -726,8 +724,7 @@ exports[`Tag Tag size=medium color=decorative-02 matches snapshot (desktop remov
     Test
   </span>
   <button
-    aria-hidden="true"
-    aria-label="deleteButtonAriaLabel"
+    aria-label="Remove tag Test"
     class="c3 c4 c5"
     data-testid="Test-remove-button"
     type="button"
@@ -740,7 +737,7 @@ exports[`Tag Tag size=medium color=decorative-02 matches snapshot (desktop remov
       width="16"
     />
   </button>
-</span>
+</div>
 `;
 
 exports[`Tag Tag size=medium color=decorative-02 matches snapshot (desktop with icons) 1`] = `
@@ -782,7 +779,7 @@ exports[`Tag Tag size=medium color=decorative-02 matches snapshot (desktop with
   width: var(--size-1x);
 }
 
-<span
+<div
   class="c0 c1"
 >
   <svg
@@ -801,7 +798,7 @@ exports[`Tag Tag size=medium color=decorative-02 matches snapshot (desktop with
   >
     Test
   </span>
-</span>
+</div>
 `;
 
 exports[`Tag Tag size=medium color=decorative-02 matches snapshot (desktop) 1`] = `
@@ -835,7 +832,7 @@ exports[`Tag Tag size=medium color=decorative-02 matches snapshot (desktop) 1`]
   white-space: nowrap;
 }
 
-<span
+<div
   class="c0 c1"
 >
   <span
@@ -843,7 +840,7 @@ exports[`Tag Tag size=medium color=decorative-02 matches snapshot (desktop) 1`]
   >
     Test
   </span>
-</span>
+</div>
 `;
 
 exports[`Tag Tag size=medium color=decorative-02 matches snapshot (mobile removable) 1`] = `
@@ -999,7 +996,7 @@ exports[`Tag Tag size=medium color=decorative-02 matches snapshot (mobile remova
   width: 1rem;
 }
 
-<span
+<div
   class="c0 c1"
 >
   <span
@@ -1008,8 +1005,7 @@ exports[`Tag Tag size=medium color=decorative-02 matches snapshot (mobile remova
     Test
   </span>
   <button
-    aria-hidden="true"
-    aria-label="deleteButtonAriaLabel"
+    aria-label="Remove tag Test"
     class="c3 c4 c5"
     data-testid="Test-remove-button"
     type="button"
@@ -1022,7 +1018,7 @@ exports[`Tag Tag size=medium color=decorative-02 matches snapshot (mobile remova
       width="24"
     />
   </button>
-</span>
+</div>
 `;
 
 exports[`Tag Tag size=medium color=decorative-02 matches snapshot (mobile with icons) 1`] = `
@@ -1064,7 +1060,7 @@ exports[`Tag Tag size=medium color=decorative-02 matches snapshot (mobile with i
   width: var(--size-1x);
 }
 
-<span
+<div
   class="c0 c1"
 >
   <svg
@@ -1083,7 +1079,7 @@ exports[`Tag Tag size=medium color=decorative-02 matches snapshot (mobile with i
   >
     Test
   </span>
-</span>
+</div>
 `;
 
 exports[`Tag Tag size=medium color=decorative-02 matches snapshot (mobile) 1`] = `
@@ -1117,7 +1113,7 @@ exports[`Tag Tag size=medium color=decorative-02 matches snapshot (mobile) 1`] =
   white-space: nowrap;
 }
 
-<span
+<div
   class="c0 c1"
 >
   <span
@@ -1125,7 +1121,7 @@ exports[`Tag Tag size=medium color=decorative-02 matches snapshot (mobile) 1`] =
   >
     Test
   </span>
-</span>
+</div>
 `;
 
 exports[`Tag Tag size=medium color=default matches snapshot (desktop removable) 1`] = `
@@ -1281,7 +1277,7 @@ exports[`Tag Tag size=medium color=default matches snapshot (desktop removable)
   width: 1rem;
 }
 
-<span
+<div
   class="c0 c1"
 >
   <span
@@ -1290,8 +1286,7 @@ exports[`Tag Tag size=medium color=default matches snapshot (desktop removable)
     Test
   </span>
   <button
-    aria-hidden="true"
-    aria-label="deleteButtonAriaLabel"
+    aria-label="Remove tag Test"
     class="c3 c4 c5"
     data-testid="Test-remove-button"
     type="button"
@@ -1304,7 +1299,7 @@ exports[`Tag Tag size=medium color=default matches snapshot (desktop removable)
       width="16"
     />
   </button>
-</span>
+</div>
 `;
 
 exports[`Tag Tag size=medium color=default matches snapshot (desktop with icons) 1`] = `
@@ -1346,7 +1341,7 @@ exports[`Tag Tag size=medium color=default matches snapshot (desktop with icons)
   width: var(--size-1x);
 }
 
-<span
+<div
   class="c0 c1"
 >
   <svg
@@ -1365,7 +1360,7 @@ exports[`Tag Tag size=medium color=default matches snapshot (desktop with icons)
   >
     Test
   </span>
-</span>
+</div>
 `;
 
 exports[`Tag Tag size=medium color=default matches snapshot (desktop) 1`] = `
@@ -1399,7 +1394,7 @@ exports[`Tag Tag size=medium color=default matches snapshot (desktop) 1`] = `
   white-space: nowrap;
 }
 
-<span
+<div
   class="c0 c1"
 >
   <span
@@ -1407,7 +1402,7 @@ exports[`Tag Tag size=medium color=default matches snapshot (desktop) 1`] = `
   >
     Test
   </span>
-</span>
+</div>
 `;
 
 exports[`Tag Tag size=medium color=default matches snapshot (mobile removable) 1`] = `
@@ -1563,7 +1558,7 @@ exports[`Tag Tag size=medium color=default matches snapshot (mobile removable) 1
   width: 1rem;
 }
 
-<span
+<div
   class="c0 c1"
 >
   <span
@@ -1572,8 +1567,7 @@ exports[`Tag Tag size=medium color=default matches snapshot (mobile removable) 1
     Test
   </span>
   <button
-    aria-hidden="true"
-    aria-label="deleteButtonAriaLabel"
+    aria-label="Remove tag Test"
     class="c3 c4 c5"
     data-testid="Test-remove-button"
     type="button"
@@ -1586,7 +1580,7 @@ exports[`Tag Tag size=medium color=default matches snapshot (mobile removable) 1
       width="24"
     />
   </button>
-</span>
+</div>
 `;
 
 exports[`Tag Tag size=medium color=default matches snapshot (mobile with icons) 1`] = `
@@ -1628,7 +1622,7 @@ exports[`Tag Tag size=medium color=default matches snapshot (mobile with icons)
   width: var(--size-1x);
 }
 
-<span
+<div
   class="c0 c1"
 >
   <svg
@@ -1647,7 +1641,7 @@ exports[`Tag Tag size=medium color=default matches snapshot (mobile with icons)
   >
     Test
   </span>
-</span>
+</div>
 `;
 
 exports[`Tag Tag size=medium color=default matches snapshot (mobile) 1`] = `
@@ -1681,7 +1675,7 @@ exports[`Tag Tag size=medium color=default matches snapshot (mobile) 1`] = `
   white-space: nowrap;
 }
 
-<span
+<div
   class="c0 c1"
 >
   <span
@@ -1689,7 +1683,7 @@ exports[`Tag Tag size=medium color=default matches snapshot (mobile) 1`] = `
   >
     Test
   </span>
-</span>
+</div>
 `;
 
 exports[`Tag Tag size=small color=decorative-01 matches snapshot (desktop removable) 1`] = `
@@ -1846,7 +1840,7 @@ exports[`Tag Tag size=small color=decorative-01 matches snapshot (desktop remova
   width: 1rem;
 }
 
-<span
+<div
   class="c0 c1"
 >
   <span
@@ -1855,8 +1849,7 @@ exports[`Tag Tag size=small color=decorative-01 matches snapshot (desktop remova
     Test
   </span>
   <button
-    aria-hidden="true"
-    aria-label="deleteButtonAriaLabel"
+    aria-label="Remove tag Test"
     class="c3 c4 c5"
     data-testid="Test-remove-button"
     type="button"
@@ -1869,7 +1862,7 @@ exports[`Tag Tag size=small color=decorative-01 matches snapshot (desktop remova
       width="16"
     />
   </button>
-</span>
+</div>
 `;
 
 exports[`Tag Tag size=small color=decorative-01 matches snapshot (desktop with icons) 1`] = `
@@ -1911,7 +1904,7 @@ exports[`Tag Tag size=small color=decorative-01 matches snapshot (desktop with i
   width: var(--size-1x);
 }
 
-<span
+<div
   class="c0 c1"
 >
   <svg
@@ -1930,7 +1923,7 @@ exports[`Tag Tag size=small color=decorative-01 matches snapshot (desktop with i
   >
     Test
   </span>
-</span>
+</div>
 `;
 
 exports[`Tag Tag size=small color=decorative-01 matches snapshot (desktop) 1`] = `
@@ -1964,7 +1957,7 @@ exports[`Tag Tag size=small color=decorative-01 matches snapshot (desktop) 1`] =
   white-space: nowrap;
 }
 
-<span
+<div
   class="c0 c1"
 >
   <span
@@ -1972,7 +1965,7 @@ exports[`Tag Tag size=small color=decorative-01 matches snapshot (desktop) 1`] =
   >
     Test
   </span>
-</span>
+</div>
 `;
 
 exports[`Tag Tag size=small color=decorative-01 matches snapshot (mobile removable) 1`] = `
@@ -2128,7 +2121,7 @@ exports[`Tag Tag size=small color=decorative-01 matches snapshot (mobile removab
   width: 1rem;
 }
 
-<span
+<div
   class="c0 c1"
 >
   <span
@@ -2137,8 +2130,7 @@ exports[`Tag Tag size=small color=decorative-01 matches snapshot (mobile removab
     Test
   </span>
   <button
-    aria-hidden="true"
-    aria-label="deleteButtonAriaLabel"
+    aria-label="Remove tag Test"
     class="c3 c4 c5"
     data-testid="Test-remove-button"
     type="button"
@@ -2151,7 +2143,7 @@ exports[`Tag Tag size=small color=decorative-01 matches snapshot (mobile removab
       width="24"
     />
   </button>
-</span>
+</div>
 `;
 
 exports[`Tag Tag size=small color=decorative-01 matches snapshot (mobile with icons) 1`] = `
@@ -2193,7 +2185,7 @@ exports[`Tag Tag size=small color=decorative-01 matches snapshot (mobile with ic
   width: var(--size-1x);
 }
 
-<span
+<div
   class="c0 c1"
 >
   <svg
@@ -2212,7 +2204,7 @@ exports[`Tag Tag size=small color=decorative-01 matches snapshot (mobile with ic
   >
     Test
   </span>
-</span>
+</div>
 `;
 
 exports[`Tag Tag size=small color=decorative-01 matches snapshot (mobile) 1`] = `
@@ -2246,7 +2238,7 @@ exports[`Tag Tag size=small color=decorative-01 matches snapshot (mobile) 1`] =
   white-space: nowrap;
 }
 
-<span
+<div
   class="c0 c1"
 >
   <span
@@ -2254,7 +2246,7 @@ exports[`Tag Tag size=small color=decorative-01 matches snapshot (mobile) 1`] =
   >
     Test
   </span>
-</span>
+</div>
 `;
 
 exports[`Tag Tag size=small color=decorative-02 matches snapshot (desktop removable) 1`] = `
@@ -2411,7 +2403,7 @@ exports[`Tag Tag size=small color=decorative-02 matches snapshot (desktop remova
   width: 1rem;
 }
 
-<span
+<div
   class="c0 c1"
 >
   <span
@@ -2420,8 +2412,7 @@ exports[`Tag Tag size=small color=decorative-02 matches snapshot (desktop remova
     Test
   </span>
   <button
-    aria-hidden="true"
-    aria-label="deleteButtonAriaLabel"
+    aria-label="Remove tag Test"
     class="c3 c4 c5"
     data-testid="Test-remove-button"
     type="button"
@@ -2434,7 +2425,7 @@ exports[`Tag Tag size=small color=decorative-02 matches snapshot (desktop remova
       width="16"
     />
   </button>
-</span>
+</div>
 `;
 
 exports[`Tag Tag size=small color=decorative-02 matches snapshot (desktop with icons) 1`] = `
@@ -2476,7 +2467,7 @@ exports[`Tag Tag size=small color=decorative-02 matches snapshot (desktop with i
   width: var(--size-1x);
 }
 
-<span
+<div
   class="c0 c1"
 >
   <svg
@@ -2495,7 +2486,7 @@ exports[`Tag Tag size=small color=decorative-02 matches snapshot (desktop with i
   >
     Test
   </span>
-</span>
+</div>
 `;
 
 exports[`Tag Tag size=small color=decorative-02 matches snapshot (desktop) 1`] = `
@@ -2529,7 +2520,7 @@ exports[`Tag Tag size=small color=decorative-02 matches snapshot (desktop) 1`] =
   white-space: nowrap;
 }
 
-<span
+<div
   class="c0 c1"
 >
   <span
@@ -2537,7 +2528,7 @@ exports[`Tag Tag size=small color=decorative-02 matches snapshot (desktop) 1`] =
   >
     Test
   </span>
-</span>
+</div>
 `;
 
 exports[`Tag Tag size=small color=decorative-02 matches snapshot (mobile removable) 1`] = `
@@ -2693,7 +2684,7 @@ exports[`Tag Tag size=small color=decorative-02 matches snapshot (mobile removab
   width: 1rem;
 }
 
-<span
+<div
   class="c0 c1"
 >
   <span
@@ -2702,8 +2693,7 @@ exports[`Tag Tag size=small color=decorative-02 matches snapshot (mobile removab
     Test
   </span>
   <button
-    aria-hidden="true"
-    aria-label="deleteButtonAriaLabel"
+    aria-label="Remove tag Test"
     class="c3 c4 c5"
     data-testid="Test-remove-button"
     type="button"
@@ -2716,7 +2706,7 @@ exports[`Tag Tag size=small color=decorative-02 matches snapshot (mobile removab
       width="24"
     />
   </button>
-</span>
+</div>
 `;
 
 exports[`Tag Tag size=small color=decorative-02 matches snapshot (mobile with icons) 1`] = `
@@ -2758,7 +2748,7 @@ exports[`Tag Tag size=small color=decorative-02 matches snapshot (mobile with ic
   width: var(--size-1x);
 }
 
-<span
+<div
   class="c0 c1"
 >
   <svg
@@ -2777,7 +2767,7 @@ exports[`Tag Tag size=small color=decorative-02 matches snapshot (mobile with ic
   >
     Test
   </span>
-</span>
+</div>
 `;
 
 exports[`Tag Tag size=small color=decorative-02 matches snapshot (mobile) 1`] = `
@@ -2811,7 +2801,7 @@ exports[`Tag Tag size=small color=decorative-02 matches snapshot (mobile) 1`] =
   white-space: nowrap;
 }
 
-<span
+<div
   class="c0 c1"
 >
   <span
@@ -2819,7 +2809,7 @@ exports[`Tag Tag size=small color=decorative-02 matches snapshot (mobile) 1`] =
   >
     Test
   </span>
-</span>
+</div>
 `;
 
 exports[`Tag Tag size=small color=default matches snapshot (desktop removable) 1`] = `
@@ -2976,7 +2966,7 @@ exports[`Tag Tag size=small color=default matches snapshot (desktop removable) 1
   width: 1rem;
 }
 
-<span
+<div
   class="c0 c1"
 >
   <span
@@ -2985,8 +2975,7 @@ exports[`Tag Tag size=small color=default matches snapshot (desktop removable) 1
     Test
   </span>
   <button
-    aria-hidden="true"
-    aria-label="deleteButtonAriaLabel"
+    aria-label="Remove tag Test"
     class="c3 c4 c5"
     data-testid="Test-remove-button"
     type="button"
@@ -2999,7 +2988,7 @@ exports[`Tag Tag size=small color=default matches snapshot (desktop removable) 1
       width="16"
     />
   </button>
-</span>
+</div>
 `;
 
 exports[`Tag Tag size=small color=default matches snapshot (desktop with icons) 1`] = `
@@ -3041,7 +3030,7 @@ exports[`Tag Tag size=small color=default matches snapshot (desktop with icons)
   width: var(--size-1x);
 }
 
-<span
+<div
   class="c0 c1"
 >
   <svg
@@ -3060,7 +3049,7 @@ exports[`Tag Tag size=small color=default matches snapshot (desktop with icons)
   >
     Test
   </span>
-</span>
+</div>
 `;
 
 exports[`Tag Tag size=small color=default matches snapshot (desktop) 1`] = `
@@ -3094,7 +3083,7 @@ exports[`Tag Tag size=small color=default matches snapshot (desktop) 1`] = `
   white-space: nowrap;
 }
 
-<span
+<div
   class="c0 c1"
 >
   <span
@@ -3102,7 +3091,7 @@ exports[`Tag Tag size=small color=default matches snapshot (desktop) 1`] = `
   >
     Test
   </span>
-</span>
+</div>
 `;
 
 exports[`Tag Tag size=small color=default matches snapshot (mobile removable) 1`] = `
@@ -3258,7 +3247,7 @@ exports[`Tag Tag size=small color=default matches snapshot (mobile removable) 1`
   width: 1rem;
 }
 
-<span
+<div
   class="c0 c1"
 >
   <span
@@ -3267,8 +3256,7 @@ exports[`Tag Tag size=small color=default matches snapshot (mobile removable) 1`
     Test
   </span>
   <button
-    aria-hidden="true"
-    aria-label="deleteButtonAriaLabel"
+    aria-label="Remove tag Test"
     class="c3 c4 c5"
     data-testid="Test-remove-button"
     type="button"
@@ -3281,7 +3269,7 @@ exports[`Tag Tag size=small color=default matches snapshot (mobile removable) 1`
       width="24"
     />
   </button>
-</span>
+</div>
 `;
 
 exports[`Tag Tag size=small color=default matches snapshot (mobile with icons) 1`] = `
@@ -3323,7 +3311,7 @@ exports[`Tag Tag size=small color=default matches snapshot (mobile with icons) 1
   width: var(--size-1x);
 }
 
-<span
+<div
   class="c0 c1"
 >
   <svg
@@ -3342,7 +3330,7 @@ exports[`Tag Tag size=small color=default matches snapshot (mobile with icons) 1
   >
     Test
   </span>
-</span>
+</div>
 `;
 
 exports[`Tag Tag size=small color=default matches snapshot (mobile) 1`] = `
@@ -3376,7 +3364,7 @@ exports[`Tag Tag size=small color=default matches snapshot (mobile) 1`] = `
   white-space: nowrap;
 }
 
-<span
+<div
   class="c0 c1"
 >
   <span
@@ -3384,5 +3372,5 @@ exports[`Tag Tag size=small color=default matches snapshot (mobile) 1`] = `
   >
     Test
   </span>
-</span>
+</div>
 `;
diff --git a/packages/react/src/components/tag/tag.tsx b/packages/react/src/components/tag/tag.tsx
index 677af1aaf9..3f1fff3df2 100644
--- a/packages/react/src/components/tag/tag.tsx
+++ b/packages/react/src/components/tag/tag.tsx
@@ -94,7 +94,7 @@ function getTagColors(
     return theme.component[`tag-${$tagColor}-${$colorProperty}`];
 }
 
-const TagContainer = styled.span<TagStylingProps>`
+const TagContainer = styled.div<TagStylingProps>`
     align-items: center;
     background-color: ${(props) => getTagColors(props, 'background-color')};
     border: 1px solid ${(props) => getTagColors(props, 'border-color')};
@@ -152,7 +152,7 @@ export const Tag = forwardRef(({
     color = 'default',
     value,
     onRemove,
-}: TagProps, ref: Ref<HTMLElement>) => {
+}: TagProps, ref: Ref<HTMLDivElement>) => {
     const { t } = useTranslation('tag');
     const { isMobile } = useDeviceContext();
 
@@ -204,7 +204,6 @@ export const Tag = forwardRef(({
 
             {isRemovable && (
                 <RemoveButton
-                    aria-hidden="true"
                     data-testid={`${value.label}-remove-button`}
                     type="button"
                     buttonType="tertiary"
diff --git a/packages/react/src/i18n/translations.ts b/packages/react/src/i18n/translations.ts
index 75c72e661f..f0b967557f 100644
--- a/packages/react/src/i18n/translations.ts
+++ b/packages/react/src/i18n/translations.ts
@@ -118,7 +118,7 @@ export const Translations = {
             addTab: 'Add Tabs',
             dismissTab: 'Dismiss {{label}} tab',
         },
-        'tag-medium': {
+        tag: {
             deleteButtonAriaLabel: 'Remove tag {{label}}',
         },
         'text-area': {
@@ -258,7 +258,7 @@ export const Translations = {
             addTab: 'Ajouter des onglets',
             dismissTab: 'Fermer l\'onglet {{label}}',
         },
-        'tag-medium': {
+        tag: {
             deleteButtonAriaLabel: 'Retirer l\'étiquette {{label}}',
         },
         'text-area': {