Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Add capability to all components to take a tabIndex prop #301

Closed
Ibabalola opened this issue Jun 27, 2022 · 1 comment
Closed

Add capability to all components to take a tabIndex prop #301

Ibabalola opened this issue Jun 27, 2022 · 1 comment
Assignees
Labels
a11y a11y
Milestone

Comments

@Ibabalola
Copy link
Contributor

Ibabalola commented Jun 27, 2022

All components of the library should be "tabbable", so to be so we need to expose prop, which allow consumers to pass in an index that can be assigned to a tabindex prop, for example:

<div tabindex="1">First</div>
<div tabindex="2">Second</div>

Please add capability to the following components to take a tabIndex that can added to the element within the DOM.

  • Button
  • CopyToClipboard
  • Details
  • FormDate
  • FormSelect
  • MultiSelect
  • Progress
  • Range
  • Table

The first tab index on a web page should typically be 0, 1, or -1.
A tab index of 0 means that the element should be focusable in the tab order of the page, but its order is defined by the order in which the elements appear in the document.
A tab index of 1 or greater means that the element should be focusable in the tab order of the page, and the element should be the next one to receive focus when the user tabs. The order is determined by the value of the tab index, with the lowest value being focused first.
A tab index of -1 means that the element should not be focusable in the tab order of the page, but it can receive focus through other means (e.g., by using the mouse, or by being the target of a programmatic focus action).
In general, it is best to use a tab index of 0 or -1 for most elements, and reserve a tab index of 1 or higher for elements that need to be focused first in the tab order (e.g., a search box or a call-to-action button). This helps to ensure that the tab order is logical and easy to navigate for users.

The default tab index for an element is 0, which means that the element should be focusable in the tab order of the page, but its order is defined by the order in which the elements appear in the document.
In general, it is best to use a tab index of 0 or -1 for most elements, and reserve a tab index of 1 or higher for elements that need to be focused first in the tab order (e.g., a search box or a call-to-action button). This helps to ensure that the tab order is logical and easy to navigate for users.
If an element does not have a tab index specified, it will be given the default tab index of 0. Therefore, if you do not want an element to be focusable in the tab order of the page, you should explicitly set its tab index to -1.

the default tab index should be 0

Please create your branch from release/0.6

git checkout release/0.6
git pull
git checkout -b 'feature/tab-index'
@Ibabalola Ibabalola added the a11y a11y label Jun 27, 2022
@Ibabalola Ibabalola added this to the 0.5 milestone Jun 27, 2022
@mmirca mmirca assigned mmirca and unassigned mmirca Jun 29, 2022
@daniele-zurico daniele-zurico modified the milestones: 0.5, 0.6 Jul 25, 2022
@daniele-zurico daniele-zurico removed this from the 0.6 milestone Dec 20, 2022
@szilvihorvath szilvihorvath self-assigned this Jan 5, 2023
@daniele-zurico daniele-zurico added this to the 0.7 milestone Jan 17, 2023
@daniele-zurico
Copy link
Contributor

closed by #389 #393 #394 #395 #396 #397

# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
a11y a11y
Projects
None yet
Development

No branches or pull requests

4 participants