1590366 - Remove accessibility.heading-element-level-changes.enabled and code it guards

Status: RESOLVED FIXED

(Core :: Disability Access APIs, defect)

Description

[Anne (:annevk)]

Basically, revert the part of bug 998590 that's not cleaning up code, as the resulting user experience was not great on too many sites (many h1s that were expected by the site and user to be level 1 becoming level 2). Unfortunate, but at least we now know what path to not take.

Comment 1

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1590366 - Remove accessibility.heading-element-level-changes.enabled. r=MarcoZ

Well that was short :D

Comment 2

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/f56a91cd47c6
Remove accessibility.heading-element-level-changes.enabled. r=MarcoZ

Comment 3

[Cristina Coroiu [:ccoroiu]]

https://hg.mozilla.org/mozilla-central/rev/f56a91cd47c6

Comment 4

[Boris Zbarsky [:bzbarsky]]

Do we have a reference to the data mentioned in comment 0? I'm not seeing obvious bug reports linked to here or bug 998590...

Comment 5

[Emilio Cobos Álvarez (:emilio)]

I think it was mostly feedback from Marco and the rest of our a11y team.

Comment 6

[Jake Archibald]

Can that feedback be made public? It'd be good to see some URLs that were broken by this change.

Comment 7

[Anne (:annevk)]

Examples where h1 became h2 and that was frustrating were:

• Most WordPress blogs
• Articles linked from https://www.heise.de/newsticker/
• Bugzilla

Comment 8

[Jake Archibald]

For this page:

Outline based on number in heading tag:

Comment 9

[Jake Archibald]

Posted too early. Can't delete posts. Solution: make yet another post explaining that.

Comment 10

[Jake Archibald]

Headings on this page, levelled by the number in their tag name.

Bugzilla
  Quick Search
    Saved Searches
  Requests
Remove accessibility.heading-element-level-changes.enabled and code it guards
  Categories
    (Core :: Disability Access APIs, defect)
  Tracking
    (bug RESOLVED as FIXED for Firefox 72)
  People
    (Reporter: annevk, Assigned: emilio)
  References
  Details
  Crash Data
  Security
    (public)
  User Story
  Phabricator Revisions
    (1 active revision)
  Attachments
    (1 file)
    Description
    Updated
    Comment 1
    Updated
    Comment 2
    Comment 3
    Comment 4
    Comment 5
    Comment 6
    Comment 7
    Comment 8
    Comment 9

Two H1s, and comments appear under 'attachments' which isn't great. Could be worse.

If h1s get an extra level for every sectioning element they're within:

Bugzilla
  Quick Search
    Saved Searches
  Requests
  Remove accessibility.heading-element-level-changes.enabled and code it guards
  Categories
    (Core :: Disability Access APIs, defect)
  Tracking
    (bug RESOLVED as FIXED for Firefox 72)
  People
    (Reporter: annevk, Assigned: emilio)
  References
  Details
  Crash Data
  Security
    (public)
  User Story
  Phabricator Revisions
    (1 active revision)
  Attachments
    (1 file)
    Description
    Updated
    Comment 1
    Updated
    Comment 2
    Comment 3
    Comment 4
    Comment 5
    Comment 6
    Comment 7
    Comment 8
    Comment 9

Only 1 h1, but content is no longer under the heading of the bug title.

If all headings get an extra level for every sectioning element they're within:

Bugzilla
    Quick Search
        Saved Searches
    Requests
  Remove accessibility.heading-element-level-changes.enabled and code it guards
    Categories
      (Core :: Disability Access APIs, defect)
    Tracking
      (bug RESOLVED as FIXED for Firefox 72)
    People
      (Reporter: annevk, Assigned: emilio)
    References
    Details
    Crash Data
    Security
      (public)
    User Story
    Phabricator Revisions
      (1 active revision)
    Attachments
      (1 file)
      Description
      Updated
      Comment 1
      Updated
      Comment 2
      Comment 3
      Comment 4
      Comment 5
      Comment 6
      Comment 7
      Comment 8
      Comment 9

No more duplicate h1s. Content relating to the bug is correctly nested. Comments are still part of "attachments", but that was broken anyway. Some heading levels are skipped in the header, but that might not be a big deal?

I'm trying to figure out if we need to tweak the algorithm, or peruse <h> instead.

Here's how I figured out the heading levels. I realise it doesn't cater for <hgroup>.

function getParentSections(el) {
  const sectionEls = new Set(['nav', 'article', 'section', 'aside', 'blockquote', 'figure', 'td', 'details', 'fieldset'].map(n => n.toUpperCase()));
  let node = el;
  let num = 0;
  while (node = node.parentNode) {
    if (sectionEls.has(node.tagName)) num++;
  }
  return num;
}

function getTagHeadingLevels(useSections) {
  const headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6');
  return [...headings].map(heading => {
    let headingNumber = Number(heading.tagName.slice(1));
    if (useSections === 'all' || (useSections === 'h1' && headingNumber === 1)) {
      headingNumber += getParentSections(heading);
    }

    const indent = '  '.repeat(headingNumber - 1);
    return indent + heading.textContent.trim();
  }).join('\n');
}