Collapsed and mobile sidebar exposes unnamed icon-only buttons

[Vonng]

Environment

• SILO Console v2.0.0 at b952a1202869b89e5cc7b821a0b5651f74e09d08
• Chrome desktop with the sidebar manually collapsed, and mobile layout where the sidebar auto-collapses
• Tested against m.pigsty on 2026-08-05

Reproduction

1. Sign in as an administrator so all navigation groups are available.
2. Collapse the left sidebar, or use a narrow viewport.
3. Inspect the accessibility tree and tab through the navigation controls.

Actual result

The expanded sidebar exposes useful names such as Buckets, Policies, Identity, Monitoring, Tools, and their child entries. In collapsed mode the Chrome accessibility tree contains roughly twenty visible button nodes with an empty accessible name. Only a few controls, such as Access Keys and Open help, retain a usable name.

The result is ambiguous keyboard focus and effectively undiscoverable navigation for screen-reader users. Visual tooltips are not a substitute for an accessible name.

MenuWrapper.tsx delegates the menu to MDS and enables collapsed tooltips for a few end items at lines 140-163, but the accessible label must survive for every rendered icon button.

Expected result

Hiding visible text must not remove the control's accessible name.

Acceptance criteria

• Every collapsed/mobile navigation button has a stable aria-label (or equivalent accessible name) derived from its expanded label.
• The collapse/expand toggle itself is named and exposes its state with aria-expanded.
• Keyboard focus remains visible and follows a logical order.
• Tooltips/title text may supplement, but not replace, the accessible name.
• Add an automated accessibility assertion equivalent to axe button-name for expanded, collapsed, and mobile states.

[Vonng]

Fixed in v2.1.0 — 85fc0c6.

Resolution

The accessible names were not missing — they were being destroyed. MDS collapses the sidebar by hiding .labelContainer, and a display-hidden label is removed from the accessibility tree, which is why roughly twenty buttons ended up with an empty accessible name. The fix keeps the label in the tree and only removes it visually:

"&.collapsed .labelContainer": {
  display: "block",
  position: "absolute",
  width: 1, height: 1,
  padding: 0, margin: -1,
  overflow: "hidden",
  clip: "rect(0, 0, 0, 0)",
  clipPath: "inset(50%)",
  whiteSpace: "nowrap",
  border: 0,
},

This is preferable to injecting aria-label per item: the name stays derived from the same expanded label, so it cannot drift, and it localizes for free with the new i18n layer.

The collapse/expand control itself was a bare div with no role, no name, and no keyboard path. A useLayoutEffect promotes it to a real control and keeps its state in sync:

menuToggle.setAttribute("role", "button");
menuToggle.setAttribute("tabindex", "0");
menuToggle.setAttribute("aria-label", sidebarOpen ? t("Collapse menu") : t("Expand menu"));
menuToggle.setAttribute("aria-expanded", String(sidebarOpen));
menuToggle.addEventListener("keydown", handleKeyDown); // Enter and Space

plus a :focus-visible outline so keyboard focus is actually visible on it.

Coverage

web-app/tests/permissions-3/menuAccessibility.ts asserts the equivalent of axe button-name directly: it enumerates every visible button, a, and [role="button"] inside .menuBox, filters out anything with an aria-label, aria-labelledby, or non-empty innerText, and requires the remainder to be []. That assertion runs in all three states the issue named — expanded, collapsed (toggled via keyboard), and mobile (390 × 844, auto-collapsed).

The same test walks the tab order (toggle → menu-create-bucket), checks the focus outline is not none, and drives the toggle with both Enter and Space, verifying aria-label and aria-expanded flip in each direction.

Acceptance criteria

• Every collapsed/mobile navigation button has a stable accessible name derived from its expanded label
• The collapse/expand toggle is named and exposes aria-expanded
• Keyboard focus is visible and follows a logical order
• Accessible names come from real text content, not tooltips
• Automated button-name-equivalent assertion for expanded, collapsed, and mobile states

Closing as fixed in v2.1.0.