HeadingPermalinkRenderer Accessibility

[ceford]

Description

My System - Joomla Accessibility Checker tells me there is a problem with empty links. I fixed it in:

league/commonmark/src/Extension/HeadingPermalink/HeadingPermalinkRenderer.php

by commenting out line 70 so the href attribute does not appear in the anchor. Could that be right?

Example

    //$attrs->set('href', '#' . $fragmentPrefix . $slug);

Did this project help you today? Did it make you happy in any way?

No response

[samwilson]

You might be better off finding the markdown that contains an empty link (e.g. Lorem [ipsum]() dolor.) and fixing that instead. Or are you saying that CommonMark should never add an href attribute that's empty?

[ceford]

What I am saying is that the Heading PermaLink Extension (https://commonmark.thephpleague.com/2.4/extensions/heading-permalinks/) creates an empty link before or after a heading as the destination of each item in the Contents and accessibility tools flag empty links as a serious error (https://webaim.org/techniques/hypertext/hypertext_links). The destination should not be a link at all and removing the href attribute from the destination tag seems to do just that. But is that the best way to do it?

[samwilson]

Ah, that makes sense. So you're saying that there are circumstances in which $fragmentPrefix and $slug are both empty strings and the result is just href="#"?

[ceford]

This is the code of a heading:

<h2>Introduction<a id="content-introduction" href="#content-introduction" class="heading-permalink" title="Permalink">¶</a></h2>

And this is the Contents item:

<li>
<a href="#content-introduction">Introduction</a>
</li>

It works fine but does not pass accessibility validation.

[colinodell]

The links are technically not empty, as they do contain a ¶ clickable character. (You can also change this string to anything you'd like using the symbol config setting.)

Could you share more details about why Joomla thinks this link is empty? Are they expecting a certain minimum number of characters or something?

[ceford]

Going back to the code of a heading I quoted:

<h2>Introduction<a id="content-introduction" href="#content-introduction" class="heading-permalink" title="Permalink">¶</a></h2>

This is a link that points to itself! I think the heading should really be a target, like this:

<h2 id="content-introduction" class="heading-permalink" >Introduction</h2>

Not sure if the class is really needed!