Time estimate or Size

medium/small

Problem

Closes #575 and #576, advances #347 Part of keyboard navigation and accessibility work.

Solution

Focus styling for action buttons has been reviewed with Lyndsay but is not reflected in master Figma yet. Styling for primary/secondary buttons, and dropdown elements is there. Style guide

Closing #576 because they already work, its clear how to tab through them now that the visual style is obivous.

Disabled buttons are taking focus/styling for now, this can be discussed more in future as we get into navigation behavior.

New feature (non-breaking change which adds functionality)

CustomDropdown

Wrapper for our Dropdowns, unifies the stylesheets, just a slight DRYing now, but will be very useful going forward.

Steps to Verify:

Tab through header and try action buttons (AICS home link, Simularium home link, Download, Share)
Open dropdowns and check on hover and focus styling (focus styling is difficult to maintain sometimes with mouse interactions. Easiest way to see it is the use the buttons that open the submenus.

Applying focus styling to ALL interactive elements is out of scope for this PR (e.g. submenu items in drop-downs)

Screenshots (optional):

St.^{:grey_question:}	Category	Percentage	Covered / Total
🟡	Statements	66.27% (-0.46% 🔻)	676/1020
🟡	Branches	65.31% (-1.36% 🔻)	96/147
🔴	Functions	35% (-0.25% 🔻)	91/260
🟡	Lines	64.66% (-0.41% 🔻)	602/931

simularium / simularium-website

keyboard navigation: feature/focus states #589