fix(lint-page): add accessible labels to filters (#17434)

## Summary

Fix 4 WAVE accessibility errors on the Clippy lints page
(#15604).

The `theme-choice` <select> and three version-filter <input> elements
had no programmatically associated labels, making them unidentifiable to
screen readers.

## Changes

- `util/gh-pages/index_template.html:34` — changed `<div
class="setting-radio-name">` to `<label class="setting-radio-name"
for="theme-choice">` to associate the visible "Theme" text with the
select element
- `util/gh-pages/index_template.html:121-123` — added
`for="version-filter-{{ name }}"` on each version label and
`id="version-filter-{{ name }}"` on each version input, producing three
pairings: version-filter-gte, version-filter-lte, version-filter-eq
- `tests/lint-page.rs` (new) — regression test asserting all four label
associations exist in the template

## Not in scope

Colors, contrast, CSS, JavaScript, and lint logic are untouched.

## Convention

Uses `<label for="">`, the same pattern already established in the
template for the search input (line 155).

## Test

cargo test --test lint-page — 1 passed, 0 failed.

changelog: Fix accessible labels for the theme and version filters on
the lint page

Part of #15604

Author: llogiq

tests/lint-page.rs

@@ -0,0 +1,34 @@
+// This test checks that the lint list page stays accessible: the controls must
+// keep the `<label for="...">`/`id="..."` pairings that screen readers use to
+// name them. Without those the theme selector and the version filters are
+// announced as unnamed widgets, which was four of the WAVE errors in #15604.
+//
+// The check is only a plain text search over the template, so it does not
+// verify that an `id` landed on the right element. That is a known limitation,
+// not a reason to drop the test: the pairings are easy to lose when the markup
+// is reshuffled and nothing else in CI catches it. Do not remove or loosen
+// these assertions to get an unrelated change to
+// `util/gh-pages/index_template.html` through. Once the GUI test suite (#15634)
+// lands this can be replaced by a check against the rendered page.
+
+#[test]
+fn lint_page_accessibility() {
+    let template = include_str!("../util/gh-pages/index_template.html");
+
+    // The theme selector must have a programmatically associated label
+    assert!(
+        template.contains(r#"for="theme-choice""#),
+        "theme-choice <select> is missing an associated <label>",
+    );
+
+    // The version-filter inputs are generated via a template loop.
+    // Each input must carry an id and its sibling <label> a matching `for`.
+    assert!(
+        template.contains(r#"id="version-filter-{{ name }}""#),
+        "version-filter inputs are missing id=\"version-filter-...\"",
+    );
+    assert!(
+        template.contains(r#"for="version-filter-{{ name }}""#),
+        "version-filter inputs are missing an associated <label for=\"version-filter-...\">",
+    );
+}

util/gh-pages/index_template.html

@@ -31,7 +31,7 @@
     <div id="settings-dropdown" class="dropdown"> {# #}
         <button class="settings-icon" tabindex="-1"></button> {# #}
         <div class="settings-menu" tabindex="-1"> {# #}
-            <div class="setting-radio-name">Theme</div> {# #}
+            <label class="setting-radio-name" for="theme-choice">Theme</label> {# #}
             <select id="theme-choice"> {# #}
                 <option value="ayu">Ayu</option> {# #}
                 <option value="coal">Coal</option> {# #}
@@ -118,9 +118,9 @@ <h1 class="page-header">Clippy Lints <span class="badge">Total number: {{+ count
                         <li role="separator" class="divider"></li> {# #}
                         {% for (sym, name) in [("≥", "gte"), ("≤", "lte"), ("=", "eq")] %}
                             <li class="checkbox"> {# #}
-                                <label>{{ sym }}</label> {#+ #}
+                                <label for="version-filter-{{ name }}">{{ sym }}</label> {#+ #}
                                 <span>1.</span> {# #}
-                                <input type="number" name="{{ name }}" min="29" maxlength="2" class="version-filter-input form-control filter-input" /> {# #}
+                                <input id="version-filter-{{ name }}" type="number" name="{{ name }}" min="29" maxlength="2" class="version-filter-input form-control filter-input" /> {# #}
                                 <span>.0</span> {# #}
                             </li> {# #}
                         {% endfor %}