EDSC-3064: Give the project name edit and submit buttons an accessible name

[suthat]

Overview

What is the feature?

Closes #1359.

The project header on /projects has two icon-only buttons for renaming a project — a pencil to start editing and a check to save. Neither has an accessible name, so a screen reader announces both as just "button".

Both buttons already spell out what they do, but they do it through a label attribute:

<button
  type="button"
  className="project-header__button project-header__button--edit"
  label="Edit project name"
  data-testid="edit_button"
  onClick={handleEditClick}
>
  <EDSCIcon icon={FaEdit} />
</button>

label isn't a valid attribute on a native <button>, so React forwards it to the DOM where nothing reads it. The icon doesn't fill the gap either — EDSCIcon renders with role="graphics-symbol" and no aria-label unless one is passed in.

It's an easy mistake to make. The shared Button component does accept a label prop and maps it to aria-label internally, but these two are native <button> elements, so they never get that treatment.

While I was in there I noticed the project name <input> sitting between the two buttons has no label of any kind either, so renaming a project is currently three unnamed controls in a row. Let me know if you'd rather I split that out.

What is the Solution?

label becomes aria-label on both buttons, plus an aria-label on the input.

Control	Accessible name before	Accessible name after
Project name input	(none)	Project name
Pencil button	(none)	Edit project name
Check button	(none)	Submit project name

No markup, styling, or behaviour changes, and the data-testid attributes the Playwright specs depend on are untouched.

The other three findings listed in #1359 — the temporal and spatial dropdown toggles, and the band subsetting folder toggles — already have accessible names, so I believe this closes the issue out. Happy to drop the Closes if you'd rather confirm that separately.

What areas of the application does this impact?

The project name control in the project header on /projects, and only its accessible names. Nothing changes visually.

Testing

Reproduction steps

• Environment for testing: local
• Collection to test with: any

1. Add a collection to a project and open /projects.
2. Turn on a screen reader (VoiceOver: Cmd+F5), or open the Accessibility pane in browser devtools.
3. Tab to the pencil button next to the project name. On main it comes through as an unnamed "button"; with this change it reads "Edit project name".
4. Activate it, then tab through the name field and the check button. Both are named now as well.

Two of the existing tests in ProjectHeader.test.jsx looked these buttons up by data-testid, which passes whether or not the accessible name resolves. They now query by role and name instead, so they fail on main and pass here:

$ npx vitest run static/src/js/components/ProjectCollections/__tests__/ProjectHeader.test.jsx
Test Files  1 passed (1)
     Tests  22 passed (22)

npx eslint is clean on both changed files.

Attachments

None — there is no visual change to capture.

Checklist

• I have added automated tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas — n/a, no new logic
• I have made corresponding changes to the documentation — n/a
• I have run npm audit fix and made note of any changes in this PR — no dependencies are touched by this PR
• My changes generate no new warnings