[NO JIRA][BpkNavigationTabGroup]Modify Navigation Tab Group A11Y (#3634)

Co-authored-by: Kerrie Wu <kerrie.wu@skyscanner.net>
Skyscanner · Oct 11, 2024 · d572964 · d572964
1 parent e082200
commit d572964
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 4 deletions.
diff --git a/packages/bpk-component-navigation-tab-group/README.md b/packages/bpk-component-navigation-tab-group/README.md
@@ -51,4 +51,4 @@ export default () => (
 
 ## Props
 
-Check out the full list of props on Skyscanner's [design system documentation website](https://www.skyscanner.design/latest/components/navigation-tab-group/web-4eQsMvYv).
+Check out the full list of props on Skyscanner's [design system documentation website](https://www.skyscanner.design/latest/components/navigation-tab-group/web-4wIhe9UI-4wIhe9UI).
diff --git a/packages/bpk-component-navigation-tab-group/src/BpkNavigationTabGroup.module.scss b/packages/bpk-component-navigation-tab-group/src/BpkNavigationTabGroup.module.scss
@@ -29,6 +29,10 @@
 .bpk-navigation-tab-group {
   display: flex;
 
+  .bpk-navigation-tab-list {
+    display: flex;
+  }
+
   .bpk-navigation-tab-wrap {
     height: tokens.$bpk-one-pixel-rem * 36;
     padding: 0 tokens.bpk-spacing-base();

diff --git a/packages/bpk-component-navigation-tab-group/src/BpkNavigationTabGroup.tsx b/packages/bpk-component-navigation-tab-group/src/BpkNavigationTabGroup.tsx
@@ -77,7 +77,8 @@ const TabWrap = ({ children, onClick, selected, tab, type }: TabWrapProps) => {
       className={tabStyling}
       href={tab.href}
       onClick={(e: MouseEvent<HTMLAnchorElement>) => onClick(e)}
-      aria-current={selected ? 'page' : false}
+      role="tab"
+      aria-selected={selected}
     >
       {children}
     </a>
@@ -88,8 +89,8 @@ const TabWrap = ({ children, onClick, selected, tab, type }: TabWrapProps) => {
       className={tabStyling}
       type="button"
       onClick={(e: MouseEvent<HTMLButtonElement>) => onClick(e)}
-      role="link"
-      aria-current={selected ? 'page' : false}
+      role="tab"
+      aria-selected={selected}
     >
       {children}
     </button>
@@ -121,6 +122,7 @@ const BpkNavigationTabGroup = ({
       role="navigation"
       aria-label={ariaLabel}
     >
+    <div role="tablist" className={getClassName('bpk-navigation-tab-list')}>
       {tabs.map((tab, index) => {
         const selected = index === selectedTab;
         const {icon,text,...tabWrapItem} = tab;
@@ -152,6 +154,7 @@ const BpkNavigationTabGroup = ({
           </TabWrap>
         );
       })}
+     </div>
     </nav>
   );
 };