-
-
Notifications
You must be signed in to change notification settings - Fork 1.4k
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(input): ensure clear button is not focusable when disabled #3774
base: canary
Are you sure you want to change the base?
Conversation
🦋 Changeset detectedLatest commit: 081c0e4 The changes in this PR will be included in the next version bump. This PR includes changesets to release 3 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
@ryxxn is attempting to deploy a commit to the NextUI Inc Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughThis update introduces a patch to the Changes
Possibly related PRs
Suggested reviewers
Recent review detailsConfiguration used: .coderabbit.yaml Files selected for processing (3)
Files skipped from review as they are similar to previous changes (2)
Additional comments not posted (1)
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 using PR comments)
Other keywords and placeholders
Documentation and Community
|
@@ -511,7 +511,7 @@ export function useInput<T extends HTMLInputElement | HTMLTextAreaElement = HTML | |||
return { | |||
...props, | |||
role: "button", | |||
tabIndex: 0, | |||
tabIndex: originalProps?.isDisabled ? -1 : 0, |
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.
It seems like you can use the button element and pass the disabled
attribute, which would remove the need for setting tabindex
and role: "button"
.
return <span {...getClearButtonProps()}>{endContent || <CloseFilledIcon />}</span>; |
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.
Thank you for your comment!
I agree with using the button element.
Do you think it would be better to proceed with that change?
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.
Yes, I think that would be better.
@@ -37,6 +37,14 @@ describe("Input", () => { | |||
expect(container.querySelector("input")).toHaveAttribute("disabled"); | |||
}); | |||
|
|||
it("should set tabIndex to -1 when isDisabled is true", () => { |
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.
The test should verify that clicking the button does not clear the input.
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.
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.
That’s true, but if you’re adding tests, I would appreciate it if you could verify that the button is disabled.
I think specifying the tabindex
will be resolved by marking it up as a button
.
and update tests for clear button using button element
@ryo-manba This change removes the need to manually handle tabIndex and role, while improving accessibility. |
📝 Description
This PR fixes an issue where the
clear button
inside theInput
component could still receive focus when the input is disabled (isDisabled
). The button is now properly excluded from the tab order by settingtabIndex
to-1
when the input is disabled.⛳️ Current behavior (updates)
record.mov
Currently, the
clear button
in theInput
component can still receive focus via the Tab key when the input is disabled. This behavior can cause accessibility issues and an inconsistent user experience.🚀 New behavior
With this fix, the
clear button
will no longer be focusable when the input is disabled. ThetabIndex
for theclear button
is set to-1
whenisDisabled
is true, preventing it from being part of the tab order.💣 Is this a breaking change (Yes/No): No
📝 Additional Information
This fix enhances accessibility and user experience by ensuring that the
clear button
behaves correctly when the input is disabled.Summary by CodeRabbit
<span>
to a<button>
element for improved semantic meaning and usability.tabIndex
property for the clear button to ensure compliance with keyboard navigation standards.tabIndex
when the input is disabled.