Open ramonklanke opened 1 year ago
When adding a [aria-label] attibute to the child element of a marker, this should be copied to the marker itself. Based on the code of the underlying mapbox-gl-js library.: https://github.com/mapbox/mapbox-gl-js/blob/1621f7f75597d56318f7ca12a9494f05a94cdabf/src/ui/marker.js#L166
but because of the creation of a new div element in this marker wrapper this feature isn't triggered. https://github.com/visgl/react-map-gl/blob/109c334bdffaa5b2016c50bf6aaa119ce56082ce/src/components/marker.ts#L100
and we end-up with all markers that have the same [aria-label] = "Map marker"
aria-label of child element should be copied to the marker.
<Marker longitude={long} latitude={lat}><div aria-label="welcome home">home</div></Marker>
will end-up with a marker aria-label="Map marker" instead of "welcome home"
possible fix:
` const marker = useMemo(() => {
let childElement = null; React.Children.forEach(props.children, el => { if (el) { const { children, ...other } = el.props; childElement = document.createElement('div'); if (other['aria-label']) { childElement.setAttribute('aria-label', other['aria-label']); } } }); const options = { ...props, element: childElement };
..... `
No response
That looks reasonable. Would you open a PR to fix it?
I don't have rights to push my changes ...
https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request-from-a-fork
thanks!
https://github.com/visgl/react-map-gl/pull/2159
Description
When adding a [aria-label] attibute to the child element of a marker, this should be copied to the marker itself. Based on the code of the underlying mapbox-gl-js library.: https://github.com/mapbox/mapbox-gl-js/blob/1621f7f75597d56318f7ca12a9494f05a94cdabf/src/ui/marker.js#L166
but because of the creation of a new div element in this marker wrapper this feature isn't triggered. https://github.com/visgl/react-map-gl/blob/109c334bdffaa5b2016c50bf6aaa119ce56082ce/src/components/marker.ts#L100
and we end-up with all markers that have the same [aria-label] = "Map marker"
Expected Behavior
aria-label of child element should be copied to the marker.
Steps to Reproduce
<Marker longitude={long} latitude={lat}><div aria-label="welcome home">home</div></Marker>
will end-up with a marker aria-label="Map marker" instead of "welcome home"
possible fix:
` const marker = useMemo(() => {
..... `
Environment
Logs
No response