fix(14063): fix some components focused states #98
Conversation
WalkthroughThe changes involve modifications to the focus state handling across various UI components, specifically transitioning from the Changes
Sequence Diagram(s)sequenceDiagram
participant User as User
participant Button as Button
participant Accessibility as Accessibility System
User->>Button: Click or Focus
alt Keyboard Navigation
Button->>Accessibility: Trigger focus-visible
else Mouse Click
Button->>Accessibility: No focus-visible
end
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configuration File (
|
|
♻️ PR Preview 15634ad has been successfully destroyed since this PR has been closed.
🤖 By surge-preview |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Files selected for processing (6)
- packages/default-theme/typography.css (1 hunks)
- packages/ui-kit/src/Checkbox/style.module.css (1 hunks)
- packages/ui-kit/src/Radio/Radio.fixture.tsx (1 hunks)
- packages/ui-kit/src/Radio/style.module.css (1 hunks)
- packages/ui-kit/src/Select/components/SelectButton/style.module.css (2 hunks)
- packages/ui-kit/src/Toggler/style.module.css (1 hunks)
Additional comments not posted (6)
packages/ui-kit/src/Radio/style.module.css (1)
34-34: Approved: Focus-visible implementation enhances accessibility.The change from
&:focusto&:focus-visibleis a significant improvement for keyboard navigation accessibility. This ensures that the focus styles are only applied when necessary, avoiding unnecessary visual clutter for mouse users.packages/ui-kit/src/Checkbox/style.module.css (1)
28-28: Approved: Correct application of focus-visible for better accessibility.Switching from
&:focusto&:focus-visiblein the Checkbox component is a crucial enhancement. It ensures that focus indicators are shown only during keyboard navigation, which is essential for accessibility and reduces visual noise for mouse users.packages/ui-kit/src/Toggler/style.module.css (1)
22-22: Approved: Effective use of focus-visible for enhanced accessibility.The modification to use
:focus-visibleinstead of:focusfor the toggle component is an excellent update. It ensures that the focus indication is only visible during keyboard navigation, which is a best practice for modern web accessibility.packages/ui-kit/src/Radio/Radio.fixture.tsx (1)
26-27: Correct and clear handling of state management.The changes in the
onChangehandlers ensure that the correct values are passed, improving the clarity and correctness of the state management. It's recommended to verify the integration of these changes with the rest of the application to ensure there are no unforeseen side effects.The code changes are approved.
Run the following script to verify the integration:
packages/ui-kit/src/Select/components/SelectButton/style.module.css (1)
119-119: Enhanced accessibility and cleaner interface.The transition to
:focus-visiblefor the.selectBoxandbuttonelements enhances accessibility by providing focus indicators primarily for keyboard navigation. It's recommended to verify the visual consistency of these changes across different browsers to ensure a uniform user experience.The code changes are approved.
Run the following script to verify the visual consistency:
Also applies to: 164-165
packages/default-theme/typography.css (1)
22-22: Improved accessibility with focus-visible.The use of
:focus-visibleforinput,select,button, andaelements enhances accessibility by ensuring that the outline color is only applied during keyboard navigation. It's recommended to verify the integration of these changes with the rest of the application to ensure there are no unforeseen side effects.The code changes are approved.
Run the following script to verify the integration:
Verification successful
Verified integration of
:focus-visibleacross the codebase.The
:focus-visibleCSS rule has been consistently applied across various components, enhancing accessibility by providing clear visual indicators for keyboard navigation. The integration appears to be thorough and well-executed.
- Files with
:focus-visibleimplementation:
packages/default-theme/typography.csspackages/ui-kit/src/Toggler/style.module.csspackages/ui-kit/src/Radio/style.module.csspackages/ui-kit/src/Select/components/SelectButton/style.module.csspackages/ui-kit/src/Checkbox/style.module.csspackages/ui-kit/src/Button/style.module.cssScripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the integration of the `:focus-visible` changes with the rest of the application. # Test: Search for the usage of `:focus-visible`. Expect: Only occurrences of the new implementation. rg --type css -A 5 $':focus-visible'Length of output: 3598
| @@ -19,7 +19,7 @@ input, | |||
| select, | |||
| button, | |||
| a { | |||
| &:focus { | |||
| &:focus-visible { | |||
There was a problem hiding this comment.
/* Apply outline only when the button is focused via keyboard (e.g., using Tab) */
button:focus {
outline: none; /* Disable outline for all focus states */
}
button:focus-visible {
outline: 2px solid #007BFF; /* Re-enable outline only for keyboard focus */
}
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Files selected for processing (4)
- packages/default-theme/typography.css (1 hunks)
- packages/ui-kit/src/Checkbox/style.module.css (1 hunks)
- packages/ui-kit/src/Radio/style.module.css (2 hunks)
- packages/ui-kit/src/Select/components/SelectButton/style.module.css (2 hunks)
Additional comments not posted (6)
packages/ui-kit/src/Radio/style.module.css (1)
33-35: LGTM!The change to
&:focus-visibleenhances accessibility by providing focus indicators primarily for keyboard navigation.The code changes are approved.
packages/ui-kit/src/Checkbox/style.module.css (1)
28-30: LGTM!The change to
&:focus-visibleenhances accessibility by providing focus indicators primarily for keyboard navigation.The code changes are approved.
packages/ui-kit/src/Select/components/SelectButton/style.module.css (2)
118-119: LGTM!The change to
&:focus-visibleenhances accessibility by providing focus indicators primarily for keyboard navigation.The code changes are approved.
164-165: LGTM!The change to
&:focus-visibleenhances accessibility by providing focus indicators primarily for keyboard navigation.The code changes are approved.
packages/default-theme/typography.css (2)
23-24: Ensure accessibility: Removing outline and box-shadow on focusRemoving the outline and box-shadow on focus can impact accessibility for users who rely on keyboard navigation. Ensure that this change does not negatively affect the user experience.
Verify that all interactive elements still provide a clear visual indication when focused using the keyboard.
26-27: Enhance accessibility: Use:focus-visiblefor keyboard navigationThe use of
:focus-visibleensures that the outline is applied only when the element is focused via keyboard navigation, improving accessibility.The code changes are approved.
https://kontur.fibery.io/Tasks/Task/Fix-control-states-in-FE-library-18914
Summary by CodeRabbit
New Features
:focus-visiblepseudo-class to enhance accessibility and user experience.Bug Fixes
onChangeevent handling for Radio components to ensure accurate value selection.These updates aim to provide a cleaner interface for mouse users while offering essential visual cues for keyboard navigation, improving overall usability.