-
Notifications
You must be signed in to change notification settings - Fork 0
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix(14063): fix some components focused states #98
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 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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
&:focus
to&:focus-visible
is 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
&:focus
to&:focus-visible
in 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-visible
instead of:focus
for 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
onChange
handlers 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-visible
for the.selectBox
andbutton
elements 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-visible
forinput
,select
,button
, anda
elements 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-visible
across the codebase.The
:focus-visible
CSS 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-visible
implementation:
packages/default-theme/typography.css
packages/ui-kit/src/Toggler/style.module.css
packages/ui-kit/src/Radio/style.module.css
packages/ui-kit/src/Select/components/SelectButton/style.module.css
packages/ui-kit/src/Checkbox/style.module.css
packages/ui-kit/src/Button/style.module.css
Scripts 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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
/* 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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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-visible
enhances 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-visible
enhances 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-visible
enhances accessibility by providing focus indicators primarily for keyboard navigation.The code changes are approved.
164-165
: LGTM!The change to
&:focus-visible
enhances 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-visible
for keyboard navigationThe use of
:focus-visible
ensures 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-visible
pseudo-class to enhance accessibility and user experience.Bug Fixes
onChange
event 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.