Skip to content

A11y: Missing toggled state information for ButtonTogglePanel #1617

New issue
New issue
Open
#1634
Open
A11y: Missing toggled state information for ButtonTogglePanel#1617
#1634
Assignees
Ovgodd
Labels
accessibility
@rvveber

Description

@rvveber
rvveber
opened on Nov 17, 2025

docs/src/frontend/apps/impress/src/features/header/components/ButtonTogglePanel.tsx

Lines 7 to 27 in a4e3168

export const ButtonTogglePanel = () => {
const { t } = useTranslation();
const { isPanelOpen, togglePanel } = useLeftPanelStore();
return (
<Button
size="medium"
onClick={() => togglePanel()}
aria-label={t('Open the header menu')}
color="tertiary-text"
icon={
<Icon
$variation="800"
$theme="primary"
iconName={isPanelOpen ? 'close' : 'menu'}
/>
}
className="--docs--button-toggle-panel"
/>
);
};

  • Problem: The toggle button always announces “Open the header menu,” never updates based on isPanelOpen, lacks aria-expanded/aria-pressed, and doesn’t reference the controlled panel.
  • Impact: Screen-reader users cannot tell whether the panel is open or closed or whether activating the control will open or close it.
  • Acceptance criteria / fix ideas:
    • Update the label text depending on isPanelOpen (e.g., “Open…” vs “Close…”).
    • Add aria-expanded={isPanelOpen} (and optionally aria-controls pointing to the panel container) or make it a proper toggle with aria-pressed.

Metadata

Metadata

Assignees

Labels

accessibility

Type

No type

Projects

LaSuite Docs

Status

No status

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions