LuxInputButton icon and prepend-icon variants should have an "alt-text" prop that allows for contextual override of the icon name

[sdellis]

Steps to recreate

Go to the Docs for LuxInputButton and add an icon name (such as "search") as the value for an icon or prepend-icon prop. Hover over the button to see the "Title". This title should not be determined by the icon name, but rather the context for which the icon is use.

URL

https://pulibrary.github.io/lux-design-system/#/Components?id=luxinputbutton

Issues

While it is possible to create contextual titles for icons through the LuxIconBase component, one cannot do this for icons that are used in LuxInputButtons since it uses the name of the icon as the title.

The LuxInputButton icon and prepend-icon variants should have a prop that allows for an override of the icon name. For example, in order to place an icon on a button, the value of the icon name (minus the lux-icon- prefix) tells the LuxInputButton which icon to use. However, sometimes an "X in a circle" icon can mean "delete" or "denied". Sometimes a "right-arrow" can indicate "expand". We want both hover effects and screen readers to properly identify the icons in context, so we should allow an override of the default icon name that accurately convey the context.

Severity

High

WCAG Conformance level (A, AA, AAA)

A - Provide Text Alternatives
https://www.w3.org/TR/WCAG22/#text-alternatives
https://www.w3.org/TR/SVG11/struct.html#DescriptionAndTitleElements

User impact

This negatively affects all users, but is most critical to fix for users who use screen readers.

Recommended fix

While this fix is most critical for buttons that only contain an icon without any contextual text, it should be fixed in both variants. Simply add an extra prop (perhaps alt-text) on the LuxInputButton that populates the LuxIconBase <title> element.

Acceptance criteria

• I can successfully use this feature with Voice Over in Safari.
• I have checked this feature using one of the following browser extensions and confirmed that it does not add any level A or level AA issues:
  • axe dev tools
  • Lighthouse
  • Wave
• ...

Notes

Unfortunately, axe, Lighthouse, and Wave will not fail this bug since the <title> attribute is populated even when the text is incorrect or misleading.