Apply Global Custom Focus Styles across our PF Components & Interactive Elements

[lboehling]

Our new high-contrast theme added several darker borders around elements, making the default browser & existing custom focus states hard to see in several components. As part of the HC work, we created several focus tokens and guidelines for our ideal custom focus states, proposed in #1404 . However, we decided that the work should be scoped to include focus styles in our default theme as well, not just HC.

See this document for the design problem statement & updated focus tokens/styles: https://docs.google.com/document/d/1INbIgB8VNJNZ2ZcEE7zS-DwscKX6EQvrjb9blPpfo0g/edit?tab=t.0#heading=h.q7bidltwk6j0

This effort should prioritize the following components, which have been identified in our repository with custom focus styles already applied. Additionally, it should evaluate any components/elements whose browser-native focus rings lack clear differentiation and could benefit from the new proposed global custom focus style.

PatternFly Components with Custom Focus State Styles (with descriptions of current focus customizations)

• Accordion - Accordion toggles change background color on :focus.
• AlertGroup - The overflow button changes color and box-shadow on :focus.
• Breadcrumb - Breadcrumb links have custom color and underline on focus.
• Button - Custom focus and hover states are defined for various button types.
• Card - Selectable and clickable cards have custom focus border colors and widths.
• CalendarMonth - Date cells have a custom focus state with a styled outline.
• DataList - Clickable items and draggable buttons have custom background or icon color on :focus.
• DualListSelector - List items have custom background color on focus.
• Form inputs - fields have a custom inset focus ring.
• JumpLinks - Jump link items have custom color on focus.
• Label - Clickable, editable, and overflow labels have custom focus and hover states.
• Menu - Menu list items have a .pf-m-focus class and focus-within styles.
• MenuToggle - The toggle button has custom focus and hover states.
• Nav - Navigation links have custom color and background on focus.
• NotificationDrawer - .pf-m-hoverable list items change background on :focus.
• ProgressStepper - Step titles with help text have custom color and underline on focus.
• SimpleList - List items change background and color on :focus.
• SkipToContent - The skip-to-content link moves on screen when focused.
• Slider - The slider thumb gets a custom box-shadow on :focus.
• Switch - The switch input has a custom outline on focus-visible.
• Table - Table rows and sort buttons have custom focus-within and focus states.
• Tabs - Tab links have custom background color on focus.
• Timestamp - Help text variant changes color and underline on :focus.
• ToggleGroup - Toggle group buttons have custom background and border color on focus.
• Wizard - Navigation links change color and background on :focus.