get ActionBar axe clean (#4388)

* get ActionBar axe clean * changeset * fix type * fix type
primer · Mar 19, 2024 · c4a4674 · c4a4674
1 parent 5f94a23
commit c4a4674
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 4 deletions.
diff --git a/.changeset/lemon-seahorses-argue.md b/.changeset/lemon-seahorses-argue.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+ActionBar now produces valid HTML
diff --git a/packages/react/src/drafts/ActionBar/ActionBar.test.tsx b/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()
+  })
+})
diff --git a/packages/react/src/drafts/ActionBar/ActionBar.tsx b/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}>