1551641 - Add role="button" to the Section and Edit buttons next to headings

Status: RESOLVED WONTFIX

(developer.mozilla.org Graveyard :: Wiki pages, defect, P3)

Description

[Eric Shepherd [:sheppy]]

What did you do?

Next to <h2> and possibly other heading levels, MDN places icons you can click to get a link to that section, or to open the CKEditor to make changes to the content.

Because of the way the markup currently looks, many tools that examine or scrape MDN content are not able to determine that the textual titles of those buttons, which appear in the page source as <span>Edit</span> and <span>Section</span> are not actually part of the heading text.

What happened?

As a result, these tools determine that, for example, a section whose title is "Baking biscuits" would be determined by these tools to be "Baking biscuitsEditSection".

This happens, for instance, when using a Firefox extension such as headingsMap. You wind up with this extra text listed throughout the output.

What should have happened?

These buttons should have the ARIA role="button" attribute on them. This would allow tools to easily detect that these blocks are not actually intended to be treated as part of the content.

Is there anything else we should know?

Comment 1

[Schalk Neethling [:espressive]]

I will take this and suggest P2, and 2 points.

Comment 2

[David Flanagan [:djf]]

I took this bug during triage a few weeks back because I was going to be working on adding the section link feature to headings on the beta site. I've only now started investigating...

• I can reproduce what Sheppy reports using the headingsMap addon he mentions.

• Unfortunately, adding role="button" has no effect on what headingsMap displays.

Adding role="button" might still be the right thing to do, but since I don't have a concrete example of where it would make an actual difference, I don't want to risk breaking a11y.

Instead of using role=button another approach to this would be to move the buttons so that they are outside of the h2 header. But that would involve creating a more complicated layout to get the header and buttons on the same line.

At this point, I'm going to unassign myself, since I don't want to screw something up in my last week of work...

Comment 3

[BMO Automation]

MDN Web Docs' bug reporting has now moved to GitHub. From now on, please file content bugs at https://github.com/mdn/sprints/issues/ and platform bugs at https://github.com/mdn/kuma/issues/.