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