Skip to content
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

[n/a] add Tabs documentation #3

Merged
merged 2 commits into from
Feb 4, 2022
Merged

[n/a] add Tabs documentation #3

merged 2 commits into from
Feb 4, 2022

Conversation

gregkohn
Copy link
Contributor

data-action="keyup->tabs#cycleTabs"
role="tablist"
>
{['Tab 1', 'Tab 2', 'Tab 3'].map((text, i) => (

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Super minor, but the JSX here might potentially trip up newer folks who aren't familiar what parts are Stimulus syntax and what's JSX.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fair, i struggled with that. should we commit to twig demo code? the hold up for me was i couldnt actually (or easily) verify the twig code the way i could the jsx code

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

oh and then i thought i could just manually do multiple elements but i figured the loop logic was helpful for the attributes even if it was in jsx 🤷

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

somewhat related, entirely nit/subjective: did you consider having everything in a single array? like

tabsAndTabpanels = [
  {
    tabContent: …,
    tabpanelContent: …,
  },
  …
]

Copy link

@olets olets left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is great. Thoughts about improving accessibility?

  • arrow, home, and end keys to switch between tabs
  • tabindex="0" on the active tabpanel
  • aria-controls / aria-labelledby between tabs and tabpanels
  • aria-selected on tabs
  • aria-label on the tablist

Refs:

@gregkohn
Copy link
Contributor Author

gregkohn commented Nov 9, 2021

  • arrow, home, and end keys to switch between tabs

👍 you just mean home & end are missing?

  • tabindex="0" on the active tabpanel

👍

  • aria-controls / aria-labelledby between tabs and tabpanels

aria-labelledby 👍
@ten1seven was advising against aria-controls after was dragged by Heydon. w3c has an open ticket. i donno how we feel about it now but i haven't been using it.

  • aria-selected on tabs

this is already there unless i'm missing something?

  • aria-label on the tablist

👍

@olets
Copy link

olets commented Nov 9, 2021

just home & end

huh. correct. don't know what I was looking at ha

aria-controls

oh interesting I missed that

aria-selected

"huh. correct. don't know what I was looking at ha" take 2 🤷‍♂️

@gregkohn gregkohn merged commit aa38986 into gk/class-list Feb 4, 2022
@gregkohn gregkohn deleted the gk/tabs branch February 4, 2022 23:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants