From 59106265c8782e4eec5a4927138d1b21b88d0b9a Mon Sep 17 00:00:00 2001
From: Armagan Ersoz <broccolinisoup@github.com>
Date: Wed, 28 Sep 2022 18:21:40 +1000
Subject: [PATCH 1/2] a11y improvements

---
 src/UnderlineNav2/UnderlineNav.tsx            | 62 +++++++++++--------
 src/UnderlineNav2/UnderlineNavArrowButton.tsx | 10 ++-
 2 files changed, 44 insertions(+), 28 deletions(-)

diff --git a/src/UnderlineNav2/UnderlineNav.tsx b/src/UnderlineNav2/UnderlineNav.tsx
index 50900cc5fa1..5b2e5cf2eb6 100644
--- a/src/UnderlineNav2/UnderlineNav.tsx
+++ b/src/UnderlineNav2/UnderlineNav.tsx
@@ -258,39 +258,49 @@ export const UnderlineNav = forwardRef(
           ref={newRef}
         >
           {isCoarsePointer && (
-            <LeftArrowButton show={scrollValues.scrollLeft > 0} onScrollWithButton={onScrollWithButton} />
+            <LeftArrowButton
+              tabIndex={scrollValues.scrollLeft > 0 ? 0 : -1}
+              show={scrollValues.scrollLeft > 0}
+              onScrollWithButton={onScrollWithButton}
+            />
           )}
 
           <NavigationList sx={merge<BetterSystemStyleObject>(responsiveProps.overflowStyles, ulStyles)} ref={listRef}>
             {responsiveProps.items}
+            {actions.length > 0 && (
+              <Box as="div" sx={{display: 'flex'}} ref={moreMenuRef} role="listitem">
+                <Box sx={getDividerStyle(theme)}></Box>
+                <ActionMenu>
+                  <ActionMenu.Button sx={moreBtnStyles}>More</ActionMenu.Button>
+                  <ActionMenu.Overlay align="end">
+                    <ActionList>
+                      {actions.map((action, index) => {
+                        const {children: actionElementChildren, ...actionElementProps} = action.props
+                        return (
+                          <ActionList.Item key={index} {...actionElementProps}>
+                            <Box
+                              as="span"
+                              sx={{display: 'flex', alignItems: 'center', justifyContent: 'space-between'}}
+                            >
+                              {actionElementChildren}
+                              <CounterLabel>{actionElementProps.counter}</CounterLabel>
+                            </Box>
+                          </ActionList.Item>
+                        )
+                      })}
+                    </ActionList>
+                  </ActionMenu.Overlay>
+                </ActionMenu>
+              </Box>
+            )}
           </NavigationList>
 
           {isCoarsePointer && (
-            <RightArrowButton show={scrollValues.scrollRight > 0} onScrollWithButton={onScrollWithButton} />
-          )}
-
-          {actions.length > 0 && (
-            <Box as="div" sx={{display: 'flex'}} ref={moreMenuRef}>
-              <Box sx={getDividerStyle(theme)}></Box>
-              <ActionMenu>
-                <ActionMenu.Button sx={moreBtnStyles}>More</ActionMenu.Button>
-                <ActionMenu.Overlay align="end">
-                  <ActionList>
-                    {actions.map((action, index) => {
-                      const {children: actionElementChildren, ...actionElementProps} = action.props
-                      return (
-                        <ActionList.Item key={index} {...actionElementProps}>
-                          <Box as="span" sx={{display: 'flex', alignItems: 'center', justifyContent: 'space-between'}}>
-                            {actionElementChildren}
-                            <CounterLabel>{actionElementProps.counter}</CounterLabel>
-                          </Box>
-                        </ActionList.Item>
-                      )
-                    })}
-                  </ActionList>
-                </ActionMenu.Overlay>
-              </ActionMenu>
-            </Box>
+            <RightArrowButton
+              tabIndex={scrollValues.scrollRight > 0 ? 0 : -1}
+              show={scrollValues.scrollRight > 0}
+              onScrollWithButton={onScrollWithButton}
+            />
           )}
         </Box>
       </UnderlineNavContext.Provider>
diff --git a/src/UnderlineNav2/UnderlineNavArrowButton.tsx b/src/UnderlineNav2/UnderlineNavArrowButton.tsx
index b36192aefbe..164c843d925 100644
--- a/src/UnderlineNav2/UnderlineNavArrowButton.tsx
+++ b/src/UnderlineNav2/UnderlineNavArrowButton.tsx
@@ -7,14 +7,17 @@ import {useTheme} from '../ThemeProvider'
 
 const LeftArrowButton = ({
   show,
-  onScrollWithButton
+  onScrollWithButton,
+  tabIndex
 }: {
   show: boolean
   onScrollWithButton: OnScrollWithButtonEventType
+  tabIndex?: number
 }) => {
   const {theme} = useTheme()
   return (
     <IconButton
+      tabIndex={tabIndex}
       aria-label="Scroll Left"
       onClick={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => onScrollWithButton(e, -1)}
       icon={ChevronLeftIcon}
@@ -25,14 +28,17 @@ const LeftArrowButton = ({
 
 const RightArrowButton = ({
   show,
-  onScrollWithButton
+  onScrollWithButton,
+  tabIndex
 }: {
   show: boolean
   onScrollWithButton: OnScrollWithButtonEventType
+  tabIndex?: number
 }) => {
   const {theme} = useTheme()
   return (
     <IconButton
+      tabIndex={tabIndex}
       aria-label="Scroll Right"
       onClick={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => onScrollWithButton(e, 1)}
       icon={ChevronRightIcon}

From 22d25d0c2ab3d1484207bcd971c5d8d1f013cd9c Mon Sep 17 00:00:00 2001
From: Armagan Ersoz <broccolinisoup@github.com>
Date: Thu, 29 Sep 2022 22:44:04 +1000
Subject: [PATCH 2/2] add changeset

---
 .changeset/dry-camels-enjoy.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/dry-camels-enjoy.md

diff --git a/.changeset/dry-camels-enjoy.md b/.changeset/dry-camels-enjoy.md
new file mode 100644
index 00000000000..5d7aa3ca05a
--- /dev/null
+++ b/.changeset/dry-camels-enjoy.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Underline2: accessibility improvments