refactor: popover a11y aria attributes

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"

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"

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"
       >

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"
       >

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
+      {canShowMenu && (
-        title="Add item"
+        <Popover
-        open={canShowMenu && isMenuOpen}
+          title="Add item"
-        anchorElement={addItemButtonRef.current}
+          open={isMenuOpen}
-        togglePopover={() => {
+          anchorElement={addItemButtonRef}
-          setIsMenuOpen((isOpen) => !isOpen)
+          togglePopover={() => {
-        }}
+            setIsMenuOpen((isOpen) => !isOpen)
-        side="bottom"
+          }}
-        align="center"
+          side="bottom"
-        className="py-2"
+          align="center"
-      >
+          className="py-2"
-        <Menu a11yLabel={'test'} isOpen={isMenuOpen}>
+        >
-          <MenuItem
+          <Menu a11yLabel={'test'} isOpen={isMenuOpen}>
-            onClick={() => {
+            <MenuItem
-              addNewItem()
+              onClick={() => {
-              setIsMenuOpen(false)
+                addNewItem()
-            }}
+                setIsMenuOpen(false)
-          >
+              }}
-            <Icon type="add" className="mr-2" />
+            >
-            {addButtonLabel}
+              <Icon type="add" className="mr-2" />
-          </MenuItem>
+              {addButtonLabel}
-          <MenuItem
+            </MenuItem>
-            onClick={async () => {
+            <MenuItem
-              setCaptureType('photo')
+              onClick={async () => {
-              setIsMenuOpen(false)
+                setCaptureType('photo')
-            }}
+                setIsMenuOpen(false)
-          >
+              }}
-            <Icon type="camera" className="mr-2" />
+            >
-            Take photo
+              <Icon type="camera" className="mr-2" />
-          </MenuItem>
+              Take photo
-          <MenuItem
+            </MenuItem>
-            onClick={async () => {
+            <MenuItem
-              setCaptureType('video')
+              onClick={async () => {
-              setIsMenuOpen(false)
+                setCaptureType('video')
-            }}
+                setIsMenuOpen(false)
-          >
+              }}
-            <Icon type="camera" className="mr-2" />
+            >
-            Record video
+              <Icon type="camera" className="mr-2" />
-          </MenuItem>
+              Record video
-        </Menu>
+            </MenuItem>
-      </Popover>
+          </Menu>
+        </Popover>
+      )}
       <ModalOverlay isOpen={captureType === 'photo'} close={closeCaptureModal}>
         <PhotoCaptureModal filesController={filesController} close={closeCaptureModal} />
       </ModalOverlay>

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"

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)
         }}

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
+      <Popover title="File options" togglePopover={toggleMenu} anchorElement={buttonRef} open={isOpen} className="py-2">
-        title="File options"
-        togglePopover={toggleMenu}
-        anchorElement={buttonRef.current}
-        open={isOpen}
-        className="py-2"
-      >
         <Menu a11yLabel="File options panel" isOpen={isOpen}>
           <FileMenuOptions
             selectedFiles={itemListController.selectedFiles}

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"

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"
               >

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"

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"

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"

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"
       >

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"

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)}

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"

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"

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"

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"

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"
       >

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
       >

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, useId, useMemo, useState } from 'react'
-import { createContext, useCallback, useContext, useEffect, useMemo, useRef, 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>
   )
 }

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) {
+            if (resolvedAnchorElement) {
-              anchorElement.focus()
+              resolvedAnchorElement.focus()
             }
           }
         }}

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

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"

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"

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"

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"

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'}

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"