Admin toolbar navigation accessibility

Locate the admin navigation component by searching the Angular app for admin-sidebar; the issue provides rendered markup but no source file or test path. Read how the sidebar renders expandable sections and handles keyboard focus, then verify the behavior with keyboard navigation and VoiceOver. Done means screen readers and keyboard users can navigate the links and toggle sections without skipped items or a focus loop.

@lgeggleston

Submitted on behalf of University of Virginia (UVA) Library’s Assessment, Communications, and User Experience (ACE) team as part of internal DSpace 9 accessibility audit.

Issue 1 of 3: Admin Navigation for Screen Readers

Describe the bug

The left-hand admin navigation bar is not fully usable with Voice Over (screen reader). The dropdowns are not functional with voice over key commands, resulting in an unusable interface for screen reader users.

Page

General Alerts and Sitewide Issues

WCAG Guideline

WCAG 2.1.1, 2.4.3, 4.1.2, 1.3.1

To Reproduce

Located in Admin Menu Bar.

Relevant code

Start of code snippet:
\<nav \_ngcontent-dspace-angular-c1031589132="" id="admin-sidebar" class="navbar navbar-dark p-0 vh-100 ng-trigger ng-trigger-slideSidebar ng-tns-c1031589132-4 collapsed ng-star-inserted" aria-label="Admin navigation bar" style="max-width: 55px;"\>\<div \_ngcontent-dspace-angular-c1031589132="" id="sidebar-header-container" aria-hidden="true" class=

Expected behavior

The admin navigation bar is not navigable or operable for screen reader users. The voice over navigation issues are occurring due to inconsistent semantics and poorly used ARIA roles. The role="menubar" on the container forces screen readers into application menu mode, affecting navigation commands. The nested interactive elements with tabindex="0" creates two focusable elements nested inside each other: The outer <a> with tabindex="0" and the inner <span> with tabindex="0" and role="button". This creates duplicate tab stops and confuses screen readers about which element to focus. Links with href="javascript:void(0);" should be <button> elements since they trigger actions (expanding sections), not navigation. The role="menuitem" on expandable sections is not proper use; menu item roles shouldn't expand/collapse - they should either navigate or trigger actions. For expandable sections, you need <button> elements with aria-expanded. There is also a mix of role="menuitem" and actual navigation links. Some items are real links (Admin Search, Processes, etc.) and some are toggles. The inconsistent semantics confuse navigation for keyboard navigation.

For expandable sections:
\<button aria-expanded="false" aria-controls="admin-menu-section-new"\> \<i aria-hidden="true" class="fa-plus fas"\>\</i\> New \<i aria-hidden="true" class="fa-chevron-right"\>\</i\>\</button\> For navigation links: \<a href="/admin/search"\> \<i aria-hidden="true" class="fa-search fas"\>\</i\> Admin Search\</a\> Remove: role="menubar" from container role="menuitem" from all elements All nested tabindex="0" elements All href="javascript:void(0);" links Inner \<span role="button"\> elements (since we will be using semantic \<button\>).

Suggested fix / example code

The following is example code; please update for each item and check for Javascript changes. Navigation Landmark:
\<nav aria-label="Admin navigation"\> ...\</nav\> Expandable section (with toggle): \<button type="button" aria-expanded="false" aria-controls="admin-menu-section-new"\> \<i aria-hidden="true" class="fa-plus fas"\>\</i\> \<span\>New\</span\> \<i aria-hidden="true" class="fa-chevron-right"\>\</i\>\</button\> Individual Links (going to different page): \<a href="/admin/search"\> \<i aria-hidden="true" class="fa-search fas"\>\</i\> \<span\>Admin Search\</span\>\</a\> Pin Sidebar button: \<button type="button" aria-pressed="false"\> \<i aria-hidden="true" class="fa-angle-double-right"\</i\> \<span\>Pin sidebar\</span\>\</button\>

Issue 2 of 3: Admin Bar for Keyboard Navigation

Describe the bug

The admin navigation bar is not fully usable with keyboard navigation. Using the standard keyboard navigation (no VO), the focus order jumps around and skips menu items entirely.

Page

General Alerts and Sitewide Issues

WCAG Guideline

WCAG 2.1.1, 2.4.3, 4.1.2, 1.3.1

To Reproduce

Relevant code

