get ActionBar axe clean (#4388)

* get ActionBar axe clean

* changeset

* fix type

* fix type

Author: keithamus

.changeset/lemon-seahorses-argue.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+ActionBar now produces valid HTML

packages/react/src/drafts/ActionBar/ActionBar.test.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import {behavesAsComponent} from '../../utils/testing'
+import {render as HTMLRender} from '@testing-library/react'
+import {axe} from 'jest-axe'
+
+import ActionBar from './'
+import {BoldIcon, CodeIcon, ItalicIcon, LinkIcon} from '@primer/octicons-react'
+
+const SimpleActionBar = () => (
+  <ActionBar>
+    <ActionBar.IconButton icon={BoldIcon} aria-label="Default"></ActionBar.IconButton>
+    <ActionBar.IconButton icon={ItalicIcon} aria-label="Default"></ActionBar.IconButton>
+    <ActionBar.Divider />
+    <ActionBar.IconButton icon={CodeIcon} aria-label="Default"></ActionBar.IconButton>
+    <ActionBar.IconButton icon={LinkIcon} aria-label="Default"></ActionBar.IconButton>
+  </ActionBar>
+)
+
+describe('ActionBar', () => {
+  afterEach(() => {
+    jest.clearAllMocks()
+  })
+
+  behavesAsComponent({
+    Component: ActionBar,
+    options: {skipAs: true, skipSx: true},
+    toRender: () => <SimpleActionBar />,
+  })
+
+  it('should have no axe violations', async () => {
+    const {container} = HTMLRender(<SimpleActionBar />)
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+  })
+})

packages/react/src/drafts/ActionBar/ActionBar.tsx

@@ -42,7 +42,7 @@ export type ActionBarProps = {
 
 export type ActionBarIconButtonProps = IconButtonProps
 
-const NavigationList = styled.ul`
+const NavigationList = styled.div`
   ${sx};
 `
 
@@ -54,7 +54,7 @@ const MoreMenuListItem = styled.li`
   height: ${MORE_BTN_HEIGHT}px;
 `
 
-const ulStyles = {
+const listStyles = {
   display: 'flex',
   listStyle: 'none',
   whiteSpace: 'nowrap',
@@ -188,7 +188,7 @@ export const ActionBar: React.FC<React.PropsWithChildren<ActionBarProps>> = prop
   }, [])
 
   const navRef = useRef<HTMLDivElement>(null)
-  const listRef = useRef<HTMLUListElement>(null)
+  const listRef = useRef<HTMLDivElement>(null)
   const moreMenuRef = useRef<HTMLLIElement>(null)
   const moreMenuBtnRef = useRef<HTMLButtonElement>(null)
   const containerRef = React.useRef<HTMLUListElement>(null)
@@ -254,7 +254,7 @@ export const ActionBar: React.FC<React.PropsWithChildren<ActionBarProps>> = prop
   return (
     <ActionBarContext.Provider value={{size, setChildrenWidth}}>
       <Box ref={navRef} sx={getNavStyles()}>
-        <NavigationList sx={ulStyles} ref={listRef} role="list">
+        <NavigationList sx={listStyles} ref={listRef} role="toolbar">
           {listItems}
           {menuItems.length > 0 && (
             <MoreMenuListItem ref={moreMenuRef}>