[B] Update to a disclosure pattern similar to the header nested navigation menus

jen-castiron · jen-castiron · commit 0226fc24c641 · 2025-10-16T15:35:10.000-07:00
- Updates search, visibility, and appearance menus to a nested disclosure pattern
diff --git a/client/src/frontend/components/collecting/Toggle/index.js b/client/src/frontend/components/collecting/Toggle/index.js
@@ -1,6 +1,5 @@
 import React, { useState, useEffect, useMemo } from "react";
 import PropTypes from "prop-types";
-import { useTranslation } from "react-i18next";
 import classNames from "classnames";
 import { collectingAPI, requests } from "api";
 import { useDispatch } from "react-redux";
@@ -58,8 +57,6 @@ function CollectingToggle({
   const [isCollecting, setIsCollecting] = useState(false);
   const [dialogVisible, setDialogVisible] = useState(false);
 
-  const { t } = useTranslation();
-
   const myCollectableReadingGroups = useMemo(() => {
     if (!Array.isArray(myReadingGroups)) return [];
     return myReadingGroups.filter(rg => rg?.attributes?.abilities?.update);
diff --git a/client/src/global/components/UIPanel/index.js b/client/src/global/components/UIPanel/index.js
@@ -23,7 +23,7 @@ export default function UIPanel(props) {
         escapeDeactivates: e => props.hidePanel(e)
       }}
     >
-      <Styled.Panel inert={!visible ? "" : undefined}>
+      <Styled.Panel id={props.id} inert={!visible ? "" : undefined}>
         {React.createElement(props.bodyComponent, {
           ...props,
           closeCallback: props.hidePanel,
diff --git a/client/src/global/components/UserMenuButton/index.js b/client/src/global/components/UserMenuButton/index.js
@@ -35,8 +35,7 @@ const UserMenuButton = forwardRef(
         {...(authenticated
           ? props
           : {
-              "aria-expanded": props["aria-expanded"],
-              "aria-haspopup": "dialog"
+              "aria-expanded": props["aria-expanded"]
             })}
       >
         <span className="screen-reader-text">
diff --git a/client/src/global/components/atomic/DisclosureNavigationMenu/index.js b/client/src/global/components/atomic/DisclosureNavigationMenu/index.js
@@ -31,7 +31,8 @@ DisclosureNavigationMenu.displayName = "Global.Atomic.DisclosureNavigationMenu";
 DisclosureNavigationMenu.propTypes = {
   disclosure: PropTypes.node.isRequired,
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.string]).isRequired,
-  visible: PropTypes.bool
+  visible: PropTypes.bool,
+  onBlur: PropTypes.func
 };
 
 export default DisclosureNavigationMenu;
diff --git a/client/src/global/components/search/menu/Body.js b/client/src/global/components/search/menu/Body.js
@@ -9,7 +9,6 @@ export class SearchMenuBody extends PureComponent {
     toggleVisibility: PropTypes.func.isRequired,
     match: PropTypes.object.isRequired,
     history: PropTypes.object.isRequired,
-    visibility: PropTypes.object.isRequired,
     searchType: PropTypes.string.isRequired,
     onSubmit: PropTypes.func,
     facets: PropTypes.array,
diff --git a/client/src/reader/components/Header/index.js b/client/src/reader/components/Header/index.js
@@ -166,32 +166,81 @@ export default function Header(props) {
               icon="notes24"
               label={t("glossary.note_title_case_other")}
               active={visibility.uiPanels.notes}
+              ariaHasPopup="dialog"
+              ariaControls="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}
-          />
+          <DisclosureNavigationMenu
+            visible={visibility.uiPanels.visibility}
+            disclosure={
+              <ControlMenu.DisclosureButton
+                icon="eyeball24"
+                label={t("common.visibility_title_case")}
+              />
+            }
+          >
+            <ControlMenu.DisclosurePanel direction="right">
+              <ControlMenu.VisibilityMenuBody
+                className="panel"
+                filter={visibility.visibilityFilters}
+                filterChangeHandler={handleVisibilityFilterChange}
+              />
+            </ControlMenu.DisclosurePanel>
+          </DisclosureNavigationMenu>
         </li>
         <li className="reader-header__nav-item">
-          <ControlMenu.Button
-            onClick={panelToggleHandler("appearance")}
-            icon="text24"
-            label={t("reader.header.reader_appearance")}
-            active={visibility.uiPanels.appearance}
-          />
+          <DisclosureNavigationMenu
+            visible={visibility.uiPanels.appearance}
+            disclosure={
+              <ControlMenu.DisclosureButton
+                icon="text24"
+                label={t("reader.header.reader_appearance")}
+              />
+            }
+          >
+            <ControlMenu.DisclosurePanel direction="right">
+              <ControlMenu.AppearanceMenuBody
+                // Props required by body component
+                appearance={appearance}
+                selectFont={selectFont}
+                setColorScheme={setColorScheme}
+                incrementFontSize={incrementFontSize}
+                decrementFontSize={decrementFontSize}
+                incrementMargins={incrementMargins}
+                decrementMargins={decrementMargins}
+                resetTypography={resetTypography}
+                className="panel"
+              />
+            </ControlMenu.DisclosurePanel>
+          </DisclosureNavigationMenu>
         </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}
-          />
+          <DisclosureNavigationMenu
+            visible={visibility.uiPanels.search}
+            disclosure={
+              <ControlMenu.DisclosureButton
+                icon="search24"
+                label={t("search.title")}
+              />
+            }
+          >
+            <ControlMenu.DisclosurePanel direction="right">
+              <SearchMenu.Body
+                toggleVisibility={panelToggleHandler("search")}
+                initialState={{
+                  keyword: "",
+                  scope: "text"
+                }}
+                projectId={projectId}
+                textId={textId}
+                sectionId={sectionId}
+                searchType="reader"
+                className="panel search-menu"
+              />
+            </ControlMenu.DisclosurePanel>
+          </DisclosureNavigationMenu>
         </li>
         <li className="reader-header__nav-item">
           <DisclosureNavigationMenu
@@ -287,45 +336,6 @@ export default function Header(props) {
               history={history}
               hidePanel={commonActions.hideNotesPanel}
             />
-            <UIPanel
-              id="visibility"
-              visibility={visibility.uiPanels}
-              filter={visibility.visibilityFilters}
-              filterChangeHandler={handleVisibilityFilterChange}
-              bodyComponent={ControlMenu.VisibilityMenuBody}
-              hidePanel={commonActions.hideVisibilityPanel}
-            />
-            <UIPanel
-              id="search"
-              visibility={visibility.uiPanels}
-              toggleVisibility={panelToggleHandler("search")}
-              initialState={{
-                keyword: "",
-                scope: "text"
-              }}
-              projectId={projectId}
-              textId={textId}
-              sectionId={sectionId}
-              searchType="reader"
-              bodyComponent={SearchMenu.Body}
-              bodyClassName="search-menu"
-              hidePanel={commonActions.hideSearchPanel}
-            />
-            <UIPanel
-              id="appearance"
-              visibility={visibility.uiPanels}
-              bodyComponent={ControlMenu.AppearanceMenuBody}
-              // Props required by body component
-              appearance={appearance}
-              selectFont={selectFont}
-              setColorScheme={setColorScheme}
-              incrementFontSize={incrementFontSize}
-              decrementFontSize={decrementFontSize}
-              incrementMargins={incrementMargins}
-              decrementMargins={decrementMargins}
-              resetTypography={resetTypography}
-              hidePanel={commonActions.hideAppearancePanel}
-            />
           </div>
         </>
       )}
diff --git a/client/src/reader/components/control-menu/Button.js b/client/src/reader/components/control-menu/Button.js
@@ -10,7 +10,9 @@ export default class ControlMenuButton extends PureComponent {
     onClick: PropTypes.func.isRequired,
     icon: PropTypes.string.isRequired,
     label: PropTypes.string.isRequired,
-    active: PropTypes.bool
+    active: PropTypes.bool,
+    ariaControls: PropTypes.string,
+    ariaHasPopup: PropTypes.string
   };
 
   handleClick = event => {
@@ -30,8 +32,11 @@ export default class ControlMenuButton extends PureComponent {
         className={buttonClass}
         onClick={this.handleClick}
         data-id={`toggle-${this.props.label}`}
-        aria-haspopup
         aria-expanded={this.props.active}
+        aria-controls={this.props.ariaControls}
+        {...(this.props.ariaHasPopup
+          ? { "aria-haspopup": this.props.ariaHasPopup }
+          : {})}
       >
         <Utility.IconComposer icon={this.props.icon} size={32} />
         <span className="screen-reader-text">{this.props.label}</span>
diff --git a/client/src/reader/components/control-menu/DisclosureButton.js b/client/src/reader/components/control-menu/DisclosureButton.js
@@ -0,0 +1,39 @@
+import React, { forwardRef } from "react";
+import PropTypes from "prop-types";
+import classNames from "classnames";
+import Utility from "global/components/utility";
+
+const ControlMenuDisclosureButton = (props, ref) => {
+  const { label, visible, icon, ...rest } = props;
+
+  const buttonClass = classNames({
+    "reader-header__button": true,
+    "reader-header__button--pad-narrow": true,
+    "button-active": visible
+  });
+
+  return (
+    <button
+      ref={ref}
+      className={buttonClass}
+      data-id={`toggle-${label}`}
+      aria-expanded={visible}
+      {...rest}
+    >
+      <Utility.IconComposer icon={icon} size={32} />
+      <span className="screen-reader-text">{label}</span>
+    </button>
+  );
+};
+
+ControlMenuDisclosureButton.propTypes = {
+  onClick: PropTypes.func.isRequired,
+  icon: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  ariaControls: PropTypes.string,
+  visible: PropTypes.bool
+};
+
+ControlMenuDisclosureButton.displayName = "ControlMenu.Button";
+
+export default forwardRef(ControlMenuDisclosureButton);
diff --git a/client/src/reader/components/control-menu/DisclosurePanel/DisclosurePanel.js b/client/src/reader/components/control-menu/DisclosurePanel/DisclosurePanel.js
@@ -0,0 +1,31 @@
+import React, { forwardRef } from "react";
+import PropTypes from "prop-types";
+import * as Styled from "./styles";
+
+const ControlMenuDisclosurePanel = forwardRef((props, ref) => {
+  const { id, visible, direction, children, ...rest } = props;
+  return (
+    <Styled.Panel
+      id={id}
+      ref={ref}
+      {...(!visible ? { inert: "" } : {})}
+      className={`reader-header__panels ${
+        direction ? `reader-header__panels--${direction}` : ""
+      }`}
+      {...rest}
+    >
+      {children}
+    </Styled.Panel>
+  );
+});
+
+ControlMenuDisclosurePanel.displayName = "ControlMenu.DisclosurePanel";
+
+ControlMenuDisclosurePanel.propTypes = {
+  id: PropTypes.string,
+  children: PropTypes.node,
+  visible: PropTypes.bool,
+  direction: PropTypes.oneOf(["left", "right"])
+};
+
+export default ControlMenuDisclosurePanel;
diff --git a/client/src/reader/components/control-menu/DisclosurePanel/index.js b/client/src/reader/components/control-menu/DisclosurePanel/index.js
@@ -0,0 +1,3 @@
+import DisclosurePanel from "./DisclosurePanel";
+
+export default DisclosurePanel;
diff --git a/client/src/reader/components/control-menu/DisclosurePanel/styles.js b/client/src/reader/components/control-menu/DisclosurePanel/styles.js
@@ -0,0 +1,20 @@
+import styled from "@emotion/styled";
+import { respond, defaultTransitionProps } from "theme/styles/mixins";
+
+export const Panel = styled.div`
+  position: fixed;
+
+  .panel {
+    inline-size: 100%;
+    max-inline-size: 100dvw;
+    transition: transform ${defaultTransitionProps},
+      opacity ${defaultTransitionProps};
+
+    ${respond(`inline-size: auto;`, 50)}
+  }
+
+  &[inert] .panel {
+    opacity: var(--Panel-starting-opacity, 0);
+    transform: var(--Panel-starting-transform);
+  }
+`;
diff --git a/client/src/reader/components/control-menu/VisibilityMenuBody.js b/client/src/reader/components/control-menu/VisibilityMenuBody.js
@@ -36,7 +36,7 @@ class VisibilityMenuBody extends PureComponent {
   }
 
   get canEngagePublicly() {
-    return this.context.attributes.abilities.engagePublicly;
+    return this.context?.attributes.abilities.engagePublicly;
   }
 
   get canAccessReadingGroups() {
diff --git a/client/src/reader/components/control-menu/index.js b/client/src/reader/components/control-menu/index.js
@@ -1,9 +1,13 @@
 import AppearanceMenuBody from "./AppearanceMenuBody";
 import Button from "./Button";
+import DisclosureButton from "./DisclosureButton";
+import DisclosurePanel from "./DisclosurePanel";
 import VisibilityMenuBody from "./VisibilityMenuBody";
 
 export default {
   AppearanceMenuBody,
   Button,
-  VisibilityMenuBody
+  VisibilityMenuBody,
+  DisclosureButton,
+  DisclosurePanel
 };
diff --git a/client/src/theme/styles/components/reader/readerHeader.js b/client/src/theme/styles/components/reader/readerHeader.js
@@ -1,7 +1,7 @@
 import {
   respond,
   rgba,
-  listHorizontal,
+  listUnstyled,
   buttonUnstyled,
   utilityPrimary,
   defaultTransitionProps
@@ -231,18 +231,22 @@ export default `
   }
 
   &__nav-list {
-    ${listHorizontal}
     position: relative;
     display: block;
     height: 100%;
+    ${listUnstyled}
+
+    > li {
+      display: inline-block;
+    }
   }
 
   &__nav-item {
     position: relative;
     height: 100%;
     vertical-align: middle;
 
-    svg {
+    > svg {
       width: 28px;
       height: 28px;
 

Original file line number	Diff line number	Diff line change
`@@ -23,7 +23,7 @@ export default function UIPanel(props) {`
`23`	`23`	`escapeDeactivates: e => props.hidePanel(e)`
`24`	`24`	`}}`
`25`	`25`	`>`
`26`		`- <Styled.Panel inert={!visible ? "" : undefined}>`
	`26`	`+ <Styled.Panel id={props.id} inert={!visible ? "" : undefined}>`
`27`	`27`	`{React.createElement(props.bodyComponent, {`
`28`	`28`	`...props,`
`29`	`29`	`closeCallback: props.hidePanel,`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+import DisclosurePanel from "./DisclosurePanel";`
	`2`	`+`
	`3`	`+export default DisclosurePanel;`