[Deque Analysis] Item Edit "Metadata" Tab "serious" accessibility issues

[tdonohue]

Serious: This issue results in serious barriers for people with disabilities, and will partially prevent them from accessing fundamental features or content. People relying on assistive technologies will experience significant frustration as a result. Issues falling under this category are major problems, and remediation should be a priority.

Deque Analysis Summary

Our Item Edit "Metadata" tab has a total of 3 serious accessibility issues (not including color contrast which are handled in other tickets).

1. (ID 471438) "Non-decorative content is inserted using CSS pseudo-elements." on all buttons. Every button on this page (edit, delete, stop editing, undo) is represented by an icon, but those icons are inserted using CSS :before and :after pseudo-element.
   • RULE : Non-decorative content MUST NOT be inserted using CSS :before and :after pseudo-elements unless there is a way to access the content with CSS turned off.
   • HOW TO FIX: Fix this issue by including the content directly in the DOM using HTML
   • NOTE: This same issue occurs with all buttons on "Bitstreams" tab, so this fix should use the same solution as #1191
2. ~~(ID 471439) "Buttons have same name but different actions." Every button on this page has no name/label (edit, delete, stop editing, undo). Their text should either be in a <button> tag and/or have an aria-label or similar.~~
   • ~~NOTE: This same issue occurs with all buttons on "Bitstreams" tab, so this fix should use the same solution as #1191~~
3. (ID 471443) ~~"Active user interface component lacks 3 to 1 contrast ratio." on the Language input field (when editing a row in the table). The visual boundary of an ACTIVE user interface component does not have at least a 3 to 1 luminosity contrast ratio with either the inner or outer adjacent background.~~
   • ~~On white background, Visual boundary color: #CED4DA, Adjacent background color: #FFFFFF, Contrast ratio: 1.5:1~~
   • ~~On grayish background, Visual boundary color: #E8EBF3, Adjacent background color: #FFFFFF, Contrast ratio: 1.2:1~~
   • FIXED BY #2587

Full list of issues is viewable at (requires login): https://axeauditor.dequecloud.com/test-run/0856438a-a19a-11eb-bc31-b7d5be387c86/issues?activeTab=dt-issue&page=0&pageSize=25&sortField=ordinal&sortDir=asc&filter%5Bseverity%5D=3&filter%5Btype%5D=issue&filter%5Bpage_number%5D=14&row=9

More Information / Tools

• Consider using Deque's free Chrome plugin to check your work
• Deque's color contrast tool: https://dequeuniversity.com/rules/axe/4.1/color-contrast?application=axeAPI

[Andrea-Guevara]

Good morning @tdonohue! Following the note/suggestion on how to fix the accessibility problem of the item with id 471438, I would like to contribute to this activity. As I understand it, the problem was solved by adding the "aria-label" attribute to the buttons. Is that what this is about?

[tdonohue]

@Andrea-Guevara : I took a closer look at this today, and I believe you are correct. It's just the aria-label that is missing from these buttons. That will ensure they are "visible" to screen readers even when CSS is completely disabled.

I'll assign this to you. Thanks!

[Andrea-Guevara]

@tdonohue: Good afternoon! Thanks for the feedback, I've made a PR with the changes. I'm available to answer any questions you may have.

https://github.com/DSpace/dspace-angular/pull/3155