[accessibility] Attribution container should not have role="list" (or should have listitem children)

[Malvoz]

mapbox-gl-js/src/ui/control/attribution_control.js

Line 64 in 36533f3

this._innerContainer.setAttribute('role', 'list');

The attribution links should either be children of list items (role="listitem") or role="list" should be removed.

See motivation in https://dequeuniversity.com/rules/axe/4.2/list?application=RuleDescription (describes <ul> and <li> requirements, the same is applicable to the equivalent ARIA roles list and listitem).

[avpeery]

Hi @Malvoz, thanks so much for your time! It seems to me that this specific accessibility issue is already set up correctly. Please correct me if I am misunderstanding. The role='list' attribute is set on the attribution container as a whole. When I go to inspect (on Chrome and Safari), the attribution links have the role listitem. Here are two screenshots from inspecting the attribution container element.

.

[Malvoz]

the attribution links have the role listitem

I actually don't recall seeing any role="listitem" children. Anyhow, overriding the implicit role="link" of <a> elements is problematic, as they're then announced as list items instead of links, so a user that relies on a screen reader wouldn't know that they are links.

It should rather be:
role="list" / <ul>
    role="listitem" / <li>
       <a>

Alternatively don't use a list (the benefit of using a list is that screen readers will announce the number of list items in the list).

[Catalyst497]

I'm interested in solving the little issue here. Could you assign it to me?
Please what file(s) am I going to be looking for here?

I am a first timer by the way.

[mrwweb]

It would be great to get this resolved! Noted accessibility expert @marcysutton caught this issue in a recent video review of a site using Mapbox.

As @Malvoz notes, overriding the default semantics of a link is a bad idea, and it doesn't seem like these really need to be in a list. (If they did, you could also put them in a real list!)

Looking at this Mapbox demo, I could not find anything with role="list", so I'd recommend just removing role="listitem".

If @Catalyst497 is still willing, maybe someone could assign them this task and fix this!?

[kumilange]

@mrwweb @Catalyst497 @Malvoz
I'd be happy to take over this task!
I see both role="list" in the container and role="listitem" in the links in Attribution with the latest version(v2.15.0).

1. Remove role="list"
We can remove it from attribution_control.js

2. Remove role="listitem"
The link elements seem to be provided by TileJSON and I'm not sure how to fix it on my end... this might be something to be handled by someone in the Mapbox team?

@tristen (seems like you worked on this PR) (cc: @stepankuzmin)
Would you be able to handle this?

As a quick fix, I can just remove role="listitem" in attribution_control.js but I understand that's not an ideal solution.

---

I made a draft PR based on the quick fix suggestion for now.
Kindly let me know how you'd like to go about this! 🙏🏻

[tristen]

Would you be able to handle this?

👋 @kumiko-haraguchi Thanks for the ping. I can handle those attributes in the TileJSON documents. Want to simplify that draft PR and assign a review from me?

[kumilange]

Hi @tristen 👋
Thank you so much for your help! Unfortunately, I don't seem to have permission to add a reviewer for my PR. But please feel free to edit it🙏

[Malvoz]

Fixed in #12857.