Skip to content

fix(ui-modal): add whitespace between text nodes in Modal body aria-label #2639

Open
git-nandor wants to merge 1 commit into
masterfrom
INSTUI-5096_modal_body_aria-label_omits_whitespace
Open

fix(ui-modal): add whitespace between text nodes in Modal body aria-label #2639
git-nandor wants to merge 1 commit into
masterfrom
INSTUI-5096_modal_body_aria-label_omits_whitespace

Conversation

@git-nandor

@git-nandor git-nandor commented Jul 15, 2026

Copy link
Copy Markdown
Contributor

INSTUI-5096

Problem

ModalHeader derives its
aria-label by walking every text node in the header and concatenating them —
with no separator between producing malformed labels such as:

  • "IgniteAINutrition Facts"
  • "IgniteAIData Permission Levels"

VoiceOver announced these incorrectly. This violates WCAG 1.3.1 Info and Relationships (Level A).

Fix

Trim each harvested text node, drop empty ones, and join the rest with a single space.

Test plan

  • VoiceOver: open the AI Nutrition Facts / Data
    Permission Levels dialogs and confirm the body region announces correctly
    "IgniteAI Nutrition Facts" (not "IgniteAINutr...")

🤖 Generated with Claude Code

@git-nandor git-nandor self-assigned this Jul 15, 2026
@git-nandor
git-nandor requested a review from ToMESSKa July 15, 2026 09:49
@git-nandor
git-nandor marked this pull request as ready for review July 15, 2026 09:49
@github-actions

github-actions Bot commented Jul 15, 2026

Copy link
Copy Markdown
PR Preview Action v1.8.1

QR code for preview link

🚀 View preview at
https://instructure.design/pr-preview/pr-2639/

Built to branch gh-pages at 2026-07-17 07:53 UTC.
Preview will be ready when the GitHub Pages deployment is complete.

@github-actions

Copy link
Copy Markdown

Visual regression report

No changes.

Status Count
Unchanged 32
Changed 0
New 0
Removed 0

📊 View full report

Baselines come from the visual-baselines branch. They refresh on every merge to master.

github-actions Bot pushed a commit that referenced this pull request Jul 15, 2026

@ToMESSKa ToMESSKa 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.

I think the description is rather misleading? None of the examples in the docs produced "IgniteAIAINutrition Facts", I guess the the problem was rather "IgniteAINutrition Facts". Can you please look at this?
Other than that, it looks good,

@git-nandor

Copy link
Copy Markdown
Contributor Author

Thanks, fixed!

…y aria-label

The Modal body's scroll aria-label is assembled from the header's text nodes,
which were concatenated with no separator. When the header contains a Heading
with `aiVariant` (which renders a decorative "IgniteAI" text node before the
title), this produced malformed labels like "IgniteAIAI Nutrition Facts" that
VoiceOver announced incorrectly (WCAG 1.3.1).

Trim each text node and join non-empty ones with a single space so adjacent
text nodes from different elements are separated. Applies to the v2 ModalHeader.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@git-nandor
git-nandor force-pushed the INSTUI-5096_modal_body_aria-label_omits_whitespace branch from 13ed61b to 0236c2a Compare July 17, 2026 07:49
@git-nandor
git-nandor requested a review from ToMESSKa July 17, 2026 07:49
github-actions Bot pushed a commit that referenced this pull request Jul 17, 2026
@git-nandor
git-nandor requested a review from joyenjoyer July 17, 2026 09:38
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