feat: add optional prop to set aria-label on OL canvas element in shadow root

[jessicamcinchak]

Adds an optional string prop ariaLabelOlFixedOverlay which sets an aria-label on the canvas element rendered in the shadow root.

Per page 98 of recent audit:

The map feature on the page does not have an accessible name. This instance can be found
with the canvas below the ‘about the property’ heading. The map has been written with an
appropriate element, however the element is missing an accessible name, meaning that
screen reader users get relayed the text ‘basemap subject to crown copyright…’, which does
not provide these users with information that is presented visually.

Solution:
As the map contains a focusable element, consider adding an accessible name to the map
feature by adding an aria-label to the canvas.

References / possible gotchas:

• In our first audit, we'd wrongly introduced (and later rolled back) an ariaLabel prop on the container div element break: remove ariaLabel property #86
• There's a stale openlayers issue related to setting this directly on the main canvas (see comment below about which canvas this label is actually being set on): Allow aria-label to be set on the canvas openlayers/openlayers#12485

[netlify]

✅ Deploy Preview for oslmap ready!

Name	Link
🔨 Latest commit	b3807a0
🔍 Latest deploy log	https://app.netlify.com/sites/oslmap/deploys/66150a3823fade0008de1ed6
😎 Deploy Preview	https://deploy-preview-445--oslmap.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[jessicamcinchak]

There's two canvas elements rendered by OL in the shadow root, but I've only been able to successfully select this one - which does differ than the code reference given in our report:

Current code ref(s):
#property-information-map > div > div.ol-unselectable.ol-layers > div:nth-child(2) > canvas

So,

• Am I missing something obvious to be able to select the .ol-unselectable .ol-layers canvas element?
• If that canvas is actually unselectable, are we still happy applying this proposed fix to this canvas and seeing how it re-tests?

[DafyddLlyr]

This is a good point to flag and I think I know why you're getting inconsistent results.

My understanding is that OpenLayers doesn't generate either a single canvas, or canvas per-layer, but rather adds additional canvases as needed for memory/rendering.

I'm trying to find some sort of reference to this online and nothing yet to confirm this in writing!

Looking through OpenLayers examples and inspecting the DOM you can see maps with multiple layers on a single canvas, and some spread over multiple canvases.

What might be best here is trying to select all canvas elements (querySelectorAll() I think) and appending ${ariaLabelOlFixedOverlay}-${i}?

[jessicamcinchak]

Dev call resolution here:

• We don't want to label all & overread (even if we could successfully select all)
• By targeting fixedoverlay, we are targetting the outermost canvas which will hopefully still achieve same result as original suggestion
• It's a usability issue, not A-level - so let's keep it timeboxed!

[jessicamcinchak]

Interactive map feature [Usability]

[DafyddLlyr]

One thing I noticed is that the old ariaLabel prop is still mentioned in the Pitsby docs, so it's worth trying to update this at the same time here I think.

[DafyddLlyr]

This is a good point to flag and I think I know why you're getting inconsistent results.

My understanding is that OpenLayers doesn't generate either a single canvas, or canvas per-layer, but rather adds additional canvases as needed for memory/rendering.

I'm trying to find some sort of reference to this online and nothing yet to confirm this in writing!

Looking through OpenLayers examples and inspecting the DOM you can see maps with multiple layers on a single canvas, and some spread over multiple canvases.

What might be best here is trying to select all canvas elements (querySelectorAll() I think) and appending ${ariaLabelOlFixedOverlay}-${i}?