feat(focusStates): L3-7525 Design System [RW]: Update keyboard focus state across all components

[smarks8]

Jira ticket

L3-7525

Screenshots

Before	After

Figma link

Figma Link - Button Focus Example

Summary

• Introduce new mixin to implement consistent 2px outline across all interactive focus states
• Fix accordion so it's keyboard navigable

Change List (describe the changes made to the files)

This pull request standardizes and improves focus styles across multiple components by replacing ad-hoc CSS with the shared focus-ring mixin. It also includes an accessibility improvement for the Accordion component by switching its trigger from a div to a button, and updates related tests and styles accordingly.

Accessibility and Component Improvements:

• Changed the Accordion trigger from a div to a button for better accessibility, updated associated test expectations, and reset button styles in _accordion.scss to maintain visual consistency. [1] [2] [3]

Standardization of Focus Styles:

• Replaced custom or inconsistent focus outlines and box-shadows with the focus-ring mixin in the following components:
  • AddToCalendar, Breadcrumb, Button, Carousel, ComboBox, DatePicker, DescriptiveRadioButton, Dropdown, IconButton, Input, Link, Pagination, SearchButton, Select, Tabs, and Tags. This ensures a consistent and accessible focus indicator throughout the UI. [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12] [13] [14] [15] [16] [17] [18] [19] [20] [21] [22] [23] [24] [25]

Minor Updates:

• Adjusted the minimum height in the Search stories to improve layout consistency.

These changes collectively improve accessibility, maintainability, and visual consistency across the component library.

Acceptance Test (how to verify the PR)

• Keyboard nav thru components and see that they are able to function with keyboard nav and that the new blue focus state doesn't look wacky

Regression Test

• (Optional) Add verification steps to make sure this PR doesn't break old functionality

Evidence of testing

• Post logs, screenshots, etc

Things to look for during review

• PR title should correctly describe the most significant type of commit. I.e. feat(scope): ... if a minor release should be triggered.
• All commit messages follow convention and are appropriate for the changes
• All references to phillips class prefix are using the prefix variable
• All major areas have a data-testid attribute.
• Document all props with jsdoc comments
• All strings should be translatable.
• Unit tests should be written and should have a coverage of 90% or higher in all areas.

New Components

• Are there any accessibility considerations that need to be taken into account and tested?
• Default story called "Playground" should be created for all new components
• Create a jsdoc comment that has an Overview section and a link to the Figma design for the component
• Export the component and its typescript type from the index.ts file
• Import the component scss file into the componentStyles.scss file.

[netlify]

✅ Deploy Preview for phillips-seldon ready!

Name	Link
🔨 Latest commit	ad99c25
🔍 Latest deploy log	https://app.netlify.com/projects/phillips-seldon/deploys/69821e5af40b680008c663f1
😎 Deploy Preview	https://deploy-preview-796--phillips-seldon.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[Copilot]

Pull request overview

This PR standardizes keyboard focus states across the component library by introducing a new focus-ring mixin that applies a consistent 2px blue outline with configurable parameters. It also improves the Accordion component's accessibility by changing its trigger from a div to a semantic button element, making it keyboard navigable.

Changes:

• Added focus-ring SCSS mixin with configurable border-radius, outline-offset, outline-width, and outline-color parameters
• Updated 17+ components and 3 patterns to use the standardized focus-ring mixin
• Changed Accordion trigger from div to button element with appropriate SCSS resets and updated tests

Reviewed changes

Copilot reviewed 26 out of 26 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
src/scss/_utils.scss	Adds new focus-ring mixin for consistent focus styling
src/components/Accordion/_accordion.scss	Adds button style resets and focus-ring styling
src/components/Accordion/AccordionItem.tsx	Changes trigger from div to button element
src/components/Accordion/Accordion.test.tsx	Updates test expectations for locked accordion behavior
src/components/AddToCalendar/_addToCalendar.scss	Applies focus-ring mixin
src/components/Breadcrumb/_breadcrumb.scss	Applies focus-ring mixin
src/components/Button/_button.scss	Applies focus-ring mixin to all button variants
src/components/Carousel/_carousel.scss	Applies focus-ring mixin with custom width
src/components/ComboBox/_combobox.scss	Applies focus-ring mixin including error state
src/components/DatePicker/_datePicker.scss	Applies focus-ring mixin to calendar days
src/components/DescriptiveRadioButton/_descriptiveRadioButton.scss	Separates selected and focus states, applies focus-ring
src/components/Dropdown/_dropdown.scss	Applies focus-ring mixin
src/components/IconButton/_iconButton.scss	Applies focus-ring mixin and removes duplicate selector
src/components/Input/_input.scss	Applies focus-ring mixin (but error state needs refinement)
src/components/Link/_link.scss	Applies focus-ring mixin
src/components/Pagination/_pagination.scss	Applies focus-ring mixin
src/components/Search/_searchButton.scss	Adds focus-ring styling with zero offset
src/components/Search/Search.stories.tsx	Adjusts story container min-height
src/components/Select/_select.scss	Applies focus-ring mixin
src/components/Tabs/_tabs.scss	Updates box-shadow focus to use new focus color and width
src/components/Tags/_tags.scss	Applies focus-ring mixin
src/components/TextArea/_textArea.scss	Applies focus-ring mixin (but error state needs refinement)
src/patterns/FiltersInline/_filterButton.scss	Attempts to apply focus-ring but has parameter order bug
src/patterns/FavoritesCollectionTile/_favoritesCollectionTile.scss	Applies focus-ring mixin
src/patterns/CountryPicker/_countryPickerTrigger.scss	Applies focus-ring mixin
src/patterns/CountryPicker/_countryPickerOption.scss	Uses inset box-shadow approach for phone options

[Copilot]

Redundant focus-visible declaration. The tertiary variant already inherits the focus-ring styling from the combined selector on line 77-79 (which applies to both secondary and tertiary variants), making this duplicate declaration unnecessary. Consider removing this to reduce code duplication.

[github-actions]

🚀 Storybook preview is ready.

• Preview: https://68b9f094608b90f3cfec5a06-qirdrnjdkk.chromatic.com/
• Chromatic build: https://www.chromatic.com/build?appId=68b9f094608b90f3cfec5a06&number=304

[smarks8]

Sent to design for review, expect some tweaks