Merge pull request #548 from Atom-Learning/DS-448-tab-list-left-arrow…

…-text-overlap fix: move left arrow in TabsTriggerList so always over list, negate t…
Atom-Learning · Jul 26, 2023 · 678000c · 678000c
2 parents 83e4a12 + 7c9ccaa
commit 678000c
Showing 1 changed file with 4 additions and 2 deletions.
diff --git a/lib/src/components/tabs/TabsTriggerList.tsx b/lib/src/components/tabs/TabsTriggerList.tsx
@@ -88,6 +88,8 @@ export const TabsTriggerList: React.FC<
       {...colorScheme}
       {...rest}
     >
+      <StyledTriggerList ref={setListRefCallback}>{children}</StyledTriggerList>
+
       {canScrollLeft && (
         <StyledChevronActionIcon
           label="scroll left"
@@ -96,13 +98,12 @@ export const TabsTriggerList: React.FC<
             left: 0
           }}
           onClick={() => scrollList(-SCROLL_STEP)}
+          tabIndex={-1}
         >
           <Icon is={ChevronLeft} />
         </StyledChevronActionIcon>
       )}
 
-      <StyledTriggerList ref={setListRefCallback}>{children}</StyledTriggerList>
-
       {canScrollRight && (
         <StyledChevronActionIcon
           label="scroll right"
@@ -111,6 +112,7 @@ export const TabsTriggerList: React.FC<
             right: 0
           }}
           onClick={() => scrollList(SCROLL_STEP)}
+          tabIndex={-1}
         >
           <Icon is={ChevronRight} />
         </StyledChevronActionIcon>