BP Nouveau: Member and Group Cover Image links are not accessible to assistive techonologies.

[mercime]

Every link must have an accessible name or discernable text for assistive technologies. "If a link contains no text, the function or purpose of the link will not be presented to the user. This can introduce confusion for keyboard and screen reader users."

Our cover image links have no link content:
Groups: <a id="header-cover-image" href="<?php echo esc_url( bp_get_group_permalink() ); ?>"></a>
Members: <a id="header-cover-image" href="<?php bp_displayed_user_link(); ?>"></a>

Possible fixes: add accessible text to the link or remove the link and replace with a div. Other possibilities welcome.

Ref: ​WCAG 2.0 > Principle 2: Operable - User interface components and navigation must be operable. > 2.4 Provide ways to help users navigate, find content, and determine where they are. > ​2.4.4 Link Purpose (In Context) which is consistent in the new ​WCAG 2.1

[hnla]

@mercime which link, where?

[mercime]

@hnla Per my post above, our cover image links have no link content::

Groups: <a id="header-cover-image" href="<?php echo esc_url( bp_get_group_permalink() ); ?>"></a>
Members: <a id="header-cover-image" href="<?php bp_displayed_user_link(); ?>"></a>

[hnla]

Yep I was just asking for a file reference really, wasn't clear where the link was and where it is wasn't an intuitive place to look :)

Really don't know why there needs to be an anchor/href there but the same exists for Legacy too.

I'll have a quick play around removing, try and see what if anything breaks, but this likely needs a deeper scan of the implementation of these cover images.

[hnla]

Well it doesn't seem as though the href is actually required for anything...obvious; I can remove and re-upload a new image ok so it feels as though we can probably change the element to a span or div as long as we retain the id token and delete the href attr.

I also note we link the group avatar on the group page not sure why we need to do this, a link for no apparent reason that simply loops back to the page already on!!!

[DJPaul]

Let's remove these links and replace with DIVs for Nouveau. Less certain about modifying Legacy at this point, but I don't mind too strongly.

[hnla]

My tests replacing with a div for Nouveau seemed ok so lets commit your patch @mercime my only reservation being the Legacy changes, feel we should focus on Nouveau where we can change with impunity whereas are we sure we can change Legacy templates with certain safety e.g no one might have done 'something' based on the anchor??

[DJPaul]

I had exactly the same thought about whether we should change Legacy, but I didn’t say anything because I didn’t want to influence the discussion before Hugo commented.

I’m agreeing with hnla here

[mercime]

In 11995:

BP Nouveau: Replace empty links for Group & Member Header Cover Images.

Props hnla, DJPaul.
Fixes #7747.