refactor: popover a11y aria attributes

2023-08-14 14:42:33 +05:30
parent e1c5d52dbe
commit 4865e3ba28
31 changed files with 110 additions and 88 deletions
--- a/packages/web/src/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherOption.tsx
+++ b/packages/web/src/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherOption.tsx
@@ -32,7 +32,7 @@ const WorkspaceSwitcherOption: FunctionComponent<Props> = ({ mainApplicationGrou
      <Popover
        title="Switch workspace"
        align="end"
-        anchorElement={buttonRef.current}
+        anchorElement={buttonRef}
        className="py-2"
        open={isOpen}
        side="right"
--- a/packages/web/src/javascripts/Components/ChallengeModal/LockscreenWorkspaceSwitcher.tsx
+++ b/packages/web/src/javascripts/Components/ChallengeModal/LockscreenWorkspaceSwitcher.tsx
@@ -27,7 +27,7 @@ const LockscreenWorkspaceSwitcher: FunctionComponent<Props> = ({ mainApplication
      <Popover
        title="Switch workspace"
        align="center"
-        anchorElement={buttonRef.current}
+        anchorElement={buttonRef}
        className="py-2"
        open={isOpen}
        overrideZIndex="z-modal"
--- a/packages/web/src/javascripts/Components/ChangeEditor/ChangeEditorButton.tsx
+++ b/packages/web/src/javascripts/Components/ChangeEditor/ChangeEditorButton.tsx
@@ -77,7 +77,7 @@ const ChangeEditorButton: FunctionComponent<Props> = ({ noteViewController, onCl
        title="Change note type"
        togglePopover={toggleMenu}
        disableClickOutside={isClickOutsideDisabled}
-        anchorElement={buttonRef.current}
+        anchorElement={buttonRef}
        open={isOpen}
        className="pt-2 md:pt-0"
      >
--- a/packages/web/src/javascripts/Components/ChangeEditor/ChangeMultipleButton.tsx
+++ b/packages/web/src/javascripts/Components/ChangeEditor/ChangeMultipleButton.tsx
@@ -23,7 +23,7 @@ const ChangeMultipleButton = ({ application, notesController }: Props) => {
        title="Change note type"
        togglePopover={toggleMenu}
        disableClickOutside={disableClickOutside}
-        anchorElement={changeButtonRef.current}
+        anchorElement={changeButtonRef}
        open={isChangeMenuOpen}
        className="pt-2 md:pt-0"
      >
--- a/packages/web/src/javascripts/Components/ContentListView/Header/AddItemMenuButton.tsx
+++ b/packages/web/src/javascripts/Components/ContentListView/Header/AddItemMenuButton.tsx
@@ -67,47 +67,49 @@ const AddItemMenuButton = ({
          <Icon type="add" size="custom" className="h-5 w-5" />
        </button>
      </StyledTooltip>
-      <Popover
-        title="Add item"
-        open={canShowMenu && isMenuOpen}
-        anchorElement={addItemButtonRef.current}
-        togglePopover={() => {
-          setIsMenuOpen((isOpen) => !isOpen)
-        }}
-        side="bottom"
-        align="center"
-        className="py-2"
-      >
-        <Menu a11yLabel={'test'} isOpen={isMenuOpen}>
-          <MenuItem
-            onClick={() => {
-              addNewItem()
-              setIsMenuOpen(false)
-            }}
-          >
-            <Icon type="add" className="mr-2" />
-            {addButtonLabel}
-          </MenuItem>
-          <MenuItem
-            onClick={async () => {
-              setCaptureType('photo')
-              setIsMenuOpen(false)
-            }}
-          >
-            <Icon type="camera" className="mr-2" />
-            Take photo
-          </MenuItem>
-          <MenuItem
-            onClick={async () => {
-              setCaptureType('video')
-              setIsMenuOpen(false)
-            }}
-          >
-            <Icon type="camera" className="mr-2" />
-            Record video
-          </MenuItem>
-        </Menu>
-      </Popover>
+      {canShowMenu && (
+        <Popover
+          title="Add item"
+          open={isMenuOpen}
+          anchorElement={addItemButtonRef}
+          togglePopover={() => {
+            setIsMenuOpen((isOpen) => !isOpen)
+          }}
+          side="bottom"
+          align="center"
+          className="py-2"
+        >
+          <Menu a11yLabel={'test'} isOpen={isMenuOpen}>
+            <MenuItem
+              onClick={() => {
+                addNewItem()
+                setIsMenuOpen(false)
+              }}
+            >
+              <Icon type="add" className="mr-2" />
+              {addButtonLabel}
+            </MenuItem>
+            <MenuItem
+              onClick={async () => {
+                setCaptureType('photo')
+                setIsMenuOpen(false)
+              }}
+            >
+              <Icon type="camera" className="mr-2" />
+              Take photo
+            </MenuItem>
+            <MenuItem
+              onClick={async () => {
+                setCaptureType('video')
+                setIsMenuOpen(false)
+              }}
+            >
+              <Icon type="camera" className="mr-2" />
+              Record video
+            </MenuItem>
+          </Menu>
+        </Popover>
+      )}
      <ModalOverlay isOpen={captureType === 'photo'} close={closeCaptureModal}>
        <PhotoCaptureModal filesController={filesController} close={closeCaptureModal} />
      </ModalOverlay>
--- a/packages/web/src/javascripts/Components/ContentListView/Header/ContentListHeader.tsx
+++ b/packages/web/src/javascripts/Components/ContentListView/Header/ContentListHeader.tsx
@@ -116,7 +116,7 @@ const ContentListHeader = ({
          />
          <Popover
            open={showDisplayOptionsMenu}
-            anchorElement={displayOptionsButtonRef.current}
+            anchorElement={displayOptionsButtonRef}
            togglePopover={toggleDisplayOptionsMenu}
            align="start"
            className="py-2"
--- a/packages/web/src/javascripts/Components/ContentTableView/ContentTableView.tsx
+++ b/packages/web/src/javascripts/Components/ContentTableView/ContentTableView.tsx
@@ -67,7 +67,7 @@ const ContextMenuCell = ({ items }: { items: DecryptedItemInterface[] }) => {
      <Popover
        title="File options"
        open={contextMenuVisible}
-        anchorElement={anchorElementRef.current}
+        anchorElement={anchorElementRef}
        togglePopover={() => {
          setContextMenuVisible(false)
        }}
@@ -120,7 +120,7 @@ const ItemLinksCell = ({ item }: { item: DecryptedItemInterface }) => {
      <Popover
        title="Linked items"
        open={contextMenuVisible}
-        anchorElement={anchorElementRef.current}
+        anchorElement={anchorElementRef}
        togglePopover={() => {
          setContextMenuVisible(false)
        }}
--- a/packages/web/src/javascripts/Components/FileContextMenu/FileOptionsPanel.tsx
+++ b/packages/web/src/javascripts/Components/FileContextMenu/FileOptionsPanel.tsx
@@ -19,13 +19,7 @@ const FilesOptionsPanel = ({ itemListController }: Props) => {
  return (
    <>
      <RoundIconButton label="File options menu" onClick={toggleMenu} ref={buttonRef} icon="more" />
-      <Popover
-        title="File options"
-        togglePopover={toggleMenu}
-        anchorElement={buttonRef.current}
-        open={isOpen}
-        className="py-2"
-      >
+      <Popover title="File options" togglePopover={toggleMenu} anchorElement={buttonRef} open={isOpen} className="py-2">
        <Menu a11yLabel="File options panel" isOpen={isOpen}>
          <FileMenuOptions
            selectedFiles={itemListController.selectedFiles}
--- a/packages/web/src/javascripts/Components/FilePreview/FilePreviewModal.tsx
+++ b/packages/web/src/javascripts/Components/FilePreview/FilePreviewModal.tsx
@@ -212,7 +212,7 @@ const FilePreviewModal = observer(({ application }: Props) => {
            <Popover
              title="File options"
              open={showOptionsMenu}
-              anchorElement={menuButtonRef.current}
+              anchorElement={menuButtonRef}
              togglePopover={closeOptionsMenu}
              side="bottom"
              align="start"
--- a/packages/web/src/javascripts/Components/FileView/FileViewWithoutProtection.tsx
+++ b/packages/web/src/javascripts/Components/FileView/FileViewWithoutProtection.tsx
@@ -100,7 +100,7 @@ const FileViewWithoutProtection = ({ application, file }: FileViewProps) => {
                title="Details"
                open={isFileInfoPanelOpen}
                togglePopover={toggleFileInfoPanel}
-                anchorElement={fileInfoButtonRef.current}
+                anchorElement={fileInfoButtonRef}
                side="bottom"
                align="center"
              >
--- a/packages/web/src/javascripts/Components/Footer/AccountMenuButton.tsx
+++ b/packages/web/src/javascripts/Components/Footer/AccountMenuButton.tsx
@@ -36,7 +36,7 @@ const AccountMenuButton = ({ hasError, controller, mainApplicationGroup, onClick
      </StyledTooltip>
      <Popover
        title="Account"
-        anchorElement={buttonRef.current}
+        anchorElement={buttonRef}
        open={isOpen}
        togglePopover={toggleMenu}
        side="top"
--- a/packages/web/src/javascripts/Components/Footer/QuickSettingsButton.tsx
+++ b/packages/web/src/javascripts/Components/Footer/QuickSettingsButton.tsx
@@ -51,7 +51,7 @@ const QuickSettingsButton = ({ application, isMobileNavigation = false }: Props)
      <Popover
        title="Quick settings"
        togglePopover={toggleMenu}
-        anchorElement={buttonRef.current}
+        anchorElement={buttonRef}
        open={isOpen}
        side="top"
        align="start"
--- a/packages/web/src/javascripts/Components/Footer/VaultSelectionButton.tsx
+++ b/packages/web/src/javascripts/Components/Footer/VaultSelectionButton.tsx
@@ -56,7 +56,7 @@ const VaultSelectionButton = ({ isMobileNavigation = false }: { isMobileNavigati
      <Popover
        title="Vault options"
        togglePopover={toggleMenu}
-        anchorElement={buttonRef.current}
+        anchorElement={buttonRef}
        open={isOpen}
        side="top"
        align="start"
--- a/packages/web/src/javascripts/Components/LinkedItems/LinkedItemsButton.tsx
+++ b/packages/web/src/javascripts/Components/LinkedItems/LinkedItemsButton.tsx
@@ -32,7 +32,7 @@ const LinkedItemsButton = ({ linkingController, onClickPreprocessing }: Props) =
      <Popover
        title="Linked items"
        togglePopover={toggleMenu}
-        anchorElement={buttonRef.current}
+        anchorElement={buttonRef}
        open={isLinkingPanelOpen}
        className="pb-2"
      >
--- a/packages/web/src/javascripts/Components/LinkedItems/LinkedItemsSectionItem.tsx
+++ b/packages/web/src/javascripts/Components/LinkedItems/LinkedItemsSectionItem.tsx
@@ -101,7 +101,7 @@ export const LinkedItemsSectionItem = ({
        title="Options"
        open={isMenuOpen}
        togglePopover={toggleMenu}
-        anchorElement={menuButtonRef.current}
+        anchorElement={menuButtonRef}
        side="bottom"
        align="center"
        className="py-2"
--- a/packages/web/src/javascripts/Components/Menu/MenuRadioButtonItem.tsx
+++ b/packages/web/src/javascripts/Components/Menu/MenuRadioButtonItem.tsx
@@ -8,6 +8,7 @@ import {
  MouseEventHandler,
  ReactNode,
  useCallback,
+  useRef,
  useState,
 } from 'react'
 import Icon from '../Icon/Icon'
@@ -27,12 +28,12 @@ const Tooltip = ({ text }: { text: string }) => {
    [visible],
  )

-  const [anchorElement, setAnchorElement] = useState<HTMLDivElement | null>(null)
+  const anchorElement = useRef(null)

  return (
    <div className="relative">
      <div
-        ref={setAnchorElement}
+        ref={anchorElement}
        className={classNames('peer z-0 flex h-5 w-5 items-center justify-center rounded-full')}
        onClick={onClickMobile}
        onMouseEnter={() => setVisible(true)}
--- a/packages/web/src/javascripts/Components/Modal/Modal.tsx
+++ b/packages/web/src/javascripts/Components/Modal/Modal.tsx
@@ -131,7 +131,7 @@ const Modal = ({
                  <Popover
                    title="Advanced"
                    open={showAdvanced}
-                    anchorElement={advancedOptionRef.current}
+                    anchorElement={advancedOptionRef}
                    disableMobileFullscreenTakeover={true}
                    togglePopover={() => setShowAdvanced((show) => !show)}
                    align="start"
--- a/packages/web/src/javascripts/Components/NotesOptions/AddTagOption.tsx
+++ b/packages/web/src/javascripts/Components/NotesOptions/AddTagOption.tsx
@@ -67,7 +67,7 @@ const AddTagOption: FunctionComponent<Props> = ({
      <Popover
        title="Add tag"
        togglePopover={toggleMenu}
-        anchorElement={buttonRef.current}
+        anchorElement={buttonRef}
        open={isOpen}
        side="right"
        align="start"
--- a/packages/web/src/javascripts/Components/NotesOptions/ChangeEditorOption.tsx
+++ b/packages/web/src/javascripts/Components/NotesOptions/ChangeEditorOption.tsx
@@ -52,7 +52,7 @@ const ChangeEditorOption: FunctionComponent<ChangeEditorOptionProps> = ({ applic
      <Popover
        title="Change note type"
        align="start"
-        anchorElement={buttonRef.current}
+        anchorElement={buttonRef}
        className="pt-2 md:pt-0"
        open={isOpen}
        side="right"
--- a/packages/web/src/javascripts/Components/NotesOptions/Listed/ListedActionsOption.tsx
+++ b/packages/web/src/javascripts/Components/NotesOptions/Listed/ListedActionsOption.tsx
@@ -50,7 +50,7 @@ const ListedActionsOption: FunctionComponent<Props> = ({ application, note, icon
      <Popover
        title="Listed"
        togglePopover={toggleMenu}
-        anchorElement={buttonRef.current}
+        anchorElement={buttonRef}
        open={isOpen}
        side="right"
        align="end"
--- a/packages/web/src/javascripts/Components/NotesOptions/NotesOptionsPanel.tsx
+++ b/packages/web/src/javascripts/Components/NotesOptions/NotesOptionsPanel.tsx
@@ -35,7 +35,7 @@ const NotesOptionsPanel = ({ notesController, onClickPreprocessing }: Props) =>
        title="Note options"
        disableClickOutside={disableClickOutside}
        togglePopover={toggleMenu}
-        anchorElement={buttonRef.current}
+        anchorElement={buttonRef}
        open={isOpen}
        className="select-none pt-2"
      >
--- a/packages/web/src/javascripts/Components/Popover/MobilePopoverContent.tsx
+++ b/packages/web/src/javascripts/Components/Popover/MobilePopoverContent.tsx
@@ -52,6 +52,7 @@ const MobilePopoverContent = ({
      <div
        ref={mergeRefs([setPopoverElement, addCloseMethod])}
        className="fixed left-0 top-0 z-modal flex h-full w-full flex-col bg-default pb-safe-bottom pt-safe-top"
+        id={'popover/' + id}
        data-popover={id}
        data-mobile-popover
      >
--- a/packages/web/src/javascripts/Components/Popover/Popover.tsx
+++ b/packages/web/src/javascripts/Components/Popover/Popover.tsx
@@ -1,7 +1,6 @@
 import { MutuallyExclusiveMediaQueryBreakpoints, useMediaQuery } from '@/Hooks/useMediaQuery'
 import { useAndroidBackHandler } from '@/NativeMobileWeb/useAndroidBackHandler'
-import { UuidGenerator } from '@standardnotes/snjs'
-import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
+import { createContext, useCallback, useContext, useEffect, useId, useMemo, useState } from 'react'
 import MobilePopoverContent from './MobilePopoverContent'
 import PositionedPopoverContent from './PositionedPopoverContent'
 import { PopoverProps } from './Types'
@@ -62,11 +61,11 @@ const PositionedPopoverContentWithAnimation = (
 }

 const Popover = (props: PopoverProps) => {
-  const popoverId = useRef(UuidGenerator.GenerateUuid())
+  const popoverId = useId()

  const addAndroidBackHandler = useAndroidBackHandler()

-  useRegisterPopoverToParent(popoverId.current)
+  useRegisterPopoverToParent(popoverId)

  const [childPopovers, setChildPopovers] = useState<Set<string>>(new Set())

@@ -106,6 +105,27 @@ const Popover = (props: PopoverProps) => {
    }
  }, [addAndroidBackHandler, props, props.open])

+  useEffect(() => {
+    const anchorElement =
+      props.anchorElement && 'current' in props.anchorElement ? props.anchorElement.current : props.anchorElement
+
+    if (anchorElement) {
+      anchorElement.setAttribute('aria-haspopup', 'true')
+      if (props.open) {
+        anchorElement.setAttribute('aria-expanded', 'true')
+      } else {
+        anchorElement.removeAttribute('aria-expanded')
+      }
+    }
+
+    return () => {
+      if (anchorElement) {
+        anchorElement.removeAttribute('aria-haspopup')
+        anchorElement.removeAttribute('aria-expanded')
+      }
+    }
+  }, [props.anchorElement, props.open])
+
  const isMobileScreen = useMediaQuery(MutuallyExclusiveMediaQueryBreakpoints.sm)

  if (isMobileScreen && !props.disableMobileFullscreenTakeover) {
@@ -117,7 +137,7 @@ const Popover = (props: PopoverProps) => {
        }}
        title={props.title}
        className={props.className}
-        id={popoverId.current}
+        id={popoverId}
      >
        {props.children}
      </MobilePopoverContent>
@@ -126,7 +146,7 @@ const Popover = (props: PopoverProps) => {

  return (
    <PopoverContext.Provider value={contextValue}>
-      <PositionedPopoverContentWithAnimation {...props} childPopovers={childPopovers} id={popoverId.current} />
+      <PositionedPopoverContentWithAnimation {...props} childPopovers={childPopovers} id={popoverId} />
    </PopoverContext.Provider>
  )
 }
--- a/packages/web/src/javascripts/Components/Popover/PositionedPopoverContent.tsx
+++ b/packages/web/src/javascripts/Components/Popover/PositionedPopoverContent.tsx
@@ -35,7 +35,8 @@ const PositionedPopoverContent = ({
 }: PopoverContentProps) => {
  const [popoverElement, setPopoverElement] = useState<HTMLDivElement | null>(null)
  const popoverRect = useAutoElementRect(popoverElement)
-  const anchorElementRect = useAutoElementRect(anchorElement, {
+  const resolvedAnchorElement = anchorElement && 'current' in anchorElement ? anchorElement.current : anchorElement
+  const anchorElementRect = useAutoElementRect(resolvedAnchorElement, {
    updateOnWindowResize: true,
  })
  const anchorPointRect = DOMRect.fromRect({
@@ -75,7 +76,7 @@ const PositionedPopoverContent = ({

  usePopoverCloseOnClickOutside({
    popoverElement,
-    anchorElement,
+    anchorElement: resolvedAnchorElement,
    togglePopover,
    childPopovers,
    hideOnClickInModal,
@@ -122,13 +123,14 @@ const PositionedPopoverContent = ({
          } as CSSProperties
        }
        ref={mergeRefs([setPopoverElement, addCloseMethod])}
+        id={'popover/' + id}
        data-popover={id}
        onKeyDown={(event) => {
          if (event.key === KeyboardKey.Escape) {
            event.stopPropagation()
            togglePopover?.()
-            if (anchorElement) {
-              anchorElement.focus()
+            if (resolvedAnchorElement) {
+              resolvedAnchorElement.focus()
            }
          }
        }}
--- a/packages/web/src/javascripts/Components/Popover/Types.ts
+++ b/packages/web/src/javascripts/Components/Popover/Types.ts
@@ -1,4 +1,4 @@
-import { ReactNode } from 'react'
+import { ReactNode, RefObject } from 'react'

 export type PopoverState = 'closed' | 'positioning' | 'open'

@@ -20,8 +20,10 @@ type Point = {
  y: number
 }

+type AnchorElementOrRef = RefObject<HTMLElement | null> | HTMLElement | null
+
 type PopoverAnchorElementProps = {
-  anchorElement: HTMLElement | null
+  anchorElement: AnchorElementOrRef
  anchorPoint?: never
 }

@@ -49,7 +51,7 @@ type CommonPopoverProps = {
 }

 export type PopoverContentProps = CommonPopoverProps & {
-  anchorElement?: HTMLElement | null
+  anchorElement?: AnchorElementOrRef
  anchorPoint?: Point
  childPopovers: Set<string>
  togglePopover?: () => void
--- a/packages/web/src/javascripts/Components/Preferences/Panes/General/SmartViews/EditSmartViewModal.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/Panes/General/SmartViews/EditSmartViewModal.tsx
@@ -117,7 +117,7 @@ const EditSmartViewModal = ({ controller, platform }: Props) => {
            <Popover
              title="Choose icon"
              open={shouldShowIconPicker}
-              anchorElement={iconPickerButtonRef.current}
+              anchorElement={iconPickerButtonRef}
              togglePopover={toggleIconPicker}
              align="start"
              overrideZIndex="z-modal"
--- a/packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Vaults/VaultModal/EditVaultModal.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Vaults/VaultModal/EditVaultModal.tsx
@@ -244,7 +244,7 @@ const EditVaultModal: FunctionComponent<Props> = ({ onCloseDialog, existingVault
            <Popover
              title="Choose icon"
              open={shouldShowIconPicker}
-              anchorElement={iconPickerButtonRef.current}
+              anchorElement={iconPickerButtonRef}
              togglePopover={toggleIconPicker}
              align="start"
              overrideZIndex="z-modal"
--- a/packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalDialogContent.tsx
+++ b/packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalDialogContent.tsx
@@ -51,7 +51,7 @@ const HistoryModalDialogContent = ({ dismissModal, note }: RevisionHistoryModalC
        <Popover
          title="Advanced"
          open={showTabMenu}
-          anchorElement={tabOptionRef.current}
+          anchorElement={tabOptionRef}
          disableMobileFullscreenTakeover={true}
          togglePopover={toggleTabMenu}
          align="start"
--- a/packages/web/src/javascripts/Components/SmartViewBuilder/AddSmartViewModal.tsx
+++ b/packages/web/src/javascripts/Components/SmartViewBuilder/AddSmartViewModal.tsx
@@ -168,7 +168,7 @@ const AddSmartViewModal = ({ controller, platform }: Props) => {
            <Popover
              title="Choose icon"
              open={shouldShowIconPicker}
-              anchorElement={iconPickerButtonRef.current}
+              anchorElement={iconPickerButtonRef}
              togglePopover={toggleIconPicker}
              align="start"
              overrideZIndex="z-modal"
--- a/packages/web/src/javascripts/Components/SuperEditor/Plugins/ItemSelectionPlugin/ItemSelectionPlugin.tsx
+++ b/packages/web/src/javascripts/Components/SuperEditor/Plugins/ItemSelectionPlugin/ItemSelectionPlugin.tsx
@@ -98,7 +98,7 @@ export const ItemSelectionPlugin: FunctionComponent<Props> = ({ currentNote }) =
          <Popover
            title="Select item"
            align="start"
-            anchorElement={anchorElementRef.current}
+            anchorElement={anchorElementRef}
            open={true}
            disableMobileFullscreenTakeover={true}
            side={isMobileScreen() ? 'top' : 'bottom'}
--- a/packages/web/src/javascripts/Components/Vaults/AddToVaultMenuOption.tsx
+++ b/packages/web/src/javascripts/Components/Vaults/AddToVaultMenuOption.tsx
@@ -140,7 +140,7 @@ const AddToVaultMenuOption = ({ iconClassName, items }: { iconClassName: string;
      <Popover
        title="Move to vault"
        togglePopover={toggleSubMenu}
-        anchorElement={buttonRef.current}
+        anchorElement={buttonRef}
        open={isSubMenuOpen}
        side="right"
        align="start"