Skip to content

UI tweaks for org picker

Just logging a few refinement tweaks for the org picker! (If these should be separate issues, let me know and I’ll break them up.)

Even out padding on “⌄” button

Right now, there’s a little too much horizontal padding around the downward arrow (“⌄”) button:

Screenshot 2024-10-30 at 3 54 32 PM

It’d be great to even this out a bit, and make it more uniform. Quick in-browser sketch:

Screenshot 2024-10-30 at 4 13 03 PM

Additional vertical padding inside the expanded menu

When the org picker is expanded, we could use a little more breathing room between the organization names and the borders above+below them:

Screenshot 2024-10-30 at 3 56 00 PM

(Adding a little padding-y-05 to the orgs-selector__list might clear this right up.)

Small screen: absolutely position the org picker

On non-widescreen displays, the org picker pushes content down when opened. Ideally, it’d be absolutely positioned on all breakpoints.

Screenshot 2024-10-30 at 3 54 47 PM

Accessible name for the org picker

In hindsight, the org picker could stand to announce its purpose a bit more!

But until/if Cloud decides to redesign this element, let’s add some sort of visually hidden descriptor (perhaps via .usa-sr-only?) to label this as a “Choose an organization” element.

(Stretch goal) Make the entire org picker clickable

Right now, the downward arrow (“⌄”) button is the only trigger for the org picker:

Screenshot 2024-10-30 at 3 54 38 PM

If possible, let’s extend that area to cover the entire org picker’s “header,” so that users can click/tap anywhere inside the picker to open it.

Can this task be done in one increment?

I believe so!

Acceptance Criteria

  • The above fixes have been implemented and merged.