fix(a11y)-9: remove label role from DropZoneBox UploadFiles button to meet ARIA specs

[Sagar-6203620715]

Summary

This PR fixes an accessibility issue by adding an accessible name to the VersionDialog.

Related Issue

Partially fixes #4385
Addresses point 9 from the issues #4385

Changes

• Updated VersionDialog to include an aria-label
• Fixed ARIA dialog name violation

Steps to Test

1. Open the Version dialog in the application
2. Run npm run frontend:test:a11y
3. Verify no ARIA dialog name issues are reported

Screenshots (if applicable)

N/A

Notes for the Reviewer

• This change is scoped to accessibility compliance only

[k8s-ci-robot]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by: Sagar-6203620715
Once this PR has been reviewed and has the lgtm label, please assign sniok 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:

• OWNERS

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

[Sagar-6203620715]

/cc @sniok

[Copilot]

Pull request overview

This PR updates the DropZoneBox Storybook example to address an ARIA “allowed role” accessibility violation by ensuring the “Select File” control is rendered as a native button rather than a label.

Changes:

• Removed component="label" from the MUI Button used in the DropZoneBox “UploadFiles” story to avoid rendering a label with an invalid ARIA role.

Comments suppressed due to low confidence (2)

frontend/src/components/common/DropZoneBox.stories.tsx:41

• PR description/title mentions adding an aria-label to VersionDialog / fixing an ARIA dialog name violation, but this PR change only updates DropZoneBox.stories.tsx (removing component="label"). Please update the PR title/description to match the actual change, or include the missing VersionDialog change in this PR.

      <Button
        variant="contained"
        startIcon={<InlineIcon icon="mdi:upload" width={32} />}
        sx={{ fontWeight: 500 }}
      >
        {'Select File'}
      </Button>

frontend/src/components/common/DropZoneBox.stories.tsx:41

• UploadFiles story now renders a plain button labeled "Select File" without any associated <input type="file"> or click handler, so it doesn't actually demonstrate file selection behavior. Consider either wiring it to a hidden file input (without using component="label", e.g., via inputRef.click() / htmlFor) or renaming the story/button text to avoid implying functionality it doesn't provide.

export const UploadFiles = Template.bind({});
UploadFiles.args = {
  children: (
    <>
      <Typography sx={{ m: 2 }}>{'Select a file or drag and drop here'}</Typography>
      <Button
        variant="contained"
        startIcon={<InlineIcon icon="mdi:upload" width={32} />}
        sx={{ fontWeight: 500 }}
      >
        {'Select File'}
      </Button>

---

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

[illume]

Thanks for this!

To update the snapshots you can run this.

npm run test -- -u

You can check things locally with these commands.

npm run tsc
npm run lint
npm run test
npm run format

[illume]

hey hey.

I'll mark this as draft for now to make it easier on reviewers. If you want to continue it, please mark it as ready to review when you've pushed changes.