Improve NoteOptions a11y (#134)

taniarascia · Oct 19, 2019 · f588c94 · f588c94
1 parent 5a0f999
commit f588c94
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 24 deletions.
diff --git a/src/components/NoteOptionsButton.tsx b/src/components/NoteOptionsButton.tsx
@@ -0,0 +1,27 @@
+import React, { KeyboardEventHandler, MouseEventHandler } from 'react'
+import { Icon } from 'react-feather'
+
+export interface NoteOptionsButtonProps {
+  handler: MouseEventHandler & KeyboardEventHandler
+  icon: Icon
+  text: string
+}
+
+const NoteOptionsButton: React.FC<NoteOptionsButtonProps> = props => {
+  const { handler, icon: IconCmp, text, ...rest } = props
+  return (
+    <div
+      className="nav-item"
+      role="button"
+      onClick={handler}
+      onKeyPress={handler}
+      tabIndex={0}
+      {...rest}
+    >
+      <IconCmp size={18} />
+      {text}
+    </div>
+  )
+}
+
+export default NoteOptionsButton
diff --git a/src/containers/NoteOptions.tsx b/src/containers/NoteOptions.tsx
@@ -1,7 +1,8 @@
 import React from 'react'
-import { ArrowUp, Star, Download, Trash, X } from 'react-feather'
+import { ArrowUp, Download, Star, Trash, X } from 'react-feather'
 import { useDispatch } from 'react-redux'
 
+import NoteOptionsButton from 'components/NoteOptionsButton'
 import { downloadNote, getNoteTitle } from 'helpers'
 import { deleteNote, toggleFavoriteNote, toggleTrashedNote } from 'slices/note'
 import { NoteItem } from 'types'
@@ -39,35 +40,26 @@ const NoteOptions: React.FC<NoteOptionsProps> = ({ clickedNote }) => {
     <nav className="note-options-nav" data-testid="note-options-nav">
       {clickedNote.trash ? (
         <>
-          <div className="nav-item" onClick={deleteNoteHandler}>
-            <X size={18} />
-            Delete permanently
-          </div>
-          <div className="nav-item" onClick={trashNoteHandler}>
-            <ArrowUp size={18} />
-            Restore from trash
-          </div>
+          <NoteOptionsButton handler={deleteNoteHandler} icon={X} text="Delete permanently" />
+          <NoteOptionsButton handler={trashNoteHandler} icon={ArrowUp} text="Restore from trash" />
         </>
       ) : (
         <>
-          <div
-            className="nav-item"
-            onClick={favoriteNoteHandler}
+          <NoteOptionsButton
             data-cy="note-option-favorite-button"
-          >
-            <Star size={18} />
-            {clickedNote.favorite ? 'Remove favorite' : 'Mark as favorite'}
-          </div>
-          <div className="nav-item" onClick={trashNoteHandler} data-cy="note-option-trash-button">
-            <Trash size={18} />
-            Move to trash
-          </div>
+            handler={favoriteNoteHandler}
+            icon={Star}
+            text={clickedNote.favorite ? 'Remove favorite' : 'Mark as favorite'}
+          />
+          <NoteOptionsButton
+            data-cy="note-option-trash-button"
+            handler={trashNoteHandler}
+            icon={Trash}
+            text="Move to trash"
+          />
         </>
       )}
-      <div className="nav-item" onClick={downloadNoteHandler}>
-        <Download size={18} />
-        Download
-      </div>
+      <NoteOptionsButton handler={downloadNoteHandler} icon={Download} text="Download" />
     </nav>
   )
 }