Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improve display of navbar dropdowns #676

Merged
merged 3 commits into from
Apr 11, 2024
Merged

Improve display of navbar dropdowns #676

merged 3 commits into from
Apr 11, 2024

Commits on Apr 10, 2024

  1. Improve accessibility of smaller text sizes 

    This commit reduces our use of decorative small type, which can be
inaccessible to low-sight users. Except for very specific contexts (such
as inline code, which renders in monotype text, which appears larger
than surrounding sans-serif type anyway), we limit our “small text” to
only 5% smaller than root, e.g., `0.95rem`.

Some elements will now appear a little larger (navbar items, decorative
headers, badges, sidebar metadata). Some will look the same but now use
a global CSS variable.

No issue, but a prerequisite task for work on #667.
    @reefdog
    reefdog committed Apr 10, 2024
    Configuration menu
    Copy the full SHA
    29264a3 View commit details
    Browse the repository at this point in the history

  2. Add DropdownMenuLinkDescription for dropdowns 

    Prior to this commit, we had a bit of an ad hoc / HTML-native way of
adding descriptions to dropdown menu items, customized just for our two
current navbar dropdowns. This felt unidiomatic both for React and for
our Dropdown component ergonomics.

Now, we have a `DropdownMenuLinkDescription` component that you can
optionally add to a `DropdownMenuLink`, alongside the existing text,
which renders some smaller explanatory text below the title.

Along the way, we also:

- Change the styling of these navbar items with descriptions so that
  they match items without descriptions. (h/t @slifty)
- Make sure menu link icons stay aligned with the “title” of the link,
  not centered by the description — and don’t let them shrink
- Update stories to match (and with more representative examples)

Issue #667 Change formatting of navbar dropdowns
    @reefdog
    reefdog committed Apr 10, 2024
    Configuration menu
    Copy the full SHA
    6649c52 View commit details
    Browse the repository at this point in the history

  3. Improve keyboard-navigability of dropdown menu 

    In browsers/OSes that support keyboard-tabbing through link controls,
our dropdown menus can be tabbed-through. Prior to this commit, however,
the focus outlines were clipped.

No longer! Now they are visible, and even curved at top and bottom to
match the menu itself.
    @reefdog
    reefdog committed Apr 10, 2024
    Configuration menu
    Copy the full SHA
    13d555c View commit details
    Browse the repository at this point in the history