Daily Accessibility ReviewCluster Search Clear Button Not Keyboard Accessible

[github-actions[bot]]

Problem

In shell/components/nav/TopLevelMenu.vue, the cluster search filter has a "clear" icon (<i class="icon icon-close">) that responds to click events but is not keyboard accessible and has no accessible name:

<!-- shell/components/nav/TopLevelMenu.vue, lines 638–642 -->
<i
  v-if="clusterFilter"
  class="icon icon-close"
  `@click`="clusterFilter=''"
/>

Issues:

• <i> is not a focusable element — it cannot be reached by Tab key navigation
• No tabindex attribute
• No role="button"
• No aria-label — screen readers will not announce the purpose of this element
• No @keyup.enter or @keyup.space handler

Users who rely solely on a keyboard or switch device cannot clear the cluster search filter. Screen reader users receive no indication that a "clear" action exists.

WCAG 2.2 References

WCAG 2.2 § 2.1.1 – Keyboard (Level A)

All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes.

The "clear cluster filter" action is only operable via mouse pointer.

WCAG 2.2 § 4.1.2 – Name, Role, Value (Level A)

For all user interface components: the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set.

An interactive element with no role and no accessible name fails this criterion.

Suggested Fix

Replace the <i> with a <button> element (semantically correct for an action that does not navigate):

<button
  v-if="clusterFilter"
  class="icon icon-close cluster-filter-clear"
  :aria-label="t('nav.search.clearFilter')"
  `@click`="clusterFilter=''"
/>

Or, keep the <i> but add the required accessibility attributes:

<i
  v-if="clusterFilter"
  class="icon icon-close"
  tabindex="0"
  role="button"
  :aria-label="t('nav.search.clearFilter')"
  `@click`="clusterFilter=''"
  `@keyup`.enter="clusterFilter=''"
  `@keyup`.space.prevent="clusterFilter=''"
/>

The i18n key nav.search.clearFilter (e.g., "Clear cluster search filter") should be added to the translation files.

Generated by Daily Accessibility Review · ● 1.6M · ◷

• expires on Jun 1, 2026, 8:48 AM UTC