DataGrid: sort and column-menu icons are never revealed by keyboard focus
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.
&: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.
Source: MudBlazor/MudBlazor