@stack-spot/portal-layout 0.0.11 → 0.0.12

package/src/LayoutOverlayManager.tsx

@@ -3,11 +3,12 @@
 import { Button } from '@citric/core'
 import { ReactElement, useLayoutEffect, useState } from 'react'
 import { Dialog, DialogOptions } from './components/Dialog'
-import { OverlayContent, OverlayContentProps } from './components/OverlayContent'
+import { CLOSE_OVERLAY_ID, OverlayContent, OverlayContentProps } from './components/OverlayContent'
 import { getDictionary } from './dictionary'
+import { LayoutElements, elementIds, getLayoutElements } from './elements'
 import { ElementNotFound, LayoutError } from './errors'
 import { showToaster as showReactToaster } from './toaster'
-import { valueOfLayoutVar } from './utils'
+import { focusFirstChild, valueOfLayoutVar } from './utils'
 
 interface AlertOptions extends Omit<DialogOptions, 'cancel'> {
   showButton?: boolean,
@@ -16,14 +17,6 @@ interface AlertOptions extends Omit<DialogOptions, 'cancel'> {
 type BottomDialogOptions = Omit<DialogOptions, 'title'>
 type OverlaySize = 'small' | 'medium' | 'large'
 type ModalSize = 'fit-content' | OverlaySize
-
-interface LayoutElements {
-  backdrop: HTMLElement | null,
-  modal: HTMLElement | null,
-  rightPanel: HTMLElement | null,
-  bottomDialog: HTMLElement | null,
-}
-
 type SetContentFn = ((content: ReactElement | undefined) => void) | undefined
 
 interface OverlayContentSetter {
@@ -42,11 +35,6 @@ interface CustomRightPanelOptions {
   onClose?: () => void,
 }
 
-const BACKDROP_ID = 'backdrop'
-const MODAL_ID = 'modal'
-const BOTTOM_DIALOG_ID = 'bottomDialog'
-const RIGHT_PANEL_ID = 'rightPanel'
-
 class LayoutOverlayManager {
   static readonly instance?: LayoutOverlayManager
   private setContent: OverlayContentSetter = {}
@@ -54,16 +42,20 @@ class LayoutOverlayManager {
   private onModalClose?: () => void
 
   private setupElements() {
-    this.elements = {
-      modal: document.getElementById(MODAL_ID),
-      backdrop: document.getElementById(BACKDROP_ID),
-      bottomDialog: document.getElementById(BOTTOM_DIALOG_ID),
-      rightPanel: document.getElementById(RIGHT_PANEL_ID),
-    }
+    this.elements = getLayoutElements()
     this.elements.backdrop?.addEventListener('click', (event) => {
       if (this.isModalOpen() && !this.elements?.modal?.contains?.(event.target as Node)) this.closeModal()
       if (this.isRightPanelOpen() && !this.elements?.rightPanel?.contains?.(event.target as Node)) this.closeRightPanel()
     })
+    this.elements.backdrop?.addEventListener('keydown', (event) => {
+      if (event.key !== 'Escape') return
+      if (this.isModalOpen()) this.closeModal()
+      if (this.isRightPanelOpen()) this.closeRightPanel()
+      event.preventDefault()
+    })
+    this.setInteractivity(this.elements?.modal, false)
+    this.setInteractivity(this.elements?.rightPanel, false)
+    this.setInteractivity(this.elements?.bottomDialog, false)
   }
 
   // this should actually be like Kotlin's "internal", i.e. private to any user of the lib, but public to the lib itself.
@@ -81,6 +73,38 @@ class LayoutOverlayManager {
     return { modal, rightPanel, bottomDialog }
   }
 
+  private setInteractivity(element: HTMLElement | null | undefined, interactive: boolean) {
+    if (interactive) {
+      element?.removeAttribute('inert')
+      element?.removeAttribute('aria-hidden')
+    } else {
+      element?.setAttribute('aria-hidden', '')
+      element?.setAttribute('inert', '')
+    }
+  }
+
+  private setMainContentInteractivity(interactive: boolean) {
+    this.setInteractivity(this.elements?.page, interactive)
+    this.setInteractivity(this.elements?.header, interactive)
+    this.setInteractivity(this.elements?.menu, interactive)
+  }
+
+  private showOverlay(element: HTMLElement | null | undefined, extraClasses: string[] = []) {
+    element?.classList.add('visible', ...extraClasses)
+    this.setInteractivity(element, true)
+    this.setMainContentInteractivity(false)
+    setTimeout(() => focusFirstChild(
+      element,
+      { priority: [['input', 'textarea', 'select', 'other', 'button']], ignore: `#${CLOSE_OVERLAY_ID}` },
+    ), 50)
+  }
+
+  private hideOverlay(element: HTMLElement | null | undefined) {
+    element?.setAttribute('class', '')
+    this.setInteractivity(element, false)
+    this.setMainContentInteractivity(true)
+  }
+
   isModalOpen() {
     return this.elements?.modal?.classList.contains('visible') ?? false
   }
@@ -94,12 +118,12 @@ class LayoutOverlayManager {
   }
 
   showCustomModal(content: React.ReactElement, { size = 'medium', onClose }: CustomModalOptions = {}) {
-    if (!this.elements?.modal) throw new ElementNotFound('modal', MODAL_ID)
+    if (!this.elements?.modal) throw new ElementNotFound('modal', elementIds.modal)
     if (!this.setContent.modal) throw new LayoutError('unable to show modal, because it has not been setup yet.')
     this.onModalClose = onClose
     this.setContent.modal(content)
     this.elements.backdrop?.setAttribute('class', 'visible')
-    this.elements.modal.setAttribute('class', `visible ${size}`)
+    this.showOverlay(this.elements.modal, [size])
   }
 
   showModal({ size, ...props }: OverlayContentProps & { size?: ModalSize }) {
@@ -138,7 +162,7 @@ class LayoutOverlayManager {
   }
 
   showBottomDialog({ message, cancel, confirm }: BottomDialogOptions): Promise<boolean> {
-    if (!this.elements?.bottomDialog) throw new ElementNotFound('bottom dialog', BOTTOM_DIALOG_ID)
+    if (!this.elements?.bottomDialog) throw new ElementNotFound('bottom dialog', elementIds.bottomDialog)
     if (!this.setContent.bottomDialog) throw new LayoutError('unable to show bottom dialog, because it has not been setup yet.')
     return new Promise((resolve) => {
       this.setContent.bottomDialog?.(
@@ -150,19 +174,19 @@ class LayoutOverlayManager {
           </div>
         </>,
       )
-      this.elements?.bottomDialog?.setAttribute('class', 'visible')
+      this.showOverlay(this.elements?.bottomDialog)
     })
   }
 
   showCustomRightPanel(content: ReactElement, { size = 'medium', onClose }: CustomRightPanelOptions = {}) {
-    if (!this.elements?.rightPanel) throw new ElementNotFound('right panel overlay', RIGHT_PANEL_ID)
+    if (!this.elements?.rightPanel) throw new ElementNotFound('right panel overlay', elementIds.rightPanel)
     if (!this.setContent.rightPanel) throw new LayoutError('unable to show right panel overlay, because it has not been setup yet.')
     this.onModalClose = onClose
     this.setContent.rightPanel(content)
     this.elements?.rightPanel.classList.add(size)
     setTimeout(() => {
       this.elements?.backdrop?.setAttribute('class', 'visible')
-      this.elements?.rightPanel?.classList?.add('visible')
+      this.showOverlay(this.elements?.rightPanel)
     })
   }
 
@@ -183,7 +207,7 @@ class LayoutOverlayManager {
     setTimeout(
       () => {
         if (this.setContent.modal) this.setContent.modal(undefined)
-        this.elements?.modal?.setAttribute('class', '')
+        this.hideOverlay(this.elements?.modal)
       },
       parseFloat(valueOfLayoutVar('--modal-animation-duration')) * 1000,
     )
@@ -199,14 +223,14 @@ class LayoutOverlayManager {
     setTimeout(
       () => {
         if (this.setContent.rightPanel) this.setContent.rightPanel(undefined)
-        this.elements?.rightPanel?.removeAttribute('class')
+        this.hideOverlay(this.elements?.rightPanel)
       },
       parseFloat(valueOfLayoutVar('--right-panel-animation-duration')) * 1000,
     )
   }
 
   closeBottomDialog() {
-    this.elements?.bottomDialog?.setAttribute('class', '')
+    this.hideOverlay(this.elements?.bottomDialog)
   }
 
   isInsideModal(element: HTMLElement) {

package/src/components/OverlayContent.tsx

@@ -6,6 +6,8 @@ import { ReactNode } from 'react'
 import { styled } from 'styled-components'
 import { useDictionary } from '../dictionary'
 
+export const CLOSE_OVERLAY_ID = 'close-overlay'
+
 export interface OverlayContentProps extends WithStyle {
   title: string,
   subtitle?: string,
@@ -48,7 +50,7 @@ export const OverlayContent = ({ children, title, subtitle, className, style, on
           <Text appearance={type === 'modal' ? 'h3' : 'h4'}>{title}</Text>
           {subtitle && <Text appearance="body2" colorScheme="light.700">{subtitle}</Text>}
         </Flex>
-        <IconButton onClick={onClose} title={t.close} aria-label={t.close}><TimesMini /></IconButton>
+        <IconButton onClick={onClose} title={t.close} aria-label={t.close} id={CLOSE_OVERLAY_ID}><TimesMini /></IconButton>
       </header>
       {children}
     </ContentBox>

package/src/components/SelectionList.tsx

@@ -2,6 +2,7 @@ import { Flex, IconBox, Text } from '@citric/core'
 import { ArrowLeft, Check, ChevronRight } from '@citric/icons'
 import { IconButton } from '@citric/ui'
 import { WithStyle, listToClass, theme } from '@stack-spot/portal-theme'
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { ReactElement, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { styled } from 'styled-components'
 import { Action } from './types'
@@ -39,8 +40,10 @@ interface CurrentItemList {
 }
 
 const ANIMATION_DURATION_MS = 300
+const MAX_HEIGHT_TRANSITION = `max-height ease-in ${ANIMATION_DURATION_MS / 1000}s`
 
 export interface SelectionListProps extends WithStyle {
+  id?: string,
   visible?: boolean,
   items: ListItem[],
   onHide?: () => void,
@@ -50,14 +53,21 @@ export interface SelectionListProps extends WithStyle {
   scroll?: boolean,
 }
 
+interface RenderOptions {
+  setCurrent: (current: CurrentItemList) => void,
+  controllerId?: string,
+  onClose?: () => void,
+}
+
 const SelectionBox = styled.div<{ $maxHeight: string, $scroll?: boolean }>`
   max-height: 0;
   overflow-y: ${({ $scroll }) => $scroll ? 'auto' : 'hidden'};
   overflow-x: hidden;
-  transition: max-height ease-in ${ANIMATION_DURATION_MS / 1000}s;
+  transition: ${MAX_HEIGHT_TRANSITION}, visibility 0s ${ANIMATION_DURATION_MS / 1000}s;
   z-index: 1;
   box-shadow: 4px 4px 48px #000;
   border-radius: 0.5rem;
+  visibility: hidden;
 
   .selection-list-content {
     display: flex;
@@ -80,7 +90,7 @@ const SelectionBox = styled.div<{ $maxHeight: string, $scroll?: boolean }>`
   li > a {
     gap: 4px;
     transition: background-color 0.2s;
-    &:hover {
+    &:hover, &:focus {
       background: ${theme.color.light['400']};
     }
     .label {
@@ -100,13 +110,20 @@ const SelectionBox = styled.div<{ $maxHeight: string, $scroll?: boolean }>`
 
   &.visible {
     max-height: ${({ $maxHeight }) => $maxHeight};
+    visibility: visible;
+    transition: ${MAX_HEIGHT_TRANSITION};
   }
 `
 
-function renderAction({ label, href, onClick, icon, iconRight, active }: ListAction) {
+function renderAction({ label, href, onClick, icon, iconRight, active }: ListAction, { onClose }: RenderOptions) {
+  function handleClick() {
+    onClick?.()
+    onClose?.()
+  }
+
   return (
     <li key={label} className="action">
-      <a href={href} onClick={onClick}>
+      <a href={href} onClick={handleClick} tabIndex={0}>
         {icon && <IconBox>{icon}</IconBox>}
         <Text appearance="body2" className="label">{label}</Text>
         {iconRight && <IconBox>{iconRight}</IconBox>}
@@ -116,10 +133,15 @@ function renderAction({ label, href, onClick, icon, iconRight, active }: ListAct
   )
 }
 
-function renderCollapsible({ label, icon, iconRight, children }: ListCollapsible, setCurrent: (current: CurrentItemList) => void) {
+function renderCollapsible({ label, icon, iconRight, children }: ListCollapsible, { setCurrent, controllerId }: RenderOptions) {
+  function handleClick(ev: React.MouseEvent) {
+    // accessibility: this will tell the screen reader the section was expanded before this link is removed from the DOM.
+    (ev.target as HTMLElement)?.setAttribute?.('aria-expanded', 'true')
+    setCurrent({ items: children, label })
+  }
   return (
     <li key={label} className="collapsible">
-      <a onClick={() => setCurrent({ items: children, label })}>
+      <a onClick={handleClick} tabIndex={0} aria-expanded={false} aria-controls={controllerId}>
         {icon && <IconBox>{icon}</IconBox>}
         <Text appearance="body2" className="label">{label}</Text>
         {iconRight && <IconBox>{iconRight}</IconBox>}
@@ -129,68 +151,120 @@ function renderCollapsible({ label, icon, iconRight, children }: ListCollapsible
   )
 }
 
-function renderSection({ label, children }: ListSection, setCurrent: (current: CurrentItemList) => void) {
+function renderSection({ label, children }: ListSection, options: RenderOptions) {
   return (
     <li key={label ?? children.map(c => c.label).join('-')} className="section">
       {label && <Text appearance="overheader2" colorScheme="primary" className="section-title">{label}</Text>}
-      <ul>{children.map(i => renderItem(i, setCurrent))}</ul>
+      <ul>{children.map(i => renderItem(i, options))}</ul>
     </li>
   )
 }
 
-function renderItem(item: ListItem, setCurrent: (current: CurrentItemList) => void) {
+function renderItem(item: ListItem, options: RenderOptions) {
   if ('children' in item) {
-    return item.type === 'section' ? renderSection(item, setCurrent) : renderCollapsible(item, setCurrent)
+    return item.type === 'section' ? renderSection(item, options) : renderCollapsible(item, options)
   }
-  return renderAction(item)
+  return renderAction(item, options)
 }
 
 export const SelectionList = ({
-  items, className, style, visible = true, maxHeight = '300px', onHide, before, after, scroll,
+  id, items, className, style, visible = true, maxHeight = '300px', onHide, before, after, scroll,
 }: SelectionListProps) => {
+  const t = useTranslate(dictionary)
   const wrapper = useRef<HTMLDivElement>(null)
-  const itemsRef = useRef(items)
   const [current, setCurrent] = useState<CurrentItemList>({ items })
+
   const listItems = useMemo(
-    () => current.items.map(i => renderItem(i, (next: CurrentItemList) => setCurrent({ ...next, parent: current }))),
+    () => current.items.map(i => renderItem(
+      i,
+      {
+        setCurrent: (next: CurrentItemList) => setCurrent({ ...next, parent: current }),
+        onClose: onHide,
+        controllerId: id,
+      },
+    )),
     [current],
   )
-  const hide = useCallback((event: MouseEvent) => {
+
+  const keyboardControls = useCallback((event: KeyboardEvent) => {
+    const target = event?.target as HTMLElement | null
+
+    function getSelectableAnchors() {
+      return wrapper.current?.querySelectorAll('li.action a, li.collapsible a, button') ?? []
+    }
+
+    function handleArrows() {
+      const anchors = getSelectableAnchors()
+      let i = 0
+      while (i < anchors.length && document.activeElement !== anchors[i]) i++
+      const next: any = event.key === 'ArrowDown' ? (anchors[i + 1] ?? anchors[0]) : (anchors[i - 1] ?? anchors[anchors.length - 1])
+      next?.focus?.()
+    }
+
+    const handlers: Record<string, (() => void) | undefined> = {
+      Escape: () => {
+        onHide?.()
+        event.stopPropagation()
+        event.preventDefault()
+      },
+      Enter: () => target?.click(),
+      Tab: () => {
+        const anchors = getSelectableAnchors()
+        if (document.activeElement === anchors[anchors.length - 1]) onHide?.()
+      },
+      ArrowUp: handleArrows,
+      ArrowDown: handleArrows,
+    }
+
+    handlers[event.key]?.()
+  }, [])
+
+  const hide = useCallback((event: Event) => {
     const target = (event.target as HTMLElement | null)
     // if the element is not in the DOM anymore, we'll consider the click was inside the selection list
     const isClickInsideSelectionList = !target?.isConnected || wrapper.current?.contains(target)
     const isAction = target?.classList?.contains('action') || !!target?.closest('.action')
-    if (!isClickInsideSelectionList || isAction) {
-      if (onHide) onHide()
-      setTimeout(() => setCurrent({ items: itemsRef.current }), ANIMATION_DURATION_MS)
-      document.removeEventListener('click', hide)
-    }
+    if (!isClickInsideSelectionList || isAction) onHide?.()
   }, [])
 
   useEffect(() => {
-    if (!onHide) return
-    if (visible) setTimeout(() => document.addEventListener('click', hide), 50)
+    if (visible) {
+      setCurrent({ items })
+      document.addEventListener('keydown', keyboardControls)
+      if (onHide) setTimeout(() => document.addEventListener('click', hide), 50)
+    }
+    else {
+      document.removeEventListener('keydown', keyboardControls)
+      document.removeEventListener('click', hide)
+    }
   }, [visible])
 
-  useEffect(() => {
-    itemsRef.current = items
-    if (!wrapper.current?.classList.contains('visible')) setCurrent({ items })
-  }, [items])
-
   return (
     <SelectionBox
+      id={id}
       ref={wrapper}
       $maxHeight={maxHeight}
       style={style}
       className={listToClass(['selection-list', visible ? 'visible' : undefined, className])}
       $scroll={scroll}
+      aria-hidden={!visible}
     >
       <div className="selection-list-content">
         {before}
         {current.parent
           ? (
             <Flex mt={5} mb={1} alignItems="center">
-              <IconButton onClick={() => setCurrent(current.parent ?? { items })} sx={{ mr: 3 }}>
+              <IconButton
+                onClick={(ev) => {
+                  // accessibility: this will tell the screen reader the section was collapsed before this button is removed from the DOM.
+                  (ev.target as HTMLElement)?.setAttribute?.('aria-expanded', 'false')
+                  setCurrent(current.parent ?? { items })
+                }}
+                sx={{ mr: 3 }}
+                title={t.back}
+                aria-controls={id}
+                aria-expanded={true}
+              >
                 <ArrowLeft />
               </IconButton>
               <Text appearance="microtext1">{current.label}</Text>
@@ -204,3 +278,12 @@ export const SelectionList = ({
     </SelectionBox>
   )
 }
+
+const dictionary = {
+  en: {
+    back: 'Go back',
+  },
+  pt: {
+    back: 'Voltar',
+  },
+} satisfies Dictionary

package/src/components/UserMenu.tsx

@@ -2,6 +2,7 @@ import { Flex, IconBox, LinkBox, Text } from '@citric/core'
 import { ChevronDown } from '@citric/icons'
 import { Avatar } from '@citric/ui'
 import { theme } from '@stack-spot/portal-theme'
+import { Dictionary, interpolate, useTranslate } from '@stack-spot/portal-translate'
 import { useState } from 'react'
 import { styled } from 'styled-components'
 import { SelectionList, SelectionListProps } from './SelectionList'
@@ -12,6 +13,8 @@ interface Props {
   options?: SelectionListProps['items'],
 }
 
+const USER_MENU_ID = 'userMenu'
+
 const UserMenuBox = styled.div`
   .user-menu-header {
     display: flex;
@@ -38,7 +41,7 @@ const UserMenuBox = styled.div`
       margin: 8px 0;
       & > a {
         border-radius: 6px;
-        &:hover {
+        &:hover, &:focus {
           background: ${theme.color.light['500']};
         }
       }
@@ -63,13 +66,20 @@ const UserMenuHeader = ({ userName, email }: Omit<Props, 'options'>) => (
 )
 
 export const UserMenu = ({ userName, email, options }: Props) => {
+  const t = useTranslate(dictionary)
   const [visible, setVisible] = useState(false)
 
   return (
     <UserMenuBox>
-      <LinkBox as="button" onClick={() => setVisible(true)}>
+      <LinkBox
+        as="button"
+        onClick={() => setVisible(v => !v)}
+        aria-controls={USER_MENU_ID}
+        aria-expanded={visible}
+        aria-label={interpolate(t.accountMenu, [userName])}
+      >
         <Flex alignItems="center">
-          <Avatar size="xs">{userName}</Avatar>
+          <Avatar size="xs" aria-label={interpolate(t.accountMenu, [userName])}>{userName}</Avatar>
           <IconBox colorScheme="inverse" className="chevron" style={visible ? { transform: 'rotate(180deg)' } : undefined}>
             <ChevronDown />
           </IconBox>
@@ -78,6 +88,7 @@ export const UserMenu = ({ userName, email, options }: Props) => {
 
       {options?.length
         ? <SelectionList
+          id={USER_MENU_ID}
           visible={visible}
           before={<UserMenuHeader userName={userName} email={email} />}
           items={options!}
@@ -89,3 +100,12 @@ export const UserMenu = ({ userName, email, options }: Props) => {
     </UserMenuBox>
   )
 }
+
+const dictionary = {
+  en: {
+    accountMenu: 'Profile menu of $0',
+  },
+  pt: {
+    accountMenu: 'Menu do perfil $0',
+  },
+} satisfies Dictionary

package/src/components/menu/MenuContent.tsx

@@ -23,6 +23,8 @@ const MenuGroup = styled.ul`
   padding: 0 0 0 16px;
   display: flex;
   flex-direction: column;
+  visibility: hidden;
+  transition: visibility 0s 0.3s;
 
   &.no-indentation {
     padding: 0;
@@ -50,12 +52,9 @@ const MenuGroup = styled.ul`
     position: relative;
     height: 0;
     overflow: hidden;
-    /* display: flex; */
-    /* align-items: center; */
     transition: height 0.3s, background-color 0.2s;
     margin: 0 ${PADDING - ITEM_PADDING}px;
     border-radius: 4px;
-    /* justify-content: space-between; */
     padding: 0 ${ITEM_PADDING}px;
 
     &:hover {
@@ -95,8 +94,12 @@ const MenuGroup = styled.ul`
     }
   }
 
-  &.open > li > a {
-    height: 40px;
+  &.open {
+    visibility: visible;
+    transition: unset;
+    & > li > a {
+      height: 40px;
+    }
   }
 
   &:not(.open) &.open > li > a {
@@ -148,16 +151,24 @@ const ActionItem = ({ label, onClick, href, active, icon, badge, overflow = 'wra
 const CollapsibleGroupItem = ({ label, open: initiallyOpened, children, icon, badge, overflow = 'wrap' }: ItemGroup) => {
   const [open, setOpen] = useState(initiallyOpened ?? children?.some(c => 'active' in c && c.active) ?? false)
   const items = useMemo(() => children?.map(renderOption), [children])
+  const id = `menuGroup${label}`
 
   return (
     <>
-      <a onClick={() => setOpen(!open)} className="item-row">
+      <a
+        onClick={() => setOpen(!open)}
+        onKeyDown={e => e.key === 'Enter' && setOpen(!open)}
+        className="item-row"
+        tabIndex={0}
+        aria-controls={id}
+        aria-expanded={open}
+      >
         {icon}
         <Text appearance="body2" className={`label ${overflow}`}>{label}</Text>
         {badge}
         <IconBox><ChevronDown className={listToClass(['chevron', open ? 'open' : ''])} /></IconBox>
       </a>
-      <MenuGroup className={open ? 'open' : undefined}>{items}</MenuGroup>
+      <MenuGroup id={id} className={open ? 'open' : undefined} aria-hidden={!open}>{items}</MenuGroup>
     </>
   )
 }

package/src/components/menu/MenuSections.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import { IconBox, Text } from '@citric/core'
 import { ChevronLeft, Menu as MenuIcon } from '@citric/icons'
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { useCallback, useMemo, useState } from 'react'
 import { MenuContent } from './MenuContent'
 import { MenuProps, MenuSection } from './types'
@@ -84,6 +85,8 @@ const Section = ({
         onClick={click}
         onMouseEnter={showOverlayAndFixArrowPosition}
         onMouseLeave={() => shouldShowOverlay() && hideOverlay()}
+        title={label}
+        aria-label={label}
       >
         {icon}
         <Text appearance="microtext1" className="section-label">{label}</Text>
@@ -98,6 +101,7 @@ const OverlayRenderer = ({ content }: Pick<MenuSection, 'content'>) => {
 }
 
 export const MenuSections = ({ sections = [], ...props }: MenuProps) => {
+  const t = useTranslate(dictionary)
   // this is a mock state only used to force an update on the component.
   const [_, setUpdate] = useState(0)
   const toggleMenu = useCallback(() => {
@@ -134,7 +138,7 @@ export const MenuSections = ({ sections = [], ...props }: MenuProps) => {
   return (
     <>
       <ul>{sectionItems}</ul>
-      {!!props.content && <button className="toggle" onClick={toggleMenu} title="Toggle menu panel visibility">
+      {!!props.content && <button className="toggle" onClick={toggleMenu} title={t.toggle}>
         <IconBox>
           <MenuIcon className="expand" />
           <ChevronLeft className="collapse" />
@@ -147,3 +151,12 @@ export const MenuSections = ({ sections = [], ...props }: MenuProps) => {
     </>
   )
 }
+
+const dictionary = {
+  en: {
+    toggle: 'Show or hide the menu',
+  },
+  pt: {
+    toggle: 'Visualizar ou esconder o menu',
+  },
+} satisfies Dictionary

package/src/components/menu/PageSelector.tsx

@@ -2,7 +2,8 @@ import { IconBox, Text } from '@citric/core'
 import { ArrowRight, Select } from '@citric/icons'
 import { LoadingCircular } from '@citric/ui'
 import { theme } from '@stack-spot/portal-theme'
-import { useMemo, useState } from 'react'
+import { Dictionary, interpolate, useTranslate } from '@stack-spot/portal-translate'
+import { useMemo, useRef, useState } from 'react'
 import { styled } from 'styled-components'
 import { ListAction, SelectionList } from '../SelectionList'
 import { MENU_CONTENT_PADDING as PADDING } from './constants'
@@ -76,7 +77,9 @@ const SelectorBox = styled.div`
 `
 
 export const PageSelector = ({ options, value, button, loading, title }: Selector) => {
+  const t = useTranslate(dictionary)
   const [visible, setVisible] = useState(false)
+  const id = useRef(`pageSelector${title || Math.random()}`)
   const { optionsWithIcon, selected } = useMemo(
     () => {
       let selected = options[0]
@@ -100,13 +103,22 @@ export const PageSelector = ({ options, value, button, loading, title }: Selecto
         : (
           <>
             {title && <Text colorScheme="light.700" sx={{ mb: 3 }}>{title}</Text>}
-            <a onClick={() => setVisible(true)} aria-label={value}>
+            <a
+              onClick={() => setVisible(true)}
+              onKeyDown={e => e.key === 'Enter' && setVisible(true)}
+              title={value}
+              tabIndex={0}
+              aria-label={interpolate(t.accessibility, [value])}
+              aria-expanded={visible}
+              aria-controls={id.current}
+            >
               {selected?.icon && <IconBox>{selected?.icon}</IconBox>}
               <Text appearance="body2" className="label">{selected?.label ?? button?.label ?? value}</Text>
               <IconBox size="xs"><Select /></IconBox>
             </a>
 
             <SelectionList
+              id={id.current}
               visible={visible}
               items={optionsWithIcon}
               onHide={() => setVisible(false)}
@@ -119,3 +131,13 @@ export const PageSelector = ({ options, value, button, loading, title }: Selecto
     </SelectorBox>
   )
 }
+
+const dictionary = {
+  en: {
+    accessibility: 'Current value: $0. Press Enter to change.',
+  },
+  pt: {
+    accessibility: 'Valor atual: $0. Aperte Enter para mudar.',
+  },
+} satisfies Dictionary
+