Skip to content

Heading anchor links aren't announced correctly by screen reader

Brett Walkerrequested to merge
bw-custom-html-formatter into main

What does this MR do and why?

Customises our rendering of NodeValue::Headings to fix Heading anchor links aren't announced correctly... (gitlab-org/gitlab#463385), by rendering the header title inside the <a> tag (instead of after it) to better support screen readers, as well as dropping aria-hidden="true".

Our output changes from:

<h2 data-sourcepos="5:1-5:18" dir="auto">
  Expected result
  <a href="#expected-result" aria-hidden="true" class="anchor" id="user-content-expected-result">
  </a>
</h2>

to:

<h2 data-sourcepos="5:1-5:18" dir="auto">
  <a href="#expected-result" class="anchor" id="user-content-expected-result">
    Expected result
  </a>
</h2>

Related to gitlab-org/gitlab#463385. The integration MR demo'ing this in GitLab is at gitlab-org/gitlab!183564.

Edited by Asherah Connor

Merge request reports