[ProgressStep] aria-disabled not supported by implied role 'listitem'

[theetrain]

Svelte 3.56.0 yields this warning:

A11y: The attribute 'aria-disabled' is not supported by the role 'listitem'. This role is implicit on the element <li>

And it calls out this line:

carbon-components-svelte/src/ProgressIndicator/ProgressStep.svelte

Lines 55 to 58 in d2e471b

	<li
	aria-disabled="{disabled}"
	id="{id}"
	class:bx--progress-step="{true}"

We should address the warning; Carbon react does not use aria-disabled and instead makes use of tabindex="-1" on list buttons that are disabled.

[theetrain]

References:

• https://www.w3.org/WAI/tutorials/forms/multi-page/#using-step-by-step-indicator
• https://designsystem.digital.gov/components/step-indicator/

Takeaways

• Use aria-current="true"
• Have visually-hidden text indicate completed, current, next, and disabled steps

Out of scope

• Allow hyperlinks to be added for progressive enhancement Considerations for progressive enhancement #1622

[pwwang]

It's not only ProgressIndicator/ProgressStep that is affected. Here is a list of components that are affected:

• ContextMenu
• OverflowMenu
• UIShell/HeaderNavMenu
• UIShell/SideNavMenu
• UIShell/HeaderSearch
• UIShell/HeaderNav
• Tabs
• TreeView/TreeView
• TreeView/TreeViewNodeList
• TreeView/TreeViewNode

[metonym]

@pwwang Thank you for flagging this. I submitted a PR here: #1703

[theetrain]

Resolved in v0.73.5.