Skip to content

[scanner] fix: add ARIA labels to utility section components#19345

Merged
clubanderson merged 2 commits into
mainfrom
scanner/fix-19339b
Jun 21, 2026
Merged

[scanner] fix: add ARIA labels to utility section components#19345
clubanderson merged 2 commits into
mainfrom
scanner/fix-19339b

Conversation

@clubanderson

Copy link
Copy Markdown
Collaborator

Fixes #19339, Fixes #19340

Adds missing ARIA labels to modal and utility components not covered by PR #19343.

Changes

  • UtilitySections.tsx: Improved aria-label on CollapsibleSection to include expand/collapse state; added aria-label to QuickActionsSection buttons

Notes

  • ModalRuntime.tsx and ConfirmDialog.tsx were reviewed but don't need changes — they use <button> elements with visible text labels that already serve as accessible names
  • UnifiedDashboard.tsx reset button already has visible "Reset" text serving as its accessible name
  • PodDrillDown.tsx tab buttons already have role="tab", aria-selected, and visible text labels

- CollapsibleSection: improve aria-label to include expand/collapse state
- QuickActionsSection: add explicit aria-label to action buttons

Signed-off-by: clubanderson <club@redhat.com>
Copilot AI review requested due to automatic review settings June 21, 2026 09:43
@kubestellar-prow kubestellar-prow Bot added the dco-signoff: yes Indicates the PR's author has signed the DCO. label Jun 21, 2026
@kubestellar-prow

Copy link
Copy Markdown
Contributor

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:
Once this PR has been reviewed and has the lgtm label, please assign eeshaansa for approval. For more information see the Code Review Process.

The full list of commands accepted by this bot can be found here.

Details Needs approval from an approver in each of these files:

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

@netlify

netlify Bot commented Jun 21, 2026

Copy link
Copy Markdown

Deploy Preview for kubestellarconsole ready!

Name Link
🔨 Latest commit e810dd4
🔍 Latest deploy log https://app.netlify.com/projects/kubestellarconsole/deploys/6a37b6c6d06aa400084cf4c8
😎 Deploy Preview https://deploy-preview-19345.console-deploy-preview.kubestellar.io
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@github-actions

Copy link
Copy Markdown
Contributor

🐝 Hi @clubanderson! I'm kubestellar-hive[bot], an automation bot for this repo.

Trusted users — org members and contributors with write access — can mention @kubestellar-hive in a comment to trigger repo automation.
On issues, that mention queues an automated fix attempt. On pull requests, it records extra context for existing automation.
This is not an interactive Q&A bot, so mentions should be treated as requests for automation rather than a conversation.

Automation may take a moment to start, and follow-up happens through workflow activity rather than chat replies.

@github-actions

Copy link
Copy Markdown
Contributor

👋 Hey @clubanderson — thanks for opening this PR!

🤖 This project is developed exclusively using AI coding assistants.

Please do not attempt to code anything for this project manually.
All contributions should be authored using an AI coding tool such as:

This ensures consistency in code style, architecture patterns, test coverage,
and commit quality across the entire codebase.


This is an automated message.

@kubestellar-prow kubestellar-prow Bot added the size/XS Denotes a PR that changes 0-9 lines, ignoring generated files. label Jun 21, 2026

Copilot AI 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.

Pull request overview

This PR addresses accessibility scanner findings by improving accessible naming for interactive elements in the modal utility sections, focusing on ARIA labeling in UtilitySections.tsx.

Changes:

  • Updates the CollapsibleSection toggle button ARIA labeling behavior.
  • Adds an aria-label to QuickActionsSection action buttons.

Comment on lines 245 to 250
<button
key={action.id}
onClick={action.onClick}
disabled={action.disabled}
aria-label={action.label}
className={cn('flex items-center gap-1.5 rounded-lg px-3 py-2 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50', TOUCH_TARGET_HEIGHT_CLASS, variantStyles[action.variant || 'default'])}
Comment on lines 40 to +41
aria-expanded={isOpen}
aria-label={title}
aria-label={`${isOpen ? 'Collapse' : 'Expand'} ${title} section`}
@clubanderson clubanderson merged commit 1d33adb into main Jun 21, 2026
31 of 39 checks passed
@kubestellar-prow kubestellar-prow Bot deleted the scanner/fix-19339b branch June 21, 2026 10:17
@github-actions

Copy link
Copy Markdown
Contributor

Thank you for your contribution! Your PR has been merged.

Check out what's new:

Stay connected: Slack #kubestellar-dev | Multi-Cluster Survey

@github-actions

Copy link
Copy Markdown
Contributor

✅ Post-Merge Verification: passed

Commit: 1d33adbcfb2f103985d63e0d41bd04c1a76a0de5
Specs run: smoke.spec.ts
Report: https://github.com/kubestellar/console/actions/runs/27901203887

@github-actions

Copy link
Copy Markdown
Contributor

Post-merge build verification passed

Both Go and frontend builds compiled successfully against merge commit 1d33adbcfb2f103985d63e0d41bd04c1a76a0de5.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

dco-signoff: yes Indicates the PR's author has signed the DCO. size/XS Denotes a PR that changes 0-9 lines, ignoring generated files. tier/2-standard

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Auto-QA] Keyboard navigation gaps [Auto-QA] Interactive elements missing ARIA labels

2 participants