Start of code snippet:
\<nav \_ngcontent-dspace-angular-c1031589132="" id="admin-sidebar" class="navbar navbar-dark p-0 vh-100 ng-trigger ng-trigger-slideSidebar ng-tns-c1031589132-4 collapsed ng-star-inserted" aria-label="Admin navigation bar" style="max-width: 55px;"\>\<div \_ngcontent-dspace-angular-c1031589132="" id="sidebar-header-container" aria-hidden="true" class="sidebar-full-width-container ng-tns-c1031589132-4"\>

Expected behavior

The admin navigation bar is not navigable or operable for keyboard users. The voice over navigation issues are occurring due to inconsistent semantics and poorly used ARIA roles. The role="menubar" on the container forces screen readers into application menu mode, affecting navigation commands. The nested interactive elements with tabindex="0" creates two focusable elements nested inside each other: The outer <a> with tabindex="0" and the inner <span> with tabindex="0" and role="button". This creates duplicate tab stops and confuses screen readers about which element to focus. Links with href="javascript:void(0);" should be <button> elements since they trigger actions (expanding sections), not navigation. The role="menuitem" on expandable sections is not proper use; menu item roles shouldn't expand/collapse - they should either navigate or trigger actions. For expandable sections, you need <button> elements with aria-expanded. There is also a mix of role="menuitem" and actual navigation links. Some items are real links (Admin Search, Processes, etc.) and some are toggles. The inconsistent semantics confuse navigation for keyboard navigation.

For expandable sections: \<button aria-expanded="false" aria-controls="admin-menu-section-new"\> \<i aria-hidden="true" class="fa-plus fas"\>\</i\> New \<i aria-hidden="true" class="fa-chevron-right"\>\</i\>\</button\>

For navigation links: \<a href="/admin/search"\> \<i aria-hidden="true" class="fa-search fas"\>\</i\> Admin Search\</a\>

Remove: role="menubar" from container role="menuitem" from all elements All nested tabindex="0" elements All href="javascript:void(0);" links Inner <span role="button"> elements (since we will be using semantic <button>).

Suggested fix / example code

The following is example code; please update for each item and check for Javascript changes. Navigation Landmark:
\<nav aria-label="Admin navigation"\> ...\</nav\> Expandable section (with toggle): \<button type="button" aria-expanded="false" aria-controls="admin-menu-section-new"\> \<i aria-hidden="true" class="fa-plus fas"\>\</i\> \<span\>New\</span\> \<i aria-hidden="true" class="fa-chevron-right"\>\</i\>\</button\> Individual Links (going to different page): \<a href="/admin/search"\> \<i aria-hidden="true" class="fa-search fas"\>\</i\> \<span\>Admin Search\</span\>\</a\> Pin Sidebar button: \<button type="button" aria-pressed="false"\> \<i aria-hidden="true" class="fa-angle-double-right"\>\</i\> \<span\>Pin sidebar\</span\>\</button\>

Issue 3 of 3: Admin Navigation Keyboard Trap

Describe the bug

The screen reader in Mac (VoiceOver) gets stuck in a loop when reading the page. The focus goes from skip to main content button > admin menu > window name, and gets stuck repeating window name. Including a video instead of a photo for clarity on what this looks like. This is the same issue as the main navigation bar. The admin navigation bar starts with <nav>, but then they switch to role=menubar and role=menuitem, which make VoiceOver in Safari jump to the window level. VO in Safari registers these roles as software/application type of navigation, so it automatically jumps to the window-level. Since both the admin navigation and main navigation use role=menu, VO will keep going in a loop because it's being told constantly to jump up.

Page

General Alerts and Sitewide Issues

WCAG Guideline

WCAG 2.1.2, 4.1.2, 1.3.1

To Reproduce

Located in Admin menu bar.

Relevant code

See issue 2 of 3 code block above

Expected behavior

Screen reader users cannot access the page. Removing the role="menubar" and role="menuitem" roles fully resolves the VoiceOver looping behavior. This loop occurs because VoiceOver treats these roles as desktop application menus and repeatedly jumps out of the webpage into Safari’s window-level navigation. Converting expandable items into <button aria-expanded> and leaving navigation items as standard <a> links restores correct semantics and prevents the loop.

Suggested fix / example code

See code block above, as well as code block for navigation bar.