search

mapbox / mapbox-gl-js

Interactive, thoroughly customizable maps in the browser, powered by vector tiles and WebGL
https://docs.mapbox.com/mapbox-gl-js/
Other
11.05k stars 2.21k forks source link

Compact attribution accessibility attribute missing #13227

Open matteiben-onx opened 1 month ago

matteiben-onx commented 1 month ago

Description

https://github.com/mapbox/mapbox-gl-js/pull/12981 removed an accessibility attribution which Lighthouse wants on the compact attribution control.

mapbox-gl-js version: 3.4

browser: Chrome

Steps to Trigger Behavior

  1. Run a simple map using the compact attribution control (source code below)
  2. Run lighthouse report using Chrome dev tools
  3. See failure image posted below

Link to Demonstration

Attribution control does not work in https://jsbin.com, so listing simple source code here.

Run the following in Chrome and run a lighthouse report in the chrome dev tools

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Display a map on a webpage</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <link href="https://api.mapbox.com/mapbox-gl-js/v3.4.0/mapbox-gl.css" rel="stylesheet">
    <script src="https://api.mapbox.com/mapbox-gl-js/v3.4.0/mapbox-gl.js"></script>
    <style>
      body { margin: 0; padding: 0; }
      #map { position: absolute; top: 0; bottom: 0; width: 100%; }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      mapboxgl.accessToken = 'ACCESS_TOKEN'

      const map = new mapboxgl.Map({
        container: 'map',
        center: [-74.5, 40],
        zoom: 9
      })

      map.on('load', () => {
        const control = new mapboxgl.AttributionControl({
          compact: true,
        })
        map.addControl(control, 'bottom-left')
      })
    </script>
  </body>
</html>

This will trigger a report with this at the top

Screenshot 2024-07-16 at 10 54 16 AM

The PR removing the accessibility attribution was in release 3.10. Any users gating CI behind a lighthouse check will fail once consuming >= that version.

Expected Behavior

Accessibility attribute aria-label exists.

Actual Behavior

Accessibility attribute is missing

Malvoz commented 1 month ago

Related / possible duplicate of https://github.com/mapbox/mapbox-gl-js/issues/13143.