Mobile link labels are improperly hidden

Problem/Motivation

1. When the admin toolbar is collapsed, the icon links labels don’t get read aloud to screen reader users.
2. This is because CSS is used to hide them with display: none; which is not the correct technique.
3. Per Drupal’s documentation Hide Content Properly, the CSS class .visually-hidden should be used instead.

WCAG success criteria

2.4.4 Link Purpose (In Context)
4.1.2 Name, Role, Value

Steps to reproduce

1. Login as admin. Navigate to /admin/structure/block. Chrome browser, desktop. Collapse the sidebar.
2. Verify the problem exists with an automated accessibility checker.
1. Run SiteImprove accessibility checker (Chrome browser extension).
2. “Link without a text alternative” should be one of the issues it reports.
3. Verify the problem exists manually.
   1. Inspect with Chrome Dev Tools.
   2. Find the tags that are associated with the toolbar icons (listed below under Code Snippet).

Code snippet

HTML

<a href="/en/admin/appearance" class="toolbar-link toolbar-link--has-icon toolbar-link--appearance">
     <span>Appearance</span>
</a>

CSS

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

Paths:
/en/admin/appearance
/en/admin/modules
/en/admin/people
/en/admin/content
/en/admin/content/block
/admin/content/files
/admin/content/media
/admin/help

Potential resolution

1. In mobile only, add .visually-hidden CSS class to the link text so that it’s hidden to sighted users but available to screen reader users
   
   Note: This will need additional CSS and/or JS to toggle between mobile and desktop
2. Add aria-label attribute with meaningful value to each linked icon
   
   Note: See: https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-in-context.html#techniques
3. Remove display: none; from the following selector

HTML

<a href="/en/admin/appearance" class="toolbar-link toolbar-link--has-icon toolbar-link--appearance">
     <span class=”visually-hidden”>Appearance</span>
 </a>

CSS
html:not([data-admin-toolbar="expanded"]) .toolbar-menu__item--level-1:not(.toolbar-menu__item--has-dropdown) .toolbar-link span {}