feat(Masthead): Make avatar accessible

Royal-Navy · Sep 3, 2020 · 130cf24 · 130cf24
1 parent 0b5f527
commit 130cf24
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/...ages/react-component-library/src/components/TopLevelNavigation/Masthead/Masthead.test.tsx b/...ages/react-component-library/src/components/TopLevelNavigation/Masthead/Masthead.test.tsx
@@ -386,6 +386,13 @@ describe('Masthead', () => {
       expect(wrapper.getByText('AB')).toBeInTheDocument()
     })
 
+    it('should set the `aria-label` attribute on the search button to `Show search`', () => {
+      expect(wrapper.queryByTestId('user-button')).toHaveAttribute(
+        'aria-label',
+        'Show user options'
+      )
+    })
+
     it('should not show the links', () => {
       expect(wrapper.queryByText('Profile')).toBeNull()
       expect(wrapper.queryByText('Settings')).toBeNull()

diff --git a/packages/react-component-library/src/components/TopLevelNavigation/Masthead/MastheadUser.tsx b/packages/react-component-library/src/components/TopLevelNavigation/Masthead/MastheadUser.tsx
@@ -50,8 +50,9 @@ const MastheadUserWithItems: React.FC<MastheadUserWithItemsProps> = ({
   <Sheet
     button={(
       <SheetButton
+        aria-label="Show user options"
         className="rn-masthead__option"
-        data-testid="notification-button"
+        data-testid="user-button"
         icon={(
           <Avatar
             data-testid="masthead-avatar"