Repository navigation
fix(core): accessibility quick wins — link text, names, headings - #6144
Merged
norman-abramovitz merged 6 commits intoNov 7, 2026
Merged
norman-abramovitz merged 6 commits into
norman-abramovitz merged 6 commits into
Conversation
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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)
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)
Recent Activity rows reachable by keyboard (WCAG 2.1.1)
Each row (header history menu and the home page card) was a
divwith arouterLink, with an<a>withouthrefinside. The row is now the anchor; a row whose entity has no route renders nohref. Theoutline: 0rule on the row is replaced by a:focus-visibleoutline.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 ofApplicationStateIconPipe. Beside its text label (app-application-state) it isaria-hiddenso 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 levelapp-card-titlealready 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
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-referencesspecs.make check gategreen.<h1>wrap as About and Metrics.a[href]with no nested anchor, Tab from the history button reaches a row and its outline computes tosolid 2px rgb(59, 130, 246); About hash1About andh2Frontend / 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 areh3at the same 18px/500; Instances card buttons carry their names with the icons hidden; home card state icons arerole="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.