<g> element <path> children's <title> values are not read

[prushforth]

Leaflet renders vector info as SVG <path>s, which it groups into a single <g> element. Each feature you create is rendered as a path inside that <g>, and we have successfully added a <title> to each one, anticipating that it might be read by screen readers.

While the "g" is announced (on chrome, "blank" on FireFox) for each <path> inside the <g>, the path's <title> value doesn't get read. If I remove the <g> in devtools (re-parenting the <path>s to be children of <svg>) , both "g" and the <title> value are announced (using NVDA in Chrome. I tried that trick with FireFox but the tab crashed). Is there some way to convince screen readers to look inside a group for path titles ?

I think @shepazu may have already written the answer to this in blog post form: <path aria-label="accessible name"...> attribute instead of (as well as??) <path><title>

cc @Malvoz

[prushforth]

Update: aria-label seems to work in Chrome but not in FireFox (with NVDA) .

[prushforth]

I think the reason that there were issues with the <title> element was because it was being created with document.createElement. So I believe this PR fixes the screen reader issue.

[prushforth]

While the PR did fix the screen reader issue, mostly, it didn't fix it for the first path in the group; at least, you have to tab past the first path and then shift-tab to it, and then it is read. But it's better than it was. If you have an idea about how to solve this latter problem, please comment. I'll close this issue for the time being.

Of note is that this latter problem exists in both Chrome and Firefox.

[Malvoz]

for the first path in the group; at least, you have to tab past the first path and then shift-tab to it, and then it is read.

Screen readers seem to have problems with nested interactive elements (map features are nested interactive elements inside leaflet-container which has tabindex="0"). I don't think there are many (if any) interactive elements except for <summary> that allow interactive content as descendants per the HTML spec so that's probably why screen readers don't handle it well. If tabindex="0" is removed from leaflet-container the first path in the group is announced correctly.

If role="application" (#274) is applied to <mapml-viewer> the first path in the group is announced correctly.

Setting aria-live="polite" on the tooltip can be used to tell screen readers to announce the content as it pops up on hover/focus, but I think that'll ultimately end up with screen readers announcing both <path><title> and the tooltip (on focus). And because they're identical that could be pretty annoying.