1846597 - Programmatic heading structure of FirefixView-Next is different than visual one

Status: RESOLVED FIXED

(Firefox :: Firefox View, defect, P3)

Description

[Anna Yeddi [:ayeddi]]

Attachment: NVDA_Output_for_all_headings.png

set browser.tabs.firefox-view-next to true

Recent browsing and Open tabs with Recently closed tabs are all <H2> headings which do not communicate their visual and hierarchical importance on the page:

• visually the Open tabs with Recently closed tabs are sub-sections for the Recent browsing, thus the next level of headings is expected (<h3>s)

Comment 1

[Mike Kaply [:mkaply]]

Is there a way to override this with accessibility parameters or do they have to be h3?

Comment 2

[Anna Yeddi [:ayeddi]]

(In reply to Mike Kaply [:mkaply] from comment #1)

Is there a way to override this with accessibility parameters or do they have to be h3?

Yes, there is ARIA aria-level="3" option (more on MDN), but there is also the first rule of ARIA ;)

FYI: there's a bug 1845411 to address heading structure a11y across the about:preferences pages, but AFAIK the solution is still in progress

Comment 3

[Mike Kaply [:mkaply]]

Attachment: Screenshot 2023-08-04 120519.png

So the first rule isn't that we don't talk about ARIA?

So in looking at the attached screenshot, we have everything as an h2

Do you think Firefox View should be h1, Open tabs should be h2 and Windows 1 should be h3?

Or can Firefox View and Open tabs both be h1 so we can leave the h2s alone?

The containing heading are really the right side only, so Firefox View isn't necessarily semantically connected to the Open tabs/window 1 I Think.

Comment 4

[Anna Yeddi [:ayeddi]]

(In reply to Mike Kaply [:mkaply] from comment #3)

Created attachment 9347432 [details]
Screenshot 2023-08-04 120519.png

So the first rule isn't that we don't talk about ARIA?

Correct, or one may say that the first rule of ARIA is not to use ARIA when a semantic HTML element/attribute/state exists.

So in looking at the attached screenshot, we have everything as an h2

Do you think Firefox View should be h1, Open tabs should be h2 and Windows 1 should be h3?

Or can Firefox View and Open tabs both be h1 so we can leave the h2s alone?

The containing heading are really the right side only, so Firefox View isn't necessarily semantically connected to the Open tabs/window 1 I Think.

Visually, the Firefox View is much bigger = more important => higher heading level than the Open tabs. Plus, this is the title of the page too, like a title of the book, thus this is a natural <h1>. And, as you offered, the Open tabs would be the next heading level => <h2> that is followed by the Window 1 as <h3>, since the Window 1 is a page included in the Open tabs chapter of our Firefox View book (updated the comment to add an informational structure === heading hierarchy below):

Firefox View
|_Open tabs
  |_Window 1
  |_Window 2
|_Recently closed tabs

Comment 5

[Mike Kaply [:mkaply]]

Attachment: Bug 1846597 - Use proper semantic styling for headers in view. r?jsudiaman

Comment 6

[Mike Kaply [:mkaply]]

Attachment: Error message

What are your thoughts on the header of the error messages?

They are currently h2.

See attached image.

Comment 7

[Mike Kaply [:mkaply]]

Attachment: Error message on page

We reuse this on the page as well where the "Tabs from other devices" is an h2.

Comment 8

[Anna Yeddi [:ayeddi]]

(In reply to Mike Kaply [:mkaply] from comment #7)

Created attachment 9348235 [details]
Error message on page

We reuse this on the page as well where the "Tabs from other devices" is an h2.

This looks good. Ideally, the error headings would be <h3> since it’s hierarchically fits under the Tabs From Other Devices category, but they both appear similarly important and having them as siblings instead of parent-child feels acceptable too.

Thank you for the through investigation, Mike!

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/56fe0efe48ff
Use proper semantic styling for headers in view. r=jsudiaman,fxview-reviewers

Comment 10

[Natalia Csoregi [:nataliaCs]]

https://hg.mozilla.org/mozilla-central/rev/56fe0efe48ff