[B] Fix Reader Header Options menu a11y

- Adds a11y props to options button
- Adds separate mobile version of options menu with inert state
- Adds focus trap to separate mobile options menu

Author: jen-castiron

client/src/reader/components/Header/index.js

@@ -18,6 +18,7 @@ import Utility from "global/components/utility";
 import DisclosureNavigationMenu from "global/components/atomic/DisclosureNavigationMenu";
 import { useTranslation } from "react-i18next";
 import Authorize from "hoc/Authorize";
+import { FocusTrap } from "focus-trap-react";
 
 export default function Header(props) {
   const {
@@ -88,8 +89,9 @@ export default function Header(props) {
     return (
       <button
         onClick={handleOptionsToggleClick}
-        aria-hidden
-        tabIndex={-1}
+        id="options-menu-button"
+        aria-controls="options-menu"
+        aria-expanded={mobileOptionsExpanded}
         className="reader-header__button reader-header__options-button"
       >
         <span>
@@ -151,6 +153,61 @@ export default function Header(props) {
     );
   };
 
+  const renderOptionsNav = () => {
+    return (
+      <ul
+        aria-label={t("reader.header.reader_settings_search")}
+        className="reader-header__nav-list"
+      >
+        <Authorize kind={"any"}>
+          <li className="reader-header__nav-item">
+            <ControlMenu.Button
+              onClick={panelToggleHandler("notes")}
+              icon="notes24"
+              label={t("glossary.note_title_case_other")}
+              active={visibility.uiPanels.notes}
+            />
+          </li>
+        </Authorize>
+        <li className="reader-header__nav-item">
+          <ControlMenu.Button
+            onClick={panelToggleHandler("visibility")}
+            icon="eyeball24"
+            label={t("common.visibility_title_case")}
+            active={visibility.uiPanels.visibility}
+          />
+        </li>
+        <li className="reader-header__nav-item">
+          <ControlMenu.Button
+            onClick={panelToggleHandler("appearance")}
+            icon="text24"
+            label={t("reader.header.reader_appearance")}
+            active={visibility.uiPanels.appearance}
+          />
+        </li>
+        <li className="reader-header__nav-item">
+          <SearchMenu.Button
+            toggleSearchMenu={panelToggleHandler("search")}
+            active={visibility.uiPanels.search}
+            className="reader-header__button reader-header__button--pad-narrow"
+            iconSize={32}
+          />
+        </li>
+        <li className="reader-header__nav-item">
+          <DisclosureNavigationMenu
+            visible={visibility.uiPanels.user}
+            disclosure={<UserMenuButton />}
+            callbacks={commonActions}
+            onBlur={commonActions.hideUserPanel}
+            context="reader"
+          >
+            <UserMenuBody />
+          </DisclosureNavigationMenu>
+        </li>
+      </ul>
+    );
+  };
+
   const innerClassName = classNames({
     "reader-header__inner": true,
     "reader-header__inner--shifted": mobileOptionsExpanded
@@ -173,58 +230,27 @@ export default function Header(props) {
             showSection={!scrollAware.top}
           />
         )}
+        {/* Options menu */}
         <div className="reader-header__menu-group reader-header__menu-group--right">
-          <ul
-            aria-label={t("reader.header.reader_settings_search")}
-            className="reader-header__nav-list"
-          >
-            <Authorize kind={"any"}>
-              <li className="reader-header__nav-item">
-                <ControlMenu.Button
-                  onClick={panelToggleHandler("notes")}
-                  icon="notes24"
-                  label={t("glossary.note_title_case_other")}
-                  active={visibility.uiPanels.notes}
-                />
-              </li>
-            </Authorize>
-            <li className="reader-header__nav-item">
-              <ControlMenu.Button
-                onClick={panelToggleHandler("visibility")}
-                icon="eyeball24"
-                label={t("common.visibility_title_case")}
-                active={visibility.uiPanels.visibility}
-              />
-            </li>
-            <li className="reader-header__nav-item">
-              <ControlMenu.Button
-                onClick={panelToggleHandler("appearance")}
-                icon="text24"
-                label={t("reader.header.reader_appearance")}
-                active={visibility.uiPanels.appearance}
-              />
-            </li>
-            <li className="reader-header__nav-item">
-              <SearchMenu.Button
-                toggleSearchMenu={panelToggleHandler("search")}
-                active={visibility.uiPanels.search}
-                className="reader-header__button reader-header__button--pad-narrow"
-                iconSize={32}
-              />
-            </li>
-            <li className="reader-header__nav-item">
-              <DisclosureNavigationMenu
-                visible={visibility.uiPanels.user}
-                disclosure={<UserMenuButton />}
-                callbacks={commonActions}
-                onBlur={commonActions.hideUserPanel}
-                context="reader"
-              >
-                <UserMenuBody />
-              </DisclosureNavigationMenu>
-            </li>
-          </ul>
+          {renderOptionsNav()}
         </div>
+        {/* Options menu, mobile */}
+        <FocusTrap
+          active={mobileOptionsExpanded}
+          focusTrapOptions={{
+            allowOutsideClick: true,
+            escapeDeactivates: handleOptionsToggleClick
+          }}
+        >
+          <div
+            className="reader-header__menu-group reader-header__menu-group--dialog"
+            id="options-menu"
+            aria-labelledby="options-menu-button"
+            {...(mobileOptionsExpanded ? {} : { inert: "" })}
+          >
+            {renderOptionsNav()}
+          </div>
+        </FocusTrap>
       </nav>
       {!!text && (
         <>

client/src/theme/styles/components/reader/readerHeader.js

@@ -55,8 +55,20 @@ export default `
     &--right {
       grid-area: menu-group-right;
       width: 100vw;
+      display: block;
 
       ${respond(`width: auto;`, 50)}
+      ${respond(`display: none;`, 50, "max")}
+      ${respond(`display: block;`, 20, "max")}
+    }
+
+    &--dialog {
+      grid-area: menu-group-right;
+      width: 100vw;
+      display: none;
+
+      ${respond(`display: block;`, 50, "max")}
+      ${respond(`display: none;`, 20, "max")}
     }
   }