Fix a few minor accessibility issues with examples

[coliff]

• Link labels to inputs
• Add missing title and viewport to GL Stats page

Launch Checklist

• Confirm your changes do not include backports from Mapbox projects (unless with compliant license) - if you are not sure about this, please ask!
• Briefly describe the changes in this PR.
• Link to related issues.
• Include before/after visuals or gifs if this PR includes visual changes.
• Write tests for all new functionality.
• Document any changes to public APIs.
• Post benchmark scores.
• Add an entry to CHANGELOG.md under the ## main section.

[HarelM]

Gl stats is internal for testing, but I don't mind having it improved.

[codecov-commenter]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 87.69%. Comparing base (3164f1d) to head (f452979).

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #4205      +/-   ##
==========================================
+ Coverage   87.52%   87.69%   +0.17%     
==========================================
  Files         242      242              
  Lines       33080    33080              
  Branches     2178     2159      -19     
==========================================
+ Hits        28952    29009      +57     
+ Misses       3131     3085      -46     
+ Partials      997      986      -11     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[coliff]

I was going to suggest adding a HTMLHint test to make sure there are no bugs with all the HTML pages in the repo. For now you can run:

npx htmlhint **/*.html

for a .htmlhintrc config in the root with the following config:

{
  "alt-require": true,
  "attr-lowercase": true,
  "attr-no-duplication": true,
  "attr-unsafe-chars": true,
  "attr-value-double-quotes": false,
  "attr-value-not-empty": false,
  "doctype-first": false,
  "doctype-html5": true,
  "head-script-disabled": false,
  "href-abs-or-rel": false,
  "html-lang-require": true,
  "id-class-ad-disabled": true,
  "id-class-value": false,
  "id-unique": true,
  "inline-script-disabled": false,
  "inline-style-disabled": false,
  "spec-char-escape": false,
  "src-not-empty": true,
  "style-disabled": false,
  "tag-pair": false,
  "tag-self-close": false,
  "tagname-lowercase": true,
  "title-require": true
}

[HarelM]

But we have eslint with the html plugin already running... Are there rules there we can add?

[coliff]

But we have eslint with the html plugin already running... Are there rules there we can add?

I'll take a look!

[coliff]

@HarelM - re: eslint with the html plugin already running

https://www.npmjs.com/package/eslint-plugin-html

This plugin focuses on applying ESLint rules on inline scripts contained in HTML. It does not provide any rule related to HTML.

So maybe need to add this too: https://html-eslint.org/

[HarelM]

Feel free to add this. although, all these plugins are a hazard when eslint is releasing a breaking change version like they did with 9.0, as these tend to not be maintained, as start to fail.
But we can always remove them when they get stale I guess...