content
content copied to clipboard
mdn
Add example to page for the “tablist” role identical to the example on the page for the “tab” role
MDN URL
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tablist_role
What specific section or headline is this issue about?
No response
What information was incorrect, unhelpful, or incomplete?
The page does not make it clear if tabpanel elements need to be within the tablist or outside of it (or whether that matters at all).
For example, is either of these invalid?
<div role=tablist>
<button role=tab/>
<button role=tab/>
<div role=tabpanel/>
<div role=tabpanel/>
</div>
<div role=tablist>
<button role=tab/>
<button role=tab/>
</div>
<div role=tabpanel/>
<div role=tabpanel/>
What did you expect to see?
sample code
Do you have any supporting links, references, or citations?
No response
Do you have anything more you want to share?
No response
MDN metadata
Page report details
- Folder:
en-us/web/accessibility/aria/roles/tablist_role - MDN URL: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tablist_role
- GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/accessibility/aria/roles/tablist_role/index.md
- Last commit: https://github.com/mdn/content/commit/b98d081f0d5d38667efa163f3660897a5a34747f
- Document last modified: 2022-06-30T01:51:03.000Z
The following examples place the <div role="tabpanel"> elements after the <div role="tablist"> element — as in your second sample — so I assume that is the recommended approach.
- https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role#example
- https://w3c.github.io/aria-practices/examples/tabs/tabs-automatic.html#sc1_label
- https://w3c.github.io/aria-practices/examples/tabs/tabs-manual.html#sc1_label
The example section on the tabpanel page refers to the example on the tab page, so I suggest an identical Example section be added to the tablist page.
Example
See the tabpanel, tab, and tablist example in the tab role definition.
I think this issue can be closed as there is a merged PR that implements the changes. Thanks!
Closing per as fixed by https://github.com/mdn/content/pull/19742 per https://github.com/mdn/content/issues/18555#issuecomment-1249965637
