On the DataGrid Inline Edit page on the Radzen website and in my own applications, the focus for the edit and delete RadzenButtons is not very noticeable. It is difficult to know which button has the focus when using the tab key to navigate. On the actual editing controls (RadzenDropDown, RadzenDatePicker, etc.) the focus is very obvious because they have a clear outline when focused. Is there any simple way to have the same kind of outline for the editing buttons? Or is there some other way to make the focused button more obvious? For my own applications, the button size is set to ExtraSmall in order to get as much data as possible into the grid so that does not help.
Hi @mherman,
Accessibility improvements in all components are currently in the works including better keyboard support, high-contrast mode and WCAG 2.1 AA compatibility. Focus states are one of the major improvements in this effort and are planned to ship early 2024.
is there some other way to make the focused button more obvious?
You style the focus state until improvements are released, for example add this to your app CSS:
.rz-button:not(.rz-state-disabled):not(:active):focus {
outline: 2px solid blue;
}
1 Like
Thanks @yordanov . That CSS works well. And thanks to you and the Radzen Team for making better keyboard support, high-contrast mode and WCAG 2.1 AA compatibility a priority. Having an accessible website is becoming mandatory for government website contracts in the USA as well as for many private business website contracts.