#13883·MudBlazor

DataGrid: sort and column-menu icons are never revealed by keyboard focus

Author: DevonEastCreated Sep 17, 2026Updated Sep 17, 2026
Labelsneeds: visualsneeds: exampleaccessibility

The sort icon and the column menu icon in a DataGrid header are drawn at opacity: 0 and only revealed on hover. Both stay in the tab order, so a keyboard user can focus the sort button but sees nothing. No focus indicator can paint on an element at zero opacity.

Version 9.10.0, in src/MudBlazor/Styles/components/_datagrid.scss: the hover reveal is at lines 113 to 125 (the same pattern again at 231 to 241), .sort-direction-icon { opacity: 0 } is at line 141 and reaches opacity: 1 only at 143 to 151 once the column is already sorted, and .column-options .mud-menu .mud-icon-button-label { opacity: 0 } is at line 161 with no equivalent escape.

Keyboard: tabbing onto the sort button of an unsorted column lands on an invisible control. The header text is not an alternative. In HeaderCell.razor line 57 it is a <span> with @onclick and no tabindex or key handler, so the button is the only keyboard route to sorting.

As an aside, the hover reveal sits inside @media (hover: hover) and (pointer: fine), so on a touch device the sort affordance for an unsorted column is not shown either, though it is still tappable. I mention it for completeness. The keyboard case is the one I am asking about.

#9716 covered both halves and was closed as completed by #13774, which added aria-sort and an accessible name. That fixed the screen reader half and shipped in 9.10.0. The visibility half is unchanged.

Suggested change: mirror the existing hover reveal with a &:focus-within block beside it, outside the hover media query, since focus is not a hover capability.

scss
      &:focus-within {
        .column-options .sort-direction-icon, .column-options .column-options-icon, .column-options .drag-icon-options {
          opacity: 0.8;
          color: var(--mud-palette-action-default);
        }

        .column-options .mud-menu .mud-icon-button-label {
          opacity: 1.0;
          color: var(--mud-palette-action-default);
        }
      }

:focus-within rather than :focus because the menu button's hidden element is a child of the focusable button. I am carrying this as a CSS override locally and would be happy to raise a PR if that is useful.