upstreamable: frontend: Table: Implement keyboard accessible column selector in ColumnVisibilityButton by sniok · Pull Request #316 · Azure/aks-desktop

sniok · 2026-02-24T22:22:12Z

Fixes #309

[Accessibility team] Show/Hide Columns button controls are not accessible using keyboard in A11yCluster tab #309

The built-in MRT_ShowHideColumnsButton renders column visibility toggles using FormControlLabel with Switch wrapped inside Tooltip, which breaks keyboard navigation. The menu items don't respond to Enter/Space and the Hide All/Show All buttons are unreachable via arrow keys.

Changes

Add a custom ColumnVisibilityButton component that replaces MRT's built-in column visibility menu with fully keyboard-accessible MenuItem elements
Override renderToolbarInternalActions in Table.tsx to render our custom button alongside MRT's filter toggle buttons
All menu items (Hide All, Show All, individual column toggles) are navigable via arrow keys and activatable via Enter/Space

How to test:

Find any resourcetable (clusters/resources)
Navigate with keyboard to "Show/Hide column"
Ensure every item is accessible with keyboard (space/enter to open popup, arrow keys to navigate, space/enter to select column)

Copilot

Pull request overview

This PR addresses keyboard accessibility gaps in the table column visibility UI by replacing Material React Table’s built-in “Show/Hide Columns” menu with a custom, keyboard-navigable implementation and wiring it into the shared Table wrapper.

Changes:

Added a custom ColumnVisibilityButton that renders column visibility controls as MenuItems for proper arrow-key navigation and Enter/Space activation.
Updated Table.tsx to render MRT’s filter toggle buttons and the new column visibility button via renderToolbarInternalActions.
Preserved row-selection toolbar rendering when rows are selected.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

File	Description
frontend/src/components/common/Table/Table.tsx	Hooks custom toolbar internal actions into the shared table wrapper and renders accessible filter/column-visibility controls.
frontend/src/components/common/Table/ColumnVisibilityButton.tsx	New accessible column visibility menu implementation using MUI `Menu`/`MenuItem` interactions.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

frontend/src/components/common/Table/ColumnVisibilityButton.tsx

skoeva

looks like some of the snapshots are outdated

Copilot

Pull request overview

Copilot reviewed 138 out of 138 changed files in this pull request and generated 3 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-02-26T11:01:27Z

frontend/src/components/common/Table/Table.tsx

+        initialState: initState,
+      } = tbl.options;
+
+      return (
+        <>
+          {enableFilters && enableGlobalFilter && !initState?.showGlobalFilter && (


MRT_ToggleGlobalFilterButton is only rendered when !initState?.showGlobalFilter. If a table sets initialState.showGlobalFilter = true (e.g., when a default global filter is provided), the toggle button disappears entirely and users cannot hide/show the global filter via the toolbar. Consider rendering the toggle whenever enableGlobalFilter is true (or basing the condition on current table state rather than initialState).

Suggested change

initialState: initState,

} = tbl.options;

return (

<>

{enableFilters && enableGlobalFilter && !initState?.showGlobalFilter && (

} = tbl.options;

return (

<>

{enableFilters && enableGlobalFilter && (

Copilot · 2026-02-26T11:01:28Z

frontend/src/components/common/Table/ColumnVisibilityButton.tsx

+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+  const menuId = 'column-visibility-menu';
+  const isOpen = !!anchorEl;
+  const {
+    icons: { ViewColumnIcon },
+    localization,
+  } = table.options;
+
+  const columns = table
+    .getAllLeafColumns()
+    .filter(
+      col =>
+        col.columnDef.enableHiding !== false &&
+        col.columnDef.visibleInShowHideMenu !== false &&
+        col.columnDef.columnDefType !== 'display'
+    );
+
+  const handleToggleAll = (visible: boolean) => {
+    columns.filter(col => col.getCanHide()).forEach(col => col.toggleVisibility(visible));
+  };
+
+  return (
+    <>
+      <Tooltip title={localization.showHideColumns}>
+        <IconButton
+          aria-label={localization.showHideColumns}
+          aria-haspopup="menu"
+          aria-expanded={isOpen}
+          aria-controls={isOpen ? menuId : undefined}


menuId is hard-coded to a constant string. If more than one table/ColumnVisibilityButton is rendered on the same page, this will produce duplicate element IDs and ambiguous aria-controls references, which is an accessibility issue. Use a per-instance id (e.g., React useId() or derive from a unique table identifier).

I guess two Table components can be shown at the same time, so this is valid.

const menuId = 'column-visibility-menu' + React.useId();

Copilot · 2026-02-26T11:01:28Z

frontend/src/components/common/Table/ColumnVisibilityButton.tsx

+        <MenuItem
+          disabled={!table.getIsSomeColumnsVisible()}
+          onClick={() => handleToggleAll(false)}
+        >
+          {localization.hideAll}
+        </MenuItem>
+        <MenuItem disabled={table.getIsAllColumnsVisible()} onClick={() => handleToggleAll(true)}>
+          {localization.showAll}
+        </MenuItem>


The disabled logic for Hide All / Show All uses table.getIsSomeColumnsVisible() and table.getIsAllColumnsVisible(), which considers all columns (including non-hideable/display columns). This can keep Hide All enabled (or Show All disabled) even when all columns in this menu are already hidden/visible. Consider computing the disabled states from the same columns list you toggle (e.g., hideableColumns.some(c => c.getIsVisible()) / hideableColumns.every(c => c.getIsVisible())).

Copilot

Pull request overview

Copilot reviewed 138 out of 138 changed files in this pull request and generated 2 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-02-26T11:42:30Z

frontend/src/components/common/Table/ColumnVisibilityButton.tsx

+              onChange={() => {}}
+              tabIndex={-1}
+              edge="start"
+              sx={{ mr: 1, pointerEvents: 'none' }}


The Switch component has an empty onChange handler and pointerEvents set to 'none', which is correct since the MenuItem handles the click. However, the Switch should not be in the tab order at all. Consider adding inputProps={{ 'aria-hidden': true }} to the Switch to ensure it's fully hidden from assistive technologies, since it's purely decorative and the MenuItem provides the actual interaction.

Suggested change

sx={{ mr: 1, pointerEvents: 'none' }}

sx={{ mr: 1, pointerEvents: 'none' }}

inputProps={{ 'aria-hidden': true }}

Copilot · 2026-02-26T11:42:30Z

frontend/src/components/common/Table/ColumnVisibilityButton.tsx

+  table: MRT_TableInstance<T>;
+}) {
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+  const menuId = 'column-visibility-menu';


The menuId is hardcoded to a constant string 'column-visibility-menu'. Based on prior feedback, when multiple tables are rendered on the same page, this creates duplicate element IDs and breaks ARIA references. This was previously identified and a solution was suggested: use React.useId() to generate a unique ID per component instance.

illume · 2026-02-26T11:43:46Z

frontend/src/components/App/Home/__snapshots__/index.Base.stories.storyshot

+                            style="margin-left: 8px; color: rgb(198, 40, 40);"
                          >
-                            Active
+                            Unreachable


Does this make sense where this story was showing "Active" now it's showing "Unreachable"?

illume · 2026-02-26T11:44:53Z

...tend/src/components/common/ReleaseNotes/__snapshots__/ReleaseNotes.Default.stories.storyshot

-              world
-            </p>
-          </div>
+          Failed to fetch release information


Before: "An update is available"
Now: "Failed to fetch release information"

Seems suspicious.

…elector in ColumnVisibilityButton

Copilot

Pull request overview

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-02-26T16:34:17Z

frontend/src/components/common/Table/ColumnVisibilityButton.tsx

+  table: MRT_TableInstance<T>;
+}) {
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+  const menuId = 'column-visibility-menu';


The menuId is still hardcoded to 'column-visibility-menu', which will cause duplicate element IDs if multiple tables are rendered on the same page. This was already identified in previous feedback. To fix this, import and use React's built-in useId hook (React 18+) to generate a unique ID per component instance. For example:

import { useId, useState } from 'react'; // ... const menuId = useId();

This ensures each ColumnVisibilityButton instance has a unique menu ID, maintaining proper ARIA relationships and accessibility.

Copilot AI review requested due to automatic review settings February 24, 2026 22:22

Copilot started reviewing on behalf of sniok February 24, 2026 22:23 View session

Copilot AI reviewed Feb 24, 2026

View reviewed changes

frontend/src/components/common/Table/ColumnVisibilityButton.tsx Outdated Show resolved Hide resolved

frontend/src/components/common/Table/ColumnVisibilityButton.tsx Show resolved Hide resolved

illume added the a11y a11y related issues label Feb 25, 2026

illume linked an issue Feb 25, 2026 that may be closed by this pull request

[Accessibility team] Show/Hide Columns button controls are not accessible using keyboard in A11yCluster tab #309

Open

sniok force-pushed the table-a11y-column-selector branch from f52c08b to fcc43ef Compare February 25, 2026 15:52

skoeva reviewed Feb 25, 2026

View reviewed changes

Copilot AI review requested due to automatic review settings February 26, 2026 10:56

Copilot started reviewing on behalf of yolossn February 26, 2026 10:57 View session

Copilot AI reviewed Feb 26, 2026

View reviewed changes

illume requested a review from Copilot February 26, 2026 11:38

Copilot started reviewing on behalf of illume February 26, 2026 11:39 View session

Copilot AI reviewed Feb 26, 2026

View reviewed changes

illume reviewed Feb 26, 2026

View reviewed changes

yolossn force-pushed the table-a11y-column-selector branch from 741682a to fcc43ef Compare February 26, 2026 12:47

sniok force-pushed the headlamp-downstream branch from def6222 to 3ed87fa Compare February 26, 2026 15:35

upstreamable: frontend: Table: Implement keyboard accessible column s…

32dce31

…elector in ColumnVisibilityButton

Copilot AI review requested due to automatic review settings February 26, 2026 16:29

sniok force-pushed the table-a11y-column-selector branch from fcc43ef to 32dce31 Compare February 26, 2026 16:29

Copilot started reviewing on behalf of sniok February 26, 2026 16:30 View session

Copilot AI reviewed Feb 26, 2026

View reviewed changes

illume added p0 Highest priority bug Something isn't working labels Feb 27, 2026

	sx={{ mr: 1, pointerEvents: 'none' }}
	sx={{ mr: 1, pointerEvents: 'none' }}
	inputProps={{ 'aria-hidden': true }}

Conversation

sniok commented Feb 24, 2026 • edited by illume Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

skoeva left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Feb 26, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 26, 2026

Choose a reason for hiding this comment

Uh oh!

illume Feb 26, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 26, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Feb 26, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 26, 2026

Choose a reason for hiding this comment

Uh oh!

illume Feb 26, 2026

Choose a reason for hiding this comment

Uh oh!

illume Feb 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Feb 26, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

sniok commented Feb 24, 2026 •

edited by illume

Loading

illume Feb 26, 2026 •

edited

Loading