SAK-51490 Portal make the sidebar-collapse-button responsive to user actions and movements - Arrows

[st-manu]

https://sakaiproject.atlassian.net/browse/SAK-51490

according to Christina Schwiebert, replace the icons with arrows

[ottenhoff]

<button id="sidebar-collapse-button" class="btn icon-button btn-sidebar-collapse portal-header-hamburger-button me-1 ms-3 d-none d-md-block" type="button" data-portal-sidebar-collapsed="false" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Collapse sidebar" aria-controls="portal-nav-sidebar">
        <span class="bi portal-nav-sidebar-icon"></span>
      </button>

the icon should have aria-hidden set

Why it matters

• Reduces noise. Screen-readers won’t announce “portal nav sidebar icon” or try to interpret the SVG/font-icon.
• Keeps focus on the button’s name. Your already has an accessible name via its title (or you could use aria-label="Collapse sidebar"). Hiding the decorative icon means users hear only “Collapse sidebar,” not extra clutter.

When not to use aria-hidden

If the icon is conveying meaning (for example, a status indicator or emoji that isn’t otherwise described), you’d instead ensure it’s exposed to AT and provide an accessible name on the (e.g. role="img" aria-label="Collapsed").

But in your case—Bootstrap’s hamburger/collapse icon inside a labeled button—adding aria-hidden="true" to the inner is the correct pattern.