Links and buttons in toolbar missing accessible name

Problem/Motivation

Axe & Accessibility Insights report that several links & buttons in toolbar don't have "discernible text".

Also seen in VoiceOver when tabbing through that link & button names are not included in the output.

Setting to Major because both SCs mentioned in the reports are Level A.

Attaching Accessibility Insights export.

Steps to reproduce

1. Install profile: standard
2. Admin theme: Gin
3. Log in
4. Collapse the sidebar
5. Run Axe scan or tab through the links with VoiceOver.

Proposed resolution

They're currently hidden with display: none:

html:not(.admin-toolbar-expanded) .toolbar-menu__item--level-1:not(.toolbar-menu__item--has-dropdown) .toolbar-link span {
    display: none;
}

html:not(.admin-toolbar-expanded) .toolbar-menu__item--level-1 > .toolbar-link span, html:not(.admin-toolbar-expanded) .toolbar-menu__item--level-1 > .toolbar-menu__item--has-dropdown > button {
    display: none;
    opacity: 0;
}

@cwilcox808 noted in #3093378-35: Use ARIA disclosure pattern for submenu buttons in vertical toolbar orientation → that aria-label is problematic for client-side translation:

I'd add that a reason to not name the buttons using an attribute string like aria-label="Site settings menu" is translation software tends to skip aria-label entirely but does translate both visually hidden text and text hidden from everyone (with the hidden attribute, display: none styles, etc.)

So, hide them only visually instead? Here's core's visually-hidden rule. It appears to do the trick playing around in DevTools.

.visually-hidden {
    position: absolute !important;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    width: 1px;
    height: 1px;
    word-wrap: normal;
}

Remaining tasks

User interface changes

• Improved usability for screen reader users.

API changes

Data model changes