Fix button focus

[faridomarAf]

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]

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

[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]

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]

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]

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

[mikeesto]

Button focus seems good to me 👍

[bjohansebas]

Everything seems to be working fine, LGTM

[ovflowd]

Apologies for not checking in here, have been busy with personal matters 🙏

[faridomarAf]

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]

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 ⏱️

[ovflowd]

LGTM!

[ovflowd]

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

[faridomarAf]

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 🙏