[fix] pfe-jump-links heading accessibility issue

[markcaron]

Description of the issue

PFE Jump Links' heading has a couple accessibility issues/concerns:

1. The heading is not announced as a part of the nav. To fix it use an aria-labelledby attribute on the unordered list that references the heading's ID. If there is no ID on the heading, one would need to be autogenerated.
2. The live example (see screenshot) on the Doc's components page uses a <p> element, which isn't really a good suggestion. Note: the code under Usage uses an <h4> which is ok, though.

Also, the heading slot in the Demo page is misnamed as pfe-jump-links-nav--heading while the code expects simply heading. Probably should fix this too. See issue 1734.

Impacted component(s)

• pfe-jump-links

Steps to reproduce

1. Go to Jump Links component page
2. Inspect code at "Page Navigation"
3. See issue where there is no aria-labelledby

Expected behavior

Currently it just reads:

link, [Link text] list 3 items

However, once the heading is correctly referenced with aria-labelledby it should be announced with a screen reader on the first link that is focused, like:

link, [Link text] list Page navigation 3 items

Screenshots