kobotoolbox / kpi / 27347389206 / 4

82%

master: 76%

push

github

feat(frontend): introduce kobo-themed mantine focus styles DEV-2106 (#7129)

### 📣 Summary

Improved keyboard focus visibility across Kobo by replacing inconsistent
focus styling with a shared Kobo-themed focus ring for Mantine and
legacy UI controls.

### 💭 Notes

There are still bunch of UI elements that don't use the shared focus
styles, but they will be handled at different time. This PR is mostly
about Mantine, adjusted few low hanging fruits too.

Changes here:
- Global focus token and resolver updates:
  - Added shared Kobo focus-ring CSS variables in the theme resolver.
  - Enabled keyboard-first Mantine focus behavior globally.
- Added a dedicated global focus stylesheet for Mantine auto focus class
handling.
- Mantine component focus consistency:
- Unified focus styles for Button, ActionIcon, CloseButton, Checkbox,
Radio, Select-family inputs, TagsInput, Autocomplete, and related input
surfaces.
  - Added danger-focused ring color handling for "red" button variants.
- Legacy and shared SCSS alignment:
  - Updated shared focus mixin to use Kobo focus-ring variables.
- Updated navigation, tabs, project table row links, and shared UI
styles to use the same focus treatment.
- Removed conflicting select trigger border overrides that competed with
focus visibility.
- Storybook parity:
- Wired the same theme CSS variable resolver into Storybook provider
setup so focus variables are available there as well.
- Maintenance cleanup:
- Marked legacy common checkbox and radio components as deprecated in
code comments to clarify Mantine migration direction.

### 👀 Preview steps

- Focus styles for Mantine components is testable in Storybook stories
for the components
- Focus styles for some legacy components is also testable in Storybook
- When opening Storybook, verify `--kobo…` CSS variables are available

3783 of 12092 branches covered (31.29%)

16778 of 36254 relevant lines covered (46.28%)

0.46 hits per line