Skip to content

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

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

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions