Skip to content

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