"On this page" should be read as a heading with a level of 2

[bkjohnson]

Bug Report

• I’ve searched for any related issues and avoided creating a duplicate issue.

Related ticket: #768 (comment)

What happened

The "On this page" text in <va-on-this-page> is not accessible enough for screen readers since it isn't appearing as a header. When I tell the screen reader to navigate using the headings of the page, it skips "On this page" entirely.

Screencast.2022-05-06.14.03.35.mp4

What I expected to happen

I expected "On this page" to be treated as a heading for navigation purposes.

Reproducing

Steps to reproduce:

1. Turn on your screen reader of choice
2. Go to a page with <on-this-page>, such as the storybook iframe
3. Navigate using headings
4. Notice that "On this page" is skipped while all of the other headings are read

Acceptance Criteria

• The "On this page" <dt> has role="heading"
• The "On this page" <dt> has aria-level="2"

[andresriveratoro]

It looks like dl elements cannot contain a heading element.