Daily Accessibility ReviewIcon-only button has no accessible name in SortableTable column options

[github-actions[bot]]

Accessibility Issue: Icon-Only Button Missing Accessible Name in SortableTable

Description

In shell/components/SortableTable/THead.vue, the table column options toggle button contains only an icon element (<i class="icon icon-actions" />). It has no aria-label, title, or visible text to provide an accessible name. Screen reader users will hear this announced as an unlabeled or generic button, with no indication of its purpose.

Additionally, the aria-expanded attribute is hardcoded to "false" rather than being dynamically bound to the actual open/closed state, meaning screen readers will always report the menu as collapsed even when it is open.

WCAG 2.2 Violations

• **[WCAG 4.1.2 Name, Role, Value (A)]((www.w3.org/redacted) User interface components must have names and roles that can be determined by assistive technology. A button with no accessible name violates this.
• **[WCAG 1.3.1 Info and Relationships (A)]((www.w3.org/redacted) The static aria-expanded="false" means the state of the control is not accurately exposed to assistive technology.

Code Snippet

File: shell/components/SortableTable/THead.vue (lines 308–316)

<button
  aria-haspopup="true"
  aria-expanded="false"       <!-- hardcoded — not dynamic -->
  type="button"
  class="btn btn-sm role-multi-action table-options-btn"
  `@click`="tableColsOptionsClick"
>
  <i class="icon icon-actions" />   <!-- no accessible name -->
</button>

Suggested Fix

Add an aria-label and dynamically bind aria-expanded to the component's reactive state:

<button
  aria-haspopup="true"
  :aria-expanded="tableColsOptionsVisibility ? 'true' : 'false'"
  type="button"
  :aria-label="t('sortableTable.tableHeader.columnOptions')"
  class="btn btn-sm role-multi-action table-options-btn"
  `@click`="tableColsOptionsClick"
>
  <i class="icon icon-actions" aria-hidden="true" />
</button>

Add the corresponding i18n key sortableTable.tableHeader.columnOptions (e.g. "Column options") to the locale files under shell/assets/translations/.

Generated by Daily Accessibility Review · ● 2.1M · ◷

• expires on Jun 4, 2026, 8:37 AM UTC

[github-actions[bot]]

This discussion was automatically closed because it expired on 2026-06-04T08:37:39.842Z.

Closed by Workflow