(Accessibility) Routed tabs cause multiple failures

[myasonik]

Issue

Routed tabs cause a WCAG A failure in several ways:

• It breaks tabs accessibility because the button[role="tab"] is not a direct decedent of [role="tablist"]
• It breaks tab focus order because the <button> inside the <a> causes a secondary tab stop on the same-ish element

These failures are causing a test failure in our a11y testing suite (test skipped).

Recommended fix

These tabs are only visually tabs and aren't semantically tabs. It's just some links for a navigation. EUI should be flexible enough to render this visually as tabs but semantically as navigation (by removing the role attributes and not rendering the <button>). (If not, open issue against EUI.)

[elasticmachine]

Pinging @elastic/logs-metrics-ui (Team:logs-metrics-ui)

[smith]

One place where it looks like we're doing this is here:

https://github.com/smith/kibana/blob/6b65e909356a8f9e9f29db28ac8c41edae9959e1/x-pack/plugins/infra/public/components/asset_details/links/tab_to_uptime.tsx#L27-L34

There may be others.

@cee-chen looked at this with me on Slack in #accessibility and said:

TBH though, I'm not totally sure there's anything you can do without EUI updating our component to render a

instead of a [role="tablist"] (edit: actually, passing hrefs and not just onClicks might help) (edited)

Please check with her when addressing this to make sure there's something we can do.

[crespocarlos]

@smith, this is an old ticket. Apparently, things have changed.

It breaks tabs accessibility because the button[role="tab"] is not a direct decedent of [role="tablist"]

Based on the screenshots above, that's not the case. button[role="tab"] is a direct descendant of [role="tablist"]. Same for a[role="tab"]

It breaks tab focus order because the inside the causes a secondary tab stop on the same-ish element

I couldn't find any example of that.

Besides, I ran the test mentioned on the description and it passed

[cee-chen]

I can confirm that tab focus order is no longer an issue - that appears to have been fixed in EUI.

That being said, a[role="tab"] is still not a perfect screen reader experience, since screen readers announce it as a tabbed item and not as a link, but you could mitigate that by adding an aria-label to your external link icon before the "APM"/"Uptime" text that reads like "This is an external link to another page". With that change, I would personally consider this issue resolved.

[smith]

I think the best solution here would be:

• Change the "tabs" on the asset details flyout to be just a list of links. There's no reason for them to be tabs, and they don't open in a new window.
• Leave the inventory alone, where the "tabs" are part of the actual tab list. We'll be replacing that with the asset details flyout very soon.

[cee-chen]

@smith I think you and @crespocarlos are referring to two different UI items:

I agree with Nathan that the two items that look like plain EuiButtonEmptys should just be buttons and not tabs, but the actual tabs would be more accessible with a very quick aria-label improvement.

[smith]

@cee-chen the asset details flyout, which is newer, is used on the hosts view:

https://demo.elastic.co/app/metrics/hosts?_a=(dateRange:(from:now-15m,to:now),filters:!(),limit:100,panelFilters:!(),query:(language:kuery,query:%27%27))&controlPanels=(cloud.provider:(explicitInput:(fieldName:cloud.provider,id:cloud.provider,title:%27Cloud%20Provider%27),grow:!f,order:1,type:optionsListControl,width:medium),host.os.name:(explicitInput:(fieldName:host.os.name,id:host.os.name,title:%27Operating%20System%27),grow:!f,order:0,type:optionsListControl,width:medium))&flyout=(itemId:gke-demo-elastic-co-pool-5-29a9d3db-do9j-Ubuntu,tabId:metadata)

The links in the top right currently are tabs, and they don't need to be.

Your screenshot is showing the inventory view flyout, which is being removed. The links shown there (Create inventory rule and Open as page) are not tabs, but APM and Uptime are.

[cee-chen]

Ahh gotcha. Thanks for clarifying! I'd definitely like to see the top right "tabs" not be tabs!

[crespocarlos]

The top right links are in fact EuiButtonEmpty:

APM: https://github.com/elastic/kibana/blob/v8.9.0/x-pack/plugins/infra/public/components/asset_details/links/link_to_apm_services.tsx
Uptime: https://github.com/elastic/kibana/blob/v8.9.0/x-pack/plugins/infra/public/components/asset_details/links/link_to_uptime.tsx.

@smith, the asset details code has APM and Uptime links as tabs too. They were moved to the asset details when we started moving stuff from the node details flyout from the Inventory UI, but they are not currently in use.

[smith]

Thanks for looking @crespocarlos. I'm going to close this now.