Skip to content

fix(core): accessibility quick wins — link text, names, headings - #6144

Merged
norman-abramovitz merged 6 commits into
cloudfoundry:developfrom
nabramovitz:norm/fix/a11y-report-quick-wins
Nov 7, 2026
Merged

norman-abramovitz merged 6 commits into
cloudfoundry:developfrom
nabramovitz:norm/fix/a11y-report-quick-wins

Conversation

@nabramovitz

Copy link
Copy Markdown
Contributor

Six small accessibility fixes, one commit each, found while reviewing the console against WCAG 2.1 AA. None changes anything visible except the CLI Info link text and a focus outline on Recent Activity rows.

Link text (WCAG 2.4.4)

  • CLI Info, Getting Started step 1 read "Download and install the CLI - see here" with only "see here" as the link. The step itself is now the link: "Download and install the Cloud Foundry CLI".
  • The marketplace Summary card's documentation link showed only a launch icon; it has an aria-label. In the marketplace list the icon link that repeats the Docs / Support text link beside it is out of the tab order and the accessibility tree, so each URL is one named tab stop.

Names for icon-only controls (WCAG 1.3.1, 4.1.2)

  • Instances card: Edit instance count, Decrease instances, Increase instances, Cancel, Save.
  • The table header cell above the favorite star and row-actions kebab was empty; it carries a visually hidden "Favorite", "Actions" or "Favorite and actions".

Recent Activity rows reachable by keyboard (WCAG 2.1.1)

Each row (header history menu and the home page card) was a div with a routerLink, with an <a> without href inside. The row is now the anchor; a row whose entity has no route renders no href. The outline: 0 rule on the row is replaced by a :focus-visible outline.

Application state icon (WCAG 1.1.1)

On the Recently updated applications card the icon is the only state indication, and screen readers read the icon font ligature ("lens", "warning"). The icon is now role="img" named after the state through a new 'label' output of ApplicationStateIconPipe. Beside its text label (app-application-state) it is aria-hidden so the state is not read twice.

Headings (WCAG 1.3.1)

74 of 77 pages put their title in an <h1> inside <app-page-header>; About, Metrics and Invite Users passed plain text and had no heading. They are <h1> now. The About page's Frontend / Backend / Signed in as labels are <h2>, and the meta card title (Marketplace Summary and every other meta card) is an <h3>, the level app-card-title already uses. Headings inherit their font from the surrounding styles, so nothing moves.

Already fine on develop, checked and left alone: row checkboxes and radios (labelled per row), the select-all checkbox, the Items per page and Sort selects.

Tests

  • A failing test first for each change: cli-info, signal-list, recent-entities, application-state-icon (component and pipe), application-state, about-page, metrics, meta-card, card-app-instances, service-summary-card, table-cell-service-references specs.
  • make check gate green.
  • Invite Users has no template test (its spec constructs the class only); the change is the same one-line <h1> wrap as About and Metrics.
  • Lab (5.6.0-dev.39 = this branch, Chromium): CLI Info step 1 reads "Download and install the Cloud Foundry CLI"; Recent Activity rows are a[href] with no nested anchor, Tab from the history button reaches a row and its outline computes to solid 2px rgb(59, 130, 246); About has h1 About and h2 Frontend / Backend / Signed in as at the same 12px/600/uppercase as before; marketplace table's first header reads "Favorite and actions" (visually hidden); service summary card titles are h3 at the same 18px/500; Instances card buttons carry their names with the icons hidden; home card state icons are role="img" named OK / Warning. The lab's services publish no documentation URL, so the docs links are covered by the unit tests only.

AI disclosure (RFC-0047): prepared with AI coding assistance; reviewed by the author.

The first Getting Started step on the CLI Info page read "Download and
install the CLI - see here", with only "see here" as the link, which
says nothing out of context (WCAG 2.4.4). The step itself is now the
link: "Download and install the Cloud Foundry CLI".

AI disclosure (RFC-0047): prepared with AI coding assistance; reviewed
by the author.
The table header cell above the favorite star and the row-actions kebab
was empty, so screen readers announced those cells with no column name
(WCAG 1.3.1). The cell now carries a visually hidden "Favorite",
"Actions" or "Favorite and actions", according to which columns the
list has; nothing changes visibly.

AI disclosure (RFC-0047): prepared with AI coding assistance; reviewed
by the author.
Each row of Recent Activity (the header history menu and the home page
card) was a div with a routerLink, so the keyboard could not reach it
(WCAG 2.1.1), and the name inside it was an anchor without an href. The
row is now the anchor, with the name as plain text inside it; a row
whose entity has no route renders no href. The rule that removed the
row's outline is replaced by a focus-visible outline, so keyboard focus
on a row is visible.

AI disclosure (RFC-0047): prepared with AI coding assistance; reviewed
by the author.
The state icon stands alone on the Recently updated applications card,
where a screen reader heard only the icon font's ligature ("lens",
"warning"). The icon is now an image named after the state (Started,
Stopped, Warning, ...), through a new 'label' output of the state icon
pipe. Where the icon sits beside its text label (app-application-state)
it is hidden from assistive technology so the state is not read twice
(WCAG 1.1.1).

AI disclosure (RFC-0047): prepared with AI coding assistance; reviewed
by the author.
Most pages put their title in an h1 inside the page header; About,
Metrics and Invite Users passed plain text, so those pages had no
heading at all. The About page's Frontend, Backend and Signed in as
labels looked like headings but were divs, and so did every meta card's
title (Marketplace Summary among them). The three page titles are now
h1, the About labels h2, and the meta card title an h3 like the other
card titles (WCAG 1.3.1). Nothing changes visibly: headings inherit
their font from the surrounding styles.

AI disclosure (RFC-0047): prepared with AI coding assistance; reviewed
by the author.
The Instances card's edit, decrease, increase, cancel and save buttons,
and the marketplace documentation link, showed only an icon and had no
text for assistive technology (WCAG 1.3.1, 2.4.4). Each now has an
aria-label and its icon is decorative. In the marketplace list, the
icon link that repeats the Docs / Support text link beside it is out of
the tab order and the accessibility tree, so each URL is one named tab
stop.

AI disclosure (RFC-0047): prepared with AI coding assistance; reviewed
by the author.

@norman-abramovitz norman-abramovitz left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@norman-abramovitz
norman-abramovitz merged commit 6f92036 into cloudfoundry:develop Nov 7, 2026
24 checks passed
@nabramovitz
nabramovitz deleted the norm/fix/a11y-report-quick-wins branch November 7, 2026 17:26
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants