Dashboard: Works > Navigation tab links report low contrast errors
Descriptive summary
As part of ongoing testing in the Hyrax Maintenance Working Group, routine testing from the Accessibility worksheet reports alerts in WAVE related to the All Works and My Works tabs when using the Dashboard. These errors are reported when no styling or customization has been added.
Steps to reproduce the behavior in User Interface (UI)
- Ensure that you have the WAVE plugin for Chrome installed
- Navigate to Dashboard > Works
- Run the page view through WAVE
- Note alerts related to low contrast errors for the "All Works" and "My Works" tabs
Actual behavior (include screenshots if available)
Hyrax 5.0.1 (main) using Sirenia docker image.
Acceptance Criteria/Expected Behavior
- [ ] Dashboard views should not return accessibility alerts or warnings
Rationale (for feature request only)
Provide the rationale or user story that describes "why" this issue should be addressed. Especially if this is a new feature or significant change to the existing implementation.
Related work
This ticket relates to other tickets for global navigation elements in which low contrast errors are reported between the link text and the background color.
The contrast error in WAVE is tied to the h1 header. Other contrast errors were cleared by changing the button and link colors (see PR 6847
Strangely, the SiteImprove browser extension doesn't flag the h1 header for color contrast.
The PR says the change is passing SiteImprove but SiteImprove never flagged this as a problem. Wave is flagging something as a color contrast issue and it seems to be the h1 header with the class="sr-only" for Nurax (maybe it is a hidden header?). I am seeing the Wave report with a color contrast problem still and when you turn off styles in Wave, that h1 header is showing with a very low contrast font on the background. It looks like dev.nurax has the PR changes in place and Wave is still showing this color contrast problem.
Tested and confirmed that this is no longer an issue.