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.

Sign up for GitHub

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

Jump to bottom

Issue with "WAI-ARIA basics": … #366

Closed
thierryk opened this issue Dec 17, 2020 · 7 comments · Fixed by thierryk/content#1
Closed

Issue with "WAI-ARIA basics": … #366

thierryk opened this issue Dec 17, 2020 · 7 comments · Fixed by thierryk/content#1
Assignees
@thierryk
Labels
Content:Accessibility Accessibility docs effort: small This task is a small effort. good first issue A good issue for newcomers to get started with. help wanted If you know something about this topic, we would love your help! p2 Minor issue with low priority, can be fixed later.

Comments

@thierryk
Copy link

thierryk commented Dec 17, 2020 •
edited
Loading

MDN URL: https://developer.mozilla.org/en-US/docs/Learn/Accessibility/WAI-ARIA_basics

What information was incorrect, unhelpful, or incomplete?

The article suggests that an element with role=tablist contains the tabs of a tab panel.

Specific section or headline?

New roles — tablist, tab, tabpanel — these identify the important areas of the tabbed interface — the container for the tabs, the tabs themselves, and the corresponding tabpanels.

What did you expect to see?

New roles — tablist, tab, tabpanel — these identify the important areas of the tabbed interface — the container for the tabs (or the container used for referencing the tabs), the tabs themselves, and the corresponding tabpanels.

Did you test this? If so, how?

Using "skip links" for tabs is not mandatory to create a tab panel. A tablist can be empty as long as it references the tabs via aria-owns. For example:

<div role="tablist" aria-owns="tpw-0-0-t tpw-0-1-t tpw-0-2-t tpw-0-3-t"></div>

Here is a live example: https://tabpanelwidget.com

MDN Content page report details
@chrisdavidmills chrisdavidmills added effort: small This task is a small effort. good first issue A good issue for newcomers to get started with. help wanted If you know something about this topic, we would love your help! p2 Minor issue with low priority, can be fixed later. and removed 30 minute task labels Mar 15, 2021
@chrisdavidmills
Copy link
Contributor

To whoever fixes this, you need to update the description as suggested.

@thierryk
Copy link
Author

@chrisdavidmills if you're ok with my description, I can do the PR

@chrisdavidmills
Copy link
Contributor

@thierryk I'd be happy for you to do so. Assigning; thanks!

@thierryk
Copy link
Author

@chrisdavidmills As far as I know, there is no example of tabpanel using empty tablist in the wild (apart from http://tabpanelwidget.com).
Let me know if you think I should link to it as an example.

thierryk added a commit to thierryk/content that referenced this issue Mar 16, 2021
@thierryk
tablist can be empty + example
8bc42bd 
- Added mention of **empty** `tablist` in the widget description
- Added a paragraph explaining how ARIA works with empty `tablist` 
- Added a markup example of tabs not based on list items

I did not include [an example](mdn#366 (comment))
thierryk added a commit to thierryk/content that referenced this issue Mar 16, 2021
@thierryk
Update index.html
98eb0df 
- Added mention of **empty** `tablist` in the widget description
- Added a paragraph explaining how ARIA works with empty `tablist` 
- Added a markup example of tabs not based on list items

I did not include [an example](mdn#366 (comment))
@thierryk thierryk mentioned this issue Mar 16, 2021
Merged
@chrisdavidmills
Copy link
Contributor

@chrisdavidmills As far as I know, there is no example of tabpanel using empty tablist in the wild (apart from http://tabpanelwidget.com).
Let me know if you think I should link to it as an example.

Yes, that sounds like a good idea to me.

thierryk added a commit to thierryk/content that referenced this issue Mar 17, 2021
@thierryk
Merge pull request #1 from thierryk/thierryk-patch-1-1
023970b 
tablist can be empty + example (closes mdn#366)
@thierryk thierryk mentioned this issue Mar 17, 2021
Closed
@thierryk
Copy link
Author

Oops, I should not have mentioned this issue in my "own" PR (that was not the plan).

Here is the PR that was supposed to close this issue: #3235

@thierryk
Copy link
Author

Reopening to keep it open until #3235 goes through.

@thierryk thierryk reopened this Mar 19, 2021
@Ryuno-Ki Ryuno-Ki mentioned this issue Apr 7, 2021
Closed
@github-actions github-actions bot added the idle label Nov 24, 2021
@estelle estelle closed this as completed Apr 5, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@thierryk thierryk

Labels
Content:Accessibility Accessibility docs effort: small This task is a small effort. good first issue A good issue for newcomers to get started with. help wanted If you know something about this topic, we would love your help! p2 Minor issue with low priority, can be fixed later.
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

tablist can be empty + example (closes #366) thierryk/content
3 participants
@chrisdavidmills @estelle @thierryk