Skip to content

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

Open
@ramonklanke

Description

@ramonklanke

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

  • 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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions