LuxMenuBar has redundant title text

[maxkadel]

Steps to recreate

On the lux-design-system page for the LuxMenuBar run the Wave evaluation tool extension (more on evaluation tools).

This finding was found while doing an audit of the Allsearch Frontend

URL

https://pulibrary.github.io/lux-design-system/#!/Components/LuxMenuBar

Issues

Title attribute text is the same as text or alternative text.

The title attribute value is used to provide advisory information. It typically appears when the users hovers the mouse over an element. The advisory information presented should not be identical to or very similar to the element text or alternative text.

Severity

Alert (?)

WCAG Success Criterion

n/a

WCAG Conformance level (A, AA, AAA)

n/a

User impact

"The advisory information presented should not be identical to or very similar to the element text or alternative text." - redundant info for screen reader users as well as other users

Recommended fix

Remove title attribute - it is currently always the same as the link text (see code for 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

Should be able to just remove the "title" attribute from this element