fix(core/caniuse): add `role=img` to browser support cells for valid HTML by marcoscaceres · Pull Request #5176 · speced/respec

marcoscaceres · 2026-04-13T00:19:36Z

The div elements with aria-label lacked a role attribute, violating HTML spec per the Nu validator. Added role=img since the aria-label fully describes the visual content. Set inner img alt to empty to avoid double-announcement.

Closes #5091

Copilot

Pull request overview

Fixes HTML validity for the “Can I Use” browser support cells by ensuring elements with aria-label have an appropriate ARIA role, aligning generated output with Nu validator requirements (per #5091).

Changes:

Add role="img" to caniuse browser support cell containers that use aria-label.
Make the nested browser logo <img> decorative by setting alt="" to avoid double announcements.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

marcoscaceres · 2026-04-13T10:18:05Z

@copilot, it's unclear what the right markup is for this from the issue... what does the validator actually say?

Copilot · 2026-04-13T10:20:38Z

@copilot, it's unclear what the right markup is for this from the issue... what does the validator actually say?

The Nu validator error (from the issue) is:

The "aria-label" attribute must not be specified on any "div" element unless the element has a "role" value other than "caption", "code", "deletion", "emphasis", "generic", "insertion", "paragraph", "presentation", "strong", "subscript", or "superscript".

<div> has an implicit ARIA role of "generic", which is in that prohibited list — so any aria-label on a bare <div> is now an error. The fix is to add an explicit role that is not in the list.

role="img" was chosen because each browser-support cell is a self-contained visual indicator (color-coded cell + browser logo + version number) that is fully described by its aria-label (e.g. "fetch is supported since Chrome version 80 on desktop."). That matches the WAI-ARIA definition of an img landmark — a container whose accessible name completely describes its visual content. With this role, the inner <img> is treated as decorative (alt=""), avoiding double-announcement.

An alternative would be role="figure", which has the same validator-fixing effect but leaves descendants exposed to assistive technology. Since the aria-label already captures all the information visible in the cell, role="img" gives the cleaner AT experience here.

marcoscaceres · 2026-04-15T08:52:20Z

@copilot, do what you think is best for accessibility here. And also check what's going on with CI... looks like lint issues.

marcoscaceres · 2026-04-15T09:00:29Z

@copilot, can you fix the lint issues from CI?

Copilot · 2026-04-15T09:02:36Z

@copilot, do what you think is best for accessibility here. And also check what's going on with CI... looks like lint issues.

Fixed in 41d74ea. The lint failure was a prettier formatting issue — the ternary for versionSuffix was too long (82 chars) and needed to be broken across lines. The accessibility approach kept as role="img" with aria-label covering all cases including unknown versions ("…since iOS Safari (version unknown) on mobile."), and inner <img alt=""> as decorative.

The div has aria-label with the full description, so children are presentational. Set inner img alt to empty to avoid double-announcement.

Agent-Logs-Url: https://github.com/speced/respec/sessions/391940a3-1f50-400e-849b-39f06e39e7bb Co-authored-by: marcoscaceres <870154+marcoscaceres@users.noreply.github.com>

Agent-Logs-Url: https://github.com/speced/respec/sessions/6ae7a1ff-7486-4388-b079-084233604857 Co-authored-by: marcoscaceres <870154+marcoscaceres@users.noreply.github.com>

Copilot · 2026-04-17T09:09:34Z

@copilot, can you fix the lint issues from CI?

Fixed in fb850cf. The prettier lint error was a ternary exceeding the 80-char print width; breaking it across multiple lines resolved it. CI is now passing.

The nullish coalescing operator treats "" as non-nullish, so an empty-string version would display as blank instead of the em dash fallback. The ternary correctly maps falsy values (including "") to the fallback.

Avoid injecting a duplicate heading when #bp-summary already has one, and use prepend() so the generated heading always appears at the top. Closes #5176

Copilot

Pull request overview

Fixes invalid Can I Use markup flagged by the Nu HTML validator by ensuring elements with aria-label have an appropriate ARIA role, while keeping screen reader output clean and consistent with the visible UI.

Changes:

Add role="img" to Can I Use browser support cells that use aria-label.
Make the inner browser logo image decorative (alt="") to avoid double announcements.
Ensure aria-label includes a “(version unknown)” suffix when the displayed version is “—”, and add assertions covering this behavior.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.

File	Description
src/core/caniuse.js	Adds `role="img"` and updates accessible naming (including unknown-version case) while making the inner logo image decorative.
tests/spec/core/caniuse-spec.js	Updates/extends tests to match the new accessibility/validity behavior (`alt=""`, `role="img"`, and unknown-version aria-label).

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

marcoscaceres requested a review from Copilot April 13, 2026 01:18

Copilot started reviewing on behalf of marcoscaceres April 13, 2026 01:19 View session

Copilot AI reviewed Apr 13, 2026

View reviewed changes

Comment thread src/core/caniuse.js

Comment thread src/core/caniuse.js

Copilot started work on behalf of marcoscaceres April 13, 2026 10:18 View session

Copilot finished work on behalf of marcoscaceres April 13, 2026 10:21

Copilot started work on behalf of marcoscaceres April 15, 2026 05:35 View session

Copilot finished work on behalf of marcoscaceres April 15, 2026 05:40

Copilot started work on behalf of marcoscaceres April 15, 2026 09:00 View session

Copilot finished work on behalf of marcoscaceres April 15, 2026 09:04

marcoscaceres and others added 4 commits April 17, 2026 18:58

fix(caniuse): add role=img to browser support cells for valid HTML

12e96fd

The div has aria-label with the full description, so children are presentational. Set inner img alt to empty to avoid double-announcement.

test(caniuse): update test expectations for role=img change

5ef5330

fix(caniuse): include version in aria-label even when version is unknown

6547bd6

Agent-Logs-Url: https://github.com/speced/respec/sessions/391940a3-1f50-400e-849b-39f06e39e7bb Co-authored-by: marcoscaceres <870154+marcoscaceres@users.noreply.github.com>

fix(caniuse): format ternary per prettier rules to fix lint CI

fb850cf

Agent-Logs-Url: https://github.com/speced/respec/sessions/6ae7a1ff-7486-4388-b079-084233604857 Co-authored-by: marcoscaceres <870154+marcoscaceres@users.noreply.github.com>

marcoscaceres force-pushed the fix/caniuse-aria-role branch from 41d74ea to fb850cf Compare April 17, 2026 08:59

Copilot started work on behalf of marcoscaceres April 17, 2026 09:07 View session

Copilot finished work on behalf of marcoscaceres April 17, 2026 09:12

marcoscaceres and others added 3 commits April 18, 2026 02:40

Merge branch 'main' into fix/caniuse-aria-role

3e21335

fix(caniuse): revert ?? to ternary to handle empty-string version

6cb969f

The nullish coalescing operator treats "" as non-nullish, so an empty-string version would display as blank instead of the em dash fallback. The ternary correctly maps falsy values (including "") to the fallback.

Merge branch 'main' into fix/caniuse-aria-role

df735f9

marcoscaceres requested a review from sidvishnoi April 18, 2026 01:08

fix(caniuse): unify title and aria-label text for unknown version

3ee9d56

marcoscaceres mentioned this pull request Apr 18, 2026

fix(best-practices): respect existing heading in #bp-summary #5211

Draft

marcoscaceres requested a review from Copilot April 18, 2026 12:34

Copilot started reviewing on behalf of marcoscaceres April 18, 2026 12:35 View session

Copilot AI reviewed Apr 18, 2026

View reviewed changes

sidvishnoi reviewed Apr 19, 2026

View reviewed changes

Comment thread src/core/caniuse.js

sidvishnoi changed the title ~~fix(caniuse): add role=img to browser support cells for valid HTML~~ fix(core/caniuse): add role=img to browser support cells for valid HTML Apr 19, 2026

sidvishnoi approved these changes Apr 19, 2026

View reviewed changes

Merge branch 'main' into fix/caniuse-aria-role

c9cd9e2

marcoscaceres marked this pull request as draft April 19, 2026 12:44

Copilot started work on behalf of marcoscaceres April 19, 2026 19:31 View session

Copilot finished work on behalf of marcoscaceres April 19, 2026 19:32

marcoscaceres marked this pull request as ready for review April 19, 2026 19:47

Merge branch 'main' into fix/caniuse-aria-role

b5735da

marcoscaceres enabled auto-merge (squash) April 19, 2026 19:48

marcoscaceres merged commit 509effd into main Apr 19, 2026
9 checks passed

marcoscaceres deleted the fix/caniuse-aria-role branch April 19, 2026 19:50

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(core/caniuse): add `role=img` to browser support cells for valid HTML#5176

fix(core/caniuse): add `role=img` to browser support cells for valid HTML#5176
marcoscaceres merged 10 commits intomainfrom
fix/caniuse-aria-role

marcoscaceres commented Apr 13, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

marcoscaceres commented Apr 13, 2026

Uh oh!

Copilot AI commented Apr 13, 2026

Uh oh!

marcoscaceres commented Apr 15, 2026

Uh oh!

marcoscaceres commented Apr 15, 2026

Uh oh!

Copilot AI commented Apr 15, 2026

Uh oh!

Copilot AI commented Apr 17, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

Conversation

marcoscaceres commented Apr 13, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

marcoscaceres commented Apr 13, 2026

Uh oh!

Copilot AI commented Apr 13, 2026

Uh oh!

marcoscaceres commented Apr 15, 2026

Uh oh!

marcoscaceres commented Apr 15, 2026

Uh oh!

Copilot AI commented Apr 15, 2026

Uh oh!

Copilot AI commented Apr 17, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants