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.

Sign up for GitHub

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

Jump to bottom

Compact attribution accessibility attribute missing #13227

Closed
matteiben-onx opened this issue Jul 16, 2024 · 2 comments
Closed

Compact attribution accessibility attribute missing #13227

matteiben-onx opened this issue Jul 16, 2024 · 2 comments
Labels
bug 🐞

Comments

@matteiben-onx
Copy link

matteiben-onx commented Jul 16, 2024 •
edited
Loading

Description

#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
Copy link

Malvoz commented Aug 6, 2024

Related / possible duplicate of #13143.

@matteiben-onx
Copy link
Author

Closing this issue as resolved in v3.6

https://github.com/mapbox/mapbox-gl-js/blob/main/CHANGELOG.md#360

  • Fix accessibility issues with compact attribution button and logo.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug 🐞
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@stepankuzmin @Malvoz @matteiben-onx