Search code examples
htmlmaterial-uiaccessibilitytabindex

Autocomplete - Free solo — Why does the close button is not accessible by keyboard?

In Material UI Autocomplete Free Solo, I noticed that the "Clear input" button is clickable, but not accessible by keyboard.

Screenshot of the button with tabindex="1"

I went into the codebase to understand the reasoning behind this decision but didn't find anything. I also checked the A11Y docs but without success either... Could anyone give a little more detail about this? Was it a decision based on user testing?

Thanks :)

Solution

  • As far as why it's behaving the way it is, you already discovered that. tabindex="-1" means the element should be removed from the normal tabbing order but still allows the elmenet to be focused programmatically (if you call obj.focus() from javascript).

    If you're asking why Material decided to not have that button focusable, @rafael is correct that that's not a stackoverflow question. Someone working for Material that happens to be on stackoverflow might see this question and try to answer it but you're more likely to get an answer if you ask them directly.

    Note that WCAG 2.1.1 is often misunderstood that every interactive element on the page must be accessible via the keyboard. That's not true. What that checkpoint says is that all "functionality" of the page must be accessible through the keyboard. In the case of the X-clear button, that functionality is also available via the keyboard because when you TAB to the input field, all the text gets selected so you can either press DELETE or BACKSPACE to erase it or just start typing new text. Or you can press Ctrl (or CMD) + A to select all the text and delete it.

    So all the functionality of the X-clear button is available to the keyboard user without the actual button being accessible.

    Now having said that, I rarely, if ever, make a button that is clickable with the mouse not available to the keyboard user.