Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
ramonklanke opened this issue Jan 31, 2023 · 4 comments
Open

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

ramonklanke opened this issue Jan 31, 2023 · 4 comments
Labels

Comments

@ramonklanke
Copy link

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.

element: hasChildren ? document.createElement('div') : null

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

@ramonklanke ramonklanke changed the title Aria-Labe not set by mapbox-gl [Bug] Aria-Label not set by mapbox-gl [Bug] Jan 31, 2023
@Pessimistress
Copy link
Collaborator

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

@ramonklanke
Copy link
Author

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

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

ramonklanke added a commit to ramonklanke/react-map-gl that referenced this issue Apr 13, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants