Skip to content

frontend: Fix ARIA labels for input fields#4345

Merged
illume merged 1 commit intokubernetes-sigs:mainfrom
vyncent-t:fix-aria-labels-secrets-page
Jan 16, 2026
Merged

frontend: Fix ARIA labels for input fields#4345
illume merged 1 commit intokubernetes-sigs:mainfrom
vyncent-t:fix-aria-labels-secrets-page

Conversation

@vyncent-t
Copy link
Contributor

Summary

This PR fixes some a11y issues around missing labels for inputs in our custom component for secrets data fields.

FastPass scan
Image

Inputs that need fixes
Image

Related Issue

Fixes #4344

Changes

  • Adds aria labels for input component

Steps to Test

  1. Launch FastPass in a different window
  2. Navigate to the Secrets list view
  3. Navigate to any Secrets resource view
  4. Run FastPass on the opened Secrets resource
  5. Note the missing inputs are now fixed

@vyncent-t vyncent-t self-assigned this Jan 8, 2026
@k8s-ci-robot k8s-ci-robot requested review from sniok and yolossn January 8, 2026 21:25
@k8s-ci-robot k8s-ci-robot added size/S Denotes a PR that changes 10-29 lines, ignoring generated files. cncf-cla: yes Indicates the PR's author has signed the CNCF CLA. labels Jan 8, 2026
@vyncent-t vyncent-t marked this pull request as draft January 9, 2026 15:12
@k8s-ci-robot k8s-ci-robot added the do-not-merge/work-in-progress Indicates that a PR should not merge because it is a work in progress. label Jan 9, 2026
@vyncent-t vyncent-t force-pushed the fix-aria-labels-secrets-page branch 4 times, most recently from 03eba6e to f177d51 Compare January 14, 2026 20:40
@vyncent-t vyncent-t force-pushed the fix-aria-labels-secrets-page branch from f177d51 to 6717879 Compare January 14, 2026 20:56
@vyncent-t vyncent-t marked this pull request as ready for review January 16, 2026 19:21
@k8s-ci-robot k8s-ci-robot removed the do-not-merge/work-in-progress Indicates that a PR should not merge because it is a work in progress. label Jan 16, 2026
@vyncent-t vyncent-t requested review from illume and removed request for ashu8912 and yolossn January 16, 2026 19:21
@illume illume requested a review from Copilot January 16, 2026 20:10
Copy link
Contributor

Copilot AI left a comment

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 improves accessibility for secret field inputs by adding proper ARIA labels to associate input fields with their corresponding labels, addressing FastPass accessibility violations.

Changes:

  • Added nameID prop to SecretField component and NameValueTableRow interface
  • Implemented aria-labelledby attribute on input elements to reference label IDs
  • Refactored Details.tsx to use destructuring for cleaner code and proper type casting

Reviewed changes

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

File Description
frontend/src/components/common/Resource/Resource.tsx Added SecretFieldProps interface with nameID prop and applied aria-labelledby to Input component
frontend/src/components/secret/Details.tsx Refactored data mapping to use destructuring and pass nameID to SecretField
frontend/src/components/secret/snapshots/Details.WithBase.stories.storyshot Updated snapshot to reflect new ID and aria-labelledby attributes in rendered output

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

@illume illume dismissed joaquimrocha’s stale review January 16, 2026 20:15

Object mistake mentioned fixed

Copy link
Contributor

@illume illume left a comment

Choose a reason for hiding this comment

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

🎉 thanks!

@k8s-ci-robot
Copy link
Contributor

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: illume, vyncent-t

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

The pull request process is described 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

@k8s-ci-robot k8s-ci-robot added the approved Indicates a PR has been approved by an approver from all required OWNERS files. label Jan 16, 2026
@illume illume merged commit 54b998a into kubernetes-sigs:main Jan 16, 2026
17 of 18 checks passed
@ashu8912 ashu8912 added this to the v0.40.0 milestone Feb 3, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

approved Indicates a PR has been approved by an approver from all required OWNERS files. cncf-cla: yes Indicates the PR's author has signed the CNCF CLA. size/S Denotes a PR that changes 10-29 lines, ignoring generated files.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[FastPass] missing labels for input fields

5 participants