[Deque Analysis] Item Edit "Bistreams" 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 "Bitstreams" tab has a total of 11 serious accessibility issues (not including color contrast which are handled in other tickets).

1. Two structure issues with all the buttons on the "Bitstreams" tab:
   • ~~(ID 470939) "Buttons have same name but different actions." Every button on this page has no name/label (Upload, download, edit, delete, undo). Their text should either be in a <button> tag and/or have an aria-label or similar.~~
   • (ID 470941) "Non-decorative content is inserted using CSS pseudo-elements.". Every button on this page (Upload, download, edit, delete, 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 on "Metadata" tab, so this fix should use the same solution as #1193
2. (IDs 470962, 471456) "Status message not automatically announced." after discarding changes (on Bitstreams tab & Metadata tab). When you discard changes, a blue status message appears saying "Changes discarded. Your changes were discarded. To reinstate your changes click the 'Undo' button". This message is not announced to screen readers.
   • Fix this issue by using ONE of the following techniques: (1) Set focus to the interstitial message: https://dequeuniversity.com/class/dynamic-updates2/notify-users/move-focus OR (2) Announce the interstitial message via an ARIA live region: https://dequeuniversity.com/class/dynamic-updates2/notify-users/aria-live
3. (IDs 470965, 471459) "Content visually appears and disappears with no ability to adjust timing." on any alert/status message that appears on either Bitstreams tab or Metadata tab (e.g. the "Changes discarded. Your changes were discarded. To reinstate your changes click the 'Undo' button".)
   • Fix this issue by doing ONE of the following: (1) Leave the content on the screen until dismissed by the user. OR (2) Allow the user to adjust the amount of time temporary content is displayed on the screen, up to 10 times the default.
4. (ID 471035, 471039) "Content is lost at 200% zoom" & "Content overlaps other content at 320px width." on Bitstreams tab. When zoomed in or on a 320px wide screen, the name & description columns overlap & become unreadable.
5. ~~(ID 471042, 471463) "Keyboard focus is lost or misplaced due to user interaction or content update." after clicking on either the "Delete" or "Undo" button. This issue occurs on both the "Bitstreams" tab and "Metadata" tab.~~
   • ~~When the user activates the "Delete" or "Undo" icon, the keyboard focus is lost and on the next keyboard tab keypress, it enters the "Admin Sidebar" logo link.~~
   • ~~HOW TO FIX: Fix this issue by explicitly placing focus on a logical element when content is removed, refreshed, or added, for example: (1) For content added to the screen in reaction to a user-fired event, focus should be shifted to the new content - such as in single page applications. (2) For content removed/changed from the screen in reaction to a user-fired event, focus should be shifted to the next logical place in the interaction.~~
6. ~~(ID 470739) "id attribute value must be unique". Document has multiple static elements with the same id attribute: p-dad~~
   • ~~NOTE: Rated a "minor" issue, not "serious", but it may be simple to fix. If it's not simple, it should be delayed & moved to a different ticket.~~

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=50&sortField=ordinal&sortDir=asc&row=9&filter%5Bseverity%5D=3&filter%5Btype%5D=issue&filter%5Bpage_number%5D=13

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

[tdonohue]

NOTE: This ticket likely should be worked on with #1193 (Item Edit "Metadata" tab issues) as there is a lot of overlap in the issues on these two tabs. Additionally, it might be combined with #1190 (Item Edit "Status" tab issues)