fix: update keyboard accessibility docs to correct keyDownButtonWrapp…

…er and add Firefox guidance [SRED-164] (#366)

build.washingtonpost.com/docs/resources/accessibility/accessibility-checklist.mdx

@@ -44,7 +44,7 @@ Thanks for incorporating accessibility considerations into your work!
   Just as you would put alt="" for purely decorative images to hide them from
   screen readers, you should add [aria-hidden="true"](/resources/accessibility/semantic-html#Hiding%20content%20from%20screen%20readers)
   for content on the page that is not screen reader friendly. An example of this
-  might be an election map full of svgs and labels, etc. You would want to include 
+  might be an election map full of svgs and labels, etc. You would want to include
   [a table version](/resources/accessibility/semantic-html#Tables) of the data or some
   other alternative for accessibility, and then hide the map with aria-hidden.
 

build.washingtonpost.com/docs/resources/accessibility/keyboard-accessibility.mdx

@@ -18,7 +18,10 @@ For a user to know that they can "click" an element with their keyboard (includi
 
 To be focusable means the element can be selected individually via keyboard controls. Try opening one of our pages in Google Chrome, and repeatedly press the `tab` key on your keyboard. You will notice that certain elements (but not every element) become highlighted or get a ring around them as you keep pressing `tab`. The `tab` key is just one of many [keyboard controls](#How%20to%20navigate%20with%20a%20keyboard%20only) available to users.
 
-**Note:** In Safari, the `tab` key does not exhibit the above behavior by default. You can press `option` and `tab` at the same time instead, or go into your Safari preferences and turn on “Press Tab to highlight each item on a webpage” in the "Advanced" pane of the preferences menu. Other browsers may also require setup for keyboard navigation to work as expected.
+**Note:** Other browsers may require setup for keyboard navigation to work as expected.
+
+- In Safari, the `tab` key does not exhibit the above behavior by default. You can press `option` and `tab` at the same time instead, or go into your Safari preferences and turn on “Press Tab to highlight each item on a webpage” in the "Advanced" pane of the preferences menu.
+- In Firefox for MacOS, you may need to toggle the following setting on before using keyboard navigation: Apple > System Settings > Keyboard > Keyboard navigation.
 
 ---
 
@@ -86,15 +89,18 @@ At The Post, we have gotten around this by using `onKeyDown` wrapper functions l
 ```jsx
 /**
  * Wraps specified function with button keyboard logic
- * i.e. only "Space" or "Enter" keydowns will trigger
- * the function
+ * i.e. only "Enter" or " " (the spacebar/space key)
+ * keydowns will trigger the function
  *
  * @param {object} e The keyboard event
  * @param {function} fn The function to be wrapped
  * @returns {object} The wrapped function
  */
 export function keyDownButtonWrapper(e, fn) {
-  if (e.key === "Enter" || e.key === "Space") fn();
+  if (e.key === "Enter" || e.key === " ") {
+    e.preventDefault(); // space scrolls page by default
+    fn();
+  }
 }
 
 /**
@@ -118,7 +124,7 @@ on this page, the resulting code looks like the following:
 <div
   role="button"
   onClick={someFunction}
-  onKeyDown={(e) => keyDownButtonWrapper(e, () => toggleBookmark())}
+  onKeyDown={(e) => keyDownButtonWrapper(e, () => someFunction())}
   tabIndex={0}
   className="focus-highlight"
 >