Issue #3424744: Use abbreviation for default menu items
Add aria-hidden to SVGs for accessibility
Hide these graphics from screen readers, as they are purely decorative.
Use first two letters of menu item as default icon
Refactor icon approach to inline SVGs instead of via CSS. This allows us to consolidate logic for both the icons and the default first two letters display, without having to do a lot of wonky CSS overrides. It also prevents the CSS from bloating each time a new icon is supported, and eliminates network requests.
Fix abbreviation layout shift on menu collapse
Revert SVG aria-hidden addition
This property is only useful if the SVGs are inlined. Since we're going back to the CSS version, we can remove them to save page weight.
Revert to CSS icons instead of inline SVGs
This method requires a little bit more work to extend the icons than the
original, default icon implementation, as the override will also need to
set ::before { content: '' } and hide the abbreviation, in addition to
setting --icon.
Forgot to commit the compiled CSS
Merge request reports
Activity
mentioned in merge request !7873 (closed)
added 1 commit
- a5d9ae1a - Remove default abbreviation icon for nav top bar
added 31 commits
Toggle commit list
216 .toolbar-button--icon--navigation-blocks, 217 .toolbar-button--icon--shortcuts, 218 .toolbar-button--icon--system-admin-config, 219 .toolbar-button--icon--navigation-content, 220 .toolbar-button--icon--navigation-create, 221 .toolbar-button--icon--system-modules-list, 222 .toolbar-button--icon--navigation-files, 223 .toolbar-button--icon--help, 224 .toolbar-button--icon--navigation-media, 225 .toolbar-button--icon--pencil, 226 .toolbar-button--icon--preview, 227 .toolbar-button--icon--entity-user-collection, 228 .toolbar-button--icon--system-admin-reports, 229 .toolbar-button--icon--system-admin-structure, 230 .toolbar-button--icon--sidebar-toggle, 231 .toolbar-button--icon--user { 
I love this idea, but I'm struggling to find a method to identify which buttons have icons. The template prints a variable for the classname, which will exist even if there is not SVG icon on the filesystem. Do we add a filesystem check somewhere? I had moved this allow list from CSS to twig in a previous iteration, but judging from conversations then and now, that's probably not the way to go. Hoping for some guidance on the most acceptable way to solve this problem.