Fix button focus #7287

faridomarAf · 2024-11-28T18:26:57Z

Button focusable issue fixed

Description

While we are using a Link-component for both Button & Link purposes, there should be a logic when it use as a Link it should acts as a Link, and when it use as Button it should as Button.

1: Enhancements to Button Component::

Role Handling: Added logic to differentiate between button and link usage based on the presence of the href prop.
Keyboard Accessibility: Implemented onKeyDown to handle Enter and Space keys, ensuring proper behavior for keyboard users.
Disabled State Management: Updated to respect disabled prop:
- Prevented clicks and keyboard interaction when button disabled.
- Removed from the tab order using tabIndex when disabled.
- Applied a disabled style conditionally.
Cleaner Role Logic: Dynamically set role to button only when used as a button.
Improved Prop Handling: Ensured onClick and tabIndex behave appropriately based on component usage.

2: Enhancements to CodeBox Component:

Dynamic Button State:
- Added a useState hook to manage the disabled state of the Copy button.
- Used useEffect to dynamically update the button's disabled state based on the presence of content in the <pre> element.
Keyboard Accessibility:
- Ensured proper tab behavior with tabIndex on the <pre> element for improved accessibility.
Improved User Experience:
- Prevented users from interacting with the Copy button if no content is available to copy.

Validation

https://www.loom.com/share/6f237ae46e7945f48650c1e710399e6f?sid=f8f6c2fc-faca-46e8-901a-021c38f091f9

Related Issues

#7247

Check List

I have read the Contributing Guidelines and made commit messages that follow the guideline.
I have run npm run format to ensure the code follows the style guide.
I have run npm run test to check if all tests are passing.
I have run npx turbo build to check if the website builds without errors.
I've covered new added functionality with unit tests if necessary.

vercel · 2024-11-28T18:27:02Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
nodejs-org	✅ Ready (Inspect)	Visit Preview	Dec 16, 2024 0:42am

bjohansebas

LGTM

apps/site/components/Containers/MetaBar/index.module.css

apps/site/components/Common/CodeBox/index.tsx

mikeesto

I don't understand why this component isn't a native <button> (there may well be a good reason). I think this change is an improvement because now it is focusable, but the default behaviour of href="#" is to jump the page to the top so that's not ideal either

ovflowd

I don't think this is an appropriate fix, we should be using tabindex and other properties.

ovflowd · 2024-11-30T01:06:35Z

I don't understand why this component isn't a native <button> (there may well be a good reason). I think this change is an improvement because now it is focusable, but the default behaviour of href="#" is to jump the page to the top so that's not ideal either

There are numerous reasons, mostly because all our "buttons" are links, this one is deceptively the only one that is not a button. Per specification a a element with role button, for all intends and purposes is a button; So that's not the issue.

faridomarAf · 2024-11-30T05:52:45Z

yeah guys this is not the proper way, sorry for late replying, you are right
let me check the components which this component is used in those because there are some functionality for "Enter key" and "Space key" that should be considered and also we should check is there any necessity for the "href" or no, whit checking all these, I would come whit a better solution for that which can be logically satisfying 😊

faridomarAf · 2024-12-11T06:22:20Z

hey guys @mikeesto @AugustinMauroy @ovflowd @bjohansebas could you please review my code, if there is any suggestion PLZ 😊

apps/site/components/Common/Button/index.tsx

mikeesto

Button focus seems good to me 👍

apps/site/components/Common/Button/index.tsx

bjohansebas

Everything seems to be working fine, LGTM

apps/site/components/Common/Button/index.tsx

faridomarAf · 2024-12-14T06:38:25Z

hi @bmuenzenmeyer , sorry for late response, I think the changes which I made in Button.tsx file, it caused the error, so a I checked the original code that is working, I would do my best to solve the issue

github-actions · 2024-12-14T11:15:29Z

Unit Test Coverage Report

Lines	Statements	Branches	Functions
	89.29% (634/710)	70.72% (186/263)	93.12% (122/131)

Unit Test Report

Tests	Skipped	Failures	Errors	Time
143	0 💤	0 ❌	0 🔥	5.062s ⏱️

apps/site/components/Common/Button/index.tsx

Signed-off-by: Claudio W <[email protected]>

ovflowd

LGTM!

ovflowd · 2024-12-16T12:42:41Z

Thanks for the first time contribution! Excited to get this merged ✨

faridomarAf · 2024-12-16T14:55:49Z

hey guys thank you so much for your follow up, actually it was my fist time to contribute in an open source project. all your comments an code views values much more for me
thanks 🙏

* add changes to MetaBar index.modul.css * add href to button * remove unrelated changes * apply changes to CodeBox file & Button file * add change to CodeBox file * add changes to CodeBox & Button component * import KeyboardEvent & MouseEvent from react at Button index.file * refactor: consolidate React imports into a single line * refactor: consolidate React imports into a single line * refactor: Button component & CodeBox compnent * Update: Button component modified in case of type-saftey at some part * omit unnecessary comment-lines, handle-proper naming * omit unnecessary comment-lines, handle-proper naming * Update apps/site/components/Common/Button/index.tsx Signed-off-by: Claudio W <[email protected]> --------- Signed-off-by: Claudio W <[email protected]> Co-authored-by: Claudio W <[email protected]>

faridomarAf added 2 commits November 28, 2024 13:46

add changes to MetaBar index.modul.css

121fe44

add href to button

ad14225

faridomarAf requested a review from a team as a code owner November 28, 2024 18:26

vercel bot deployed to Preview November 28, 2024 18:28 View deployment

bjohansebas reviewed Nov 29, 2024

View reviewed changes

mikeesto reviewed Nov 29, 2024

View reviewed changes

apps/site/components/Containers/MetaBar/index.module.css Outdated Show resolved Hide resolved

remove unrelated changes

7701f9c

vercel bot deployed to Preview November 29, 2024 07:37 View deployment

AugustinMauroy reviewed Nov 29, 2024

View reviewed changes

apps/site/components/Common/CodeBox/index.tsx Outdated Show resolved Hide resolved

mikeesto reviewed Nov 30, 2024

View reviewed changes

ovflowd reviewed Nov 30, 2024

View reviewed changes

faridomarAf added 3 commits November 30, 2024 14:15

apply changes to CodeBox file & Button file

e8f2eff

add change to CodeBox file

11057bb

add changes to CodeBox & Button component

6f9fa79

vercel bot deployed to Preview November 30, 2024 15:40 View deployment

AugustinMauroy reviewed Dec 11, 2024

View reviewed changes

apps/site/components/Common/Button/index.tsx Outdated Show resolved Hide resolved

AugustinMauroy reviewed Dec 11, 2024

View reviewed changes

apps/site/components/Common/Button/index.tsx Outdated Show resolved Hide resolved

import KeyboardEvent & MouseEvent from react at Button index.file

cf0e8f3

vercel bot deployed to Preview December 11, 2024 10:49 View deployment

refactor: consolidate React imports into a single line

c4348da

mikeesto reviewed Dec 11, 2024

View reviewed changes

apps/site/components/Common/Button/index.tsx Outdated Show resolved Hide resolved

apps/site/components/Common/Button/index.tsx Outdated Show resolved Hide resolved

bjohansebas reviewed Dec 11, 2024

View reviewed changes

refactor: consolidate React imports into a single line

e085abf

vercel bot deployed to Preview December 11, 2024 15:09 View deployment

bmuenzenmeyer reviewed Dec 11, 2024

View reviewed changes

apps/site/components/Common/Button/index.tsx Outdated Show resolved Hide resolved

bmuenzenmeyer approved these changes Dec 13, 2024

View reviewed changes

refactor: Button component & CodeBox compnent

ef1efba

vercel bot deployed to Preview December 14, 2024 07:52 View deployment

mikeesto added the github_actions:pull-request Trigger Pull Request Checks label Dec 14, 2024

github-actions bot removed the github_actions:pull-request Trigger Pull Request Checks label Dec 14, 2024

mikeesto deployed to Storybook December 14, 2024 11:13 — with GitHub Actions View deployment

ovflowd reviewed Dec 14, 2024

View reviewed changes

Update: Button component modified in case of type-saftey at some part

83b524f

vercel bot deployed to Preview December 14, 2024 12:16 View deployment

ovflowd reviewed Dec 14, 2024

View reviewed changes

apps/site/components/Common/Button/index.tsx Outdated Show resolved Hide resolved

apps/site/components/Common/Button/index.tsx Outdated Show resolved Hide resolved

omit unnecessary comment-lines, handle-proper naming

eaf25de

vercel bot deployed to Preview December 14, 2024 14:18 View deployment

omit unnecessary comment-lines, handle-proper naming

be629eb

vercel bot deployed to Preview December 14, 2024 14:27 View deployment

Update apps/site/components/Common/Button/index.tsx

a2b1696

Signed-off-by: Claudio W <[email protected]>

ovflowd approved these changes Dec 16, 2024

View reviewed changes

ovflowd added the github_actions:pull-request Trigger Pull Request Checks label Dec 16, 2024

github-actions bot removed the github_actions:pull-request Trigger Pull Request Checks label Dec 16, 2024

ovflowd deployed to Storybook December 16, 2024 12:42 — with GitHub Actions View deployment

vercel bot deployed to Preview December 16, 2024 12:42 View deployment

ovflowd enabled auto-merge December 16, 2024 12:44

ovflowd added this pull request to the merge queue Dec 16, 2024

Merged via the queue into nodejs:main with commit 3c274ba Dec 16, 2024
13 checks passed

canerakdas mentioned this pull request Dec 16, 2024

It's impossible to navigate to "Copy to clipboard" button using keyboard #7247

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix button focus #7287

Fix button focus #7287

faridomarAf commented Nov 28, 2024 •

edited

Loading

vercel bot commented Nov 28, 2024 •

edited

Loading

bjohansebas left a comment

mikeesto left a comment

ovflowd left a comment

ovflowd commented Nov 30, 2024

faridomarAf commented Nov 30, 2024

faridomarAf commented Dec 11, 2024

mikeesto left a comment

bjohansebas left a comment

faridomarAf commented Dec 14, 2024 •

edited

Loading

github-actions bot commented Dec 14, 2024 •

edited

Loading

ovflowd left a comment

ovflowd commented Dec 16, 2024

faridomarAf commented Dec 16, 2024

Fix button focus #7287

Fix button focus #7287

Conversation

faridomarAf commented Nov 28, 2024 • edited Loading

Button focusable issue fixed

Description

1: Enhancements to Button Component::

2: Enhancements to CodeBox Component:

Validation

Related Issues

Check List

vercel bot commented Nov 28, 2024 • edited Loading

bjohansebas left a comment

Choose a reason for hiding this comment

mikeesto left a comment

Choose a reason for hiding this comment

ovflowd left a comment

Choose a reason for hiding this comment

ovflowd commented Nov 30, 2024

faridomarAf commented Nov 30, 2024

faridomarAf commented Dec 11, 2024

mikeesto left a comment

Choose a reason for hiding this comment

bjohansebas left a comment

Choose a reason for hiding this comment

faridomarAf commented Dec 14, 2024 • edited Loading

github-actions bot commented Dec 14, 2024 • edited Loading

Unit Test Coverage Report

Unit Test Report

ovflowd left a comment

Choose a reason for hiding this comment

ovflowd commented Dec 16, 2024

faridomarAf commented Dec 16, 2024

faridomarAf commented Nov 28, 2024 •

edited

Loading

vercel bot commented Nov 28, 2024 •

edited

Loading

faridomarAf commented Dec 14, 2024 •

edited

Loading

github-actions bot commented Dec 14, 2024 •

edited

Loading