fix(a11y) -12: Replace label with span and move aria-expanded to IconButton

[Sagar-6203620715]

Summary

This PR fixes accessibility issues by ensuring valid ARIA usage in the ShowHideLabel component.

Related Issue

Partially fixes #4385
Addresses point 12 from issue description

Changes

• Replaced label element with span to meet ARIA specifications
• Moved aria-expanded to the interactive IconButton
• Resolved ARIA allowed-attributes warnings in Basic and Expanded stories

Steps to Test

1. Navigate to a page using the ShowHideLabel component
2. Toggle the show/hide button
3. Verify no accessibility warnings and correct expand/collapse behavior

Screenshots (if applicable)

N/A

Notes for the Reviewer

• This change focuses only on accessibility compliance and does not affect visual behavior

[linux-foundation-easycla]

[k8s-ci-robot]

Welcome @Sagar-6203620715!

It looks like this is your first PR to kubernetes-sigs/headlamp 🎉. Please refer to our pull request process documentation to help your PR have a smooth ride to approval.

You will be prompted by a bot to use commands during the review process. Do not be afraid to follow the prompts! It is okay to experiment. Here is the bot commands documentation.

You can also check if kubernetes-sigs/headlamp has its own contribution guidelines.

You may want to refer to our testing guide if you run into trouble with your tests not passing.

If you are having difficulty getting your pull request seen, please follow the recommended escalation practices. Also, for tips and tricks in the contribution process you may want to read the Kubernetes contributor cheat sheet. We want to make sure your contribution gets all the attention it needs!

Thank you, and welcome to Kubernetes. 😃

[Copilot]

Pull request overview

This PR updates the ShowHideLabel component to comply with ARIA specifications for allowed attributes and roles, particularly addressing the axe-tracked “ARIA Allowed Attributes” issues for this component’s stories.

Changes:

• Replaced the non-interactive label element with a span to avoid invalid ARIA usage.
• Moved the aria-expanded state to the interactive IconButton that actually toggles expansion.
• Ensured the Basic and Expanded Storybook stories use the updated, ARIA-compliant ShowHideLabel markup via the component change.

Comments suppressed due to low confidence (1)

frontend/src/components/common/ShowHideLabel/ShowHideLabel.tsx:76

• The IconButton is using a misspelled arial-label prop instead of aria-label, so the accessible name will not be exposed to assistive technologies and an unused arial-label attribute will be rendered to the DOM. Please update this to the correct aria-label attribute so screen readers can announce the expand/collapse action properly.

            <IconButton
              aria-controls={labelIdOrRandom}
              aria-expanded={expanded}
              sx={{ display: 'inline' }}
              onClick={() => setExpanded(expandedVal => !expandedVal)}
              size="small"
              arial-label={expanded ? t('translation|Collapse') : t('translation|Expand')}
            >

---

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

[k8s-ci-robot]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by: Sagar-6203620715

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

[illume]

I see you pushed some changes after closing the PR... maybe closing the PR was an accident?