visgl / react-map-gl

React friendly API wrapper around MapboxGL JS
http://visgl.github.io/react-map-gl/
Other
7.88k stars 1.35k forks source link

Aria-Label not set by mapbox-gl [Bug] #2115

Open ramonklanke opened 1 year ago

ramonklanke commented 1 year ago

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(() => {

    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

Logs

No response

Pessimistress commented 1 year ago

That looks reasonable. Would you open a PR to fix it?

ramonklanke commented 1 year ago

That looks reasonable. Would you open a PR to fix it?

I don't have rights to push my changes ...

Pessimistress commented 1 year ago

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

ramonklanke commented 1 year ago

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