From 1adb2f467dd6f5ea4493e76dc885309967a3c6c5 Mon Sep 17 00:00:00 2001
From: guidari <guilhermedatilio@gmail.com>
Date: Tue, 27 Aug 2024 16:39:18 -0300
Subject: [PATCH 1/3] fix: added aria label for screen reader users

---
 .../src/components/Tag/InteractiveTag.stories.js    | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/react/src/components/Tag/InteractiveTag.stories.js b/packages/react/src/components/Tag/InteractiveTag.stories.js
index 65f78b24dcbe..03b1a680df5a 100644
--- a/packages/react/src/components/Tag/InteractiveTag.stories.js
+++ b/packages/react/src/components/Tag/InteractiveTag.stories.js
@@ -28,7 +28,7 @@ export default {
 
 export const Selectable = (args) => {
   return (
-    <>
+    <div aria-label="Selectable tags">
       <SelectableTag
         renderIcon={Asleep}
         text="Tag content with a long text description"
@@ -41,7 +41,7 @@ export const Selectable = (args) => {
         className="some-class"
         {...args}
       />
-    </>
+    </div>
   );
 };
 
@@ -93,7 +93,7 @@ export const Operational = (args) => {
 
   return (
     <>
-      <div style={{ marginBottom: '1rem' }}>
+      <div aria-label="Operational tags" style={{ marginBottom: '1rem' }}>
         <OperationalTag
           type="red"
           className="some-class"
@@ -173,7 +173,8 @@ export const Operational = (args) => {
           display: 'flex',
           justifyContent: 'flex-start',
           marginTop: '1rem',
-        }}>
+        }}
+        aria-label="Operational tags with Popover">
         {/* High contrast example */}
         <Popover open={openHighContrast} highContrast>
           <OperationalTag
@@ -295,7 +296,7 @@ Operational.argTypes = {
 
 export const Dismissible = (args) => {
   return (
-    <>
+    <div aria-label="Dismissible tags">
       <DismissibleTag
         type="red"
         className="some-class"
@@ -380,7 +381,7 @@ export const Dismissible = (args) => {
         text="Tag content"
         {...args}
       />
-    </>
+    </div>
   );
 };
 

From bdf74d0d32c8471a4650ccfa461c96712d1248e3 Mon Sep 17 00:00:00 2001
From: guidari <guilhermedatilio@gmail.com>
Date: Tue, 10 Sep 2024 09:28:06 -0300
Subject: [PATCH 2/3] fix: added group to div

---
 .../react/src/components/Tag/InteractiveTag.stories.js   | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/components/Tag/InteractiveTag.stories.js b/packages/react/src/components/Tag/InteractiveTag.stories.js
index 03b1a680df5a..98e86752af32 100644
--- a/packages/react/src/components/Tag/InteractiveTag.stories.js
+++ b/packages/react/src/components/Tag/InteractiveTag.stories.js
@@ -28,7 +28,7 @@ export default {
 
 export const Selectable = (args) => {
   return (
-    <div aria-label="Selectable tags">
+    <div aria-label="Selectable tags" role="group">
       <SelectableTag
         renderIcon={Asleep}
         text="Tag content with a long text description"
@@ -93,7 +93,10 @@ export const Operational = (args) => {
 
   return (
     <>
-      <div aria-label="Operational tags" style={{ marginBottom: '1rem' }}>
+      <div
+        aria-label="Operational tags"
+        role="group"
+        style={{ marginBottom: '1rem' }}>
         <OperationalTag
           type="red"
           className="some-class"
@@ -296,7 +299,7 @@ Operational.argTypes = {
 
 export const Dismissible = (args) => {
   return (
-    <div aria-label="Dismissible tags">
+    <div aria-label="Dismissible tags" role="group">
       <DismissibleTag
         type="red"
         className="some-class"

From e6d3c0d5613771cc9d121d9eb309b4e4b4267bd2 Mon Sep 17 00:00:00 2001
From: guidari <guilhermedatilio@gmail.com>
Date: Wed, 11 Sep 2024 09:36:47 -0300
Subject: [PATCH 3/3] fix: added to group

---
 packages/react/src/components/Tag/InteractiveTag.stories.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/components/Tag/InteractiveTag.stories.js b/packages/react/src/components/Tag/InteractiveTag.stories.js
index 98e86752af32..5fbd95c63880 100644
--- a/packages/react/src/components/Tag/InteractiveTag.stories.js
+++ b/packages/react/src/components/Tag/InteractiveTag.stories.js
@@ -177,7 +177,8 @@ export const Operational = (args) => {
           justifyContent: 'flex-start',
           marginTop: '1rem',
         }}
-        aria-label="Operational tags with Popover">
+        aria-label="Operational tags with Popover"
+        role="group">
         {/* High contrast example */}
         <Popover open={openHighContrast} highContrast>
           <OperationalTag