UI tweaks for org picker

[beepdotgov]

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:

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

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:

(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.

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:

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.