Description
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.
react-map-gl/src/components/marker.ts
Line 100 in 109c334
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(() => {
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
};
.....
`
Environment
- Framework version: react-map-gl@7.0.21
- Map library: mapbox-gl@2.12.0
- Browser: Chrome 109.0.5414.119
- OS: OSX ventura 13.1
Logs
No response