openui / openui/open-ui

[tabs] Concern about heading declarations as boundaries

Open
#412 3 comments 1 reaction 1 assignee View on GitHub

@bkardell is already working on this.

Since Nov 3, 2021.

needs-triage Tabs
Dominant language
MDX
Stars
4.5k
Forks
226
Avg merge
2d 22h
Merged PRs (30d)
4

Description

I'm coming in from https://daverupert.com/2021/10/native-html-tabs/ and noticed a couple of things that might lead to some delimiting confusion when not using delimiters/containers around the sections. I couldn't really find a central design doc around these after quite a few minutes of grepping around in search bars and poking around in directories.

  1. role=heading aria-level=7 is a way to have more than <h6> level headings but in theory it could also be applied to elements. I'm guessing these would be picked up? In particular mixing <h1> and aria-level=1 would both have them be sections?

  2. mixing headings is quite possible so tracking the "top level" heading value seems like it needs to occur but it can be confusing in poor markup scenarios like:

    1. having a heading level that appears to be out of order
<spicy-section>
  <h2>post A</h2>
  hi
  <h1>port B</h1>
  there
</spicy-section>
2. having a nested heading in a section
<spicy-section>
  <h1>movie 1</h1>
  <h2>cast</h1>
  Bob
  <h1>movie 2</h1>
  there
</spicy-section>
  1. normally in screen readers tab titles and accordion summaries aren't treated as part of the heading navigation, I guess this would enforce that they are if they are using heading semantics to split up the interface. It seems like being able to have those without the header role would be nice since the common case today is not for them to be treated as headers in my own experience and looking in WCAG it doesn't look like they are normally.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.