From 5172f691cd187a5598af0d63fb532b0210af430c Mon Sep 17 00:00:00 2001
From: Guilherme Datilio Ribeiro <guilhermedatilio@gmail.com>
Date: Fri, 9 Aug 2024 16:04:01 -0300
Subject: [PATCH] fix: added role option to selectabletag and changed stories
 (#17110)

* fix: added role option to selectabletag and changed stories

* fix: added aria-pressed instead of aria-selected

* test: fixed avt test that was failing

* fix: fixed selectalbe tag

---------

Co-authored-by: kennylam <909118+kennylam@users.noreply.github.com>
---
 .../ProgressIndicator/ProgressIndicator-test.avt.e2e.js         | 2 +-
 packages/react/src/components/Tag/SelectableTag.tsx             | 2 ++
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/e2e/components/ProgressIndicator/ProgressIndicator-test.avt.e2e.js b/e2e/components/ProgressIndicator/ProgressIndicator-test.avt.e2e.js
index 779737ec4c7a..14a182478d7c 100644
--- a/e2e/components/ProgressIndicator/ProgressIndicator-test.avt.e2e.js
+++ b/e2e/components/ProgressIndicator/ProgressIndicator-test.avt.e2e.js
@@ -113,8 +113,8 @@ test.describe('@avt ProgressIndicator', () => {
       },
     });
     // Testing the first element interaction
-    await page.keyboard.press('Tab');
     await expect(page.getByRole('button', { name: 'Click me' })).toBeVisible();
+    await page.keyboard.press('Tab');
     await expect(page.getByRole('button', { name: 'Click me' })).toBeFocused();
 
     await page.keyboard.press('Enter');
diff --git a/packages/react/src/components/Tag/SelectableTag.tsx b/packages/react/src/components/Tag/SelectableTag.tsx
index a050b9e27fce..06b712eb8421 100644
--- a/packages/react/src/components/Tag/SelectableTag.tsx
+++ b/packages/react/src/components/Tag/SelectableTag.tsx
@@ -118,6 +118,7 @@ const SelectableTag = <T extends React.ElementType>({
         leaveDelayMs={0}
         onMouseEnter={() => false}>
         <Tag
+          aria-pressed={selectedTag}
           ref={tagRef}
           slug={slug}
           size={size}
@@ -138,6 +139,7 @@ const SelectableTag = <T extends React.ElementType>({
 
   return (
     <Tag
+      aria-pressed={selectedTag}
       ref={tagRef}
       slug={slug}
       size={size}