[EuiKeyboardAccessible] Discuss deprecation

[myasonik]

I'd like to deprecate and remove EuiKeyboardAccessible.

From the docs:

You can make interactive elements keyboard-accessible with the EuiKeyboardAccessible component. This is necessary for non-button elements and a tags without href attributes.

But that doesn't seem to hold up because:

1. All interactive elements should either be a native HTML element (e.g., button, anchor, label) or are more complex components (e.g., tabs, typeaheads) that require a lot more work than what EuiKeyboardAccessible does or even could reasonably do
2. The example here of anchors without href attributes shouldn't be interactive so I wouldn't recommend using it like that

And, taking a look at Kibana as an example, there are 5 uses of it today:

• 2 are being used on divs that should probably be converted to native button elements
• 1 is being used as some super janky focus control and doesn't do anything and should probably just be removed
• 1 is wrapping a div which wraps a button element... so, I guess should probably be removed?
• 1 is wrapping an anchor so should probably be removed

So, at least in Kibana, there seems to be a lot of misuse of it already.

[thompsongl]

There are only two components in EUI that use it (EuiBasicTable and EuiStepHorizontal; one usage each). I'm guessing both instances could benefit from a more tailored approach like mentioned above.

[cchaos]

Don't forget, however, to not just check for usages of the component <EuiScreenReaderOnly> but we also use the class .euiScreenReadOnly and the SASS mixin euiScreenReaderOnly(). I would suggest auditing the usage of those as well.

[myasonik]

@cchaos I'm only suggesting removing EuiKeyboardAccessible, I'm not suggesting touching EuiScreenReaderOnly at all.

I double checked and it doesn't seem like EuiKeyboardAccessible has any associated styles but if you know of any, point me in the direction and I'll check Kibana for it.

[cchaos]

Gah! I so did not read that correctly at all. Sorry... I'm good with deprecating it. Probably just throw a "Set for deprecation" label up on it, and let's add it to the next (Dec. 2020) deprecation cycle #1469

[myasonik]

Should we remove it from the docs?

[cchaos]

No, just setup a label like we have for EuiNavDrawer.

[myasonik]

So I started taking a look at removing EuiKeyboardAccessible I don't know how to proceed with EuiBasicTable.

It uses EuiKeyboardAccessible on a table row which gives it a role=button and assigns a click event to that which isn't something screen readers can really handle...

The best way to make a clickable table row accessible is to delegate click events on the row onto a visible button but that would be a pretty big breaking change. Is that something we can roll out somehow? (Slowly?)

[snide]

@myasonik It might be a good idea to just remove EuiKeyboardAccessible and move it's functionality into EuiBasicTable in that one spot. That way at least the component itself doesn't spread. We can target the table issue in a later PR. Off hand, the role=button in that case seems needed. It seems more a limitation of HTML table structures versus the reality of need (clickable rows).