fix(pod): make edit button an HTML button rather than an anchor tag

[robinzigmond]

Fix accessibility by ensuring the edit button is an actual button, rather than an anchor tag with no href. This makes it possible to interact with the button with the keyboard as well as with a screenreader.

BREAKING CHANGE: The onEdit prop is now restricted to being an event handler function - the options for it to be a string or an object have been removed.

Proposed behaviour

When the onEdit prop is provided, the Edit button should be an HTML <button> element, allowing it to be focused with the keyboard and to be accessible using a screenreader. There should be no Axe errors from such a component.

Only functions should be valid values for this prop.

Current behaviour

The edit button is rendered as an HTML <a> tag but without an href, which is a non-interactive element - therefore it is not possible to trigger the edit action using a screenreader (Voiceover on Mac announces it as simply "empty group"), nor can it be focused by using the tab/shift-tab keys on a keyboard. Axe reports an error "elements must only use valid ARIA attributes", as we pass an aria-label which is not valid (and not even read out by many screenreaders) for such a non-semantic element.

Strings and objects are valid to use for the onEdit prop's value, although they do result in a deprecation warning.

Checklist

• Commits follow our style guide
• Related issues linked in commit messages if required
• Screenshots are included in the PR if useful
• All themes are supported if required
• Unit tests added or updated if required
• Cypress automation tests added or updated if required
• Playwright automation tests added or updated if required
• Storybook added or updated if required
• Translations added or updated (including creating or amending translation keys table in storybook) if required
• Typescript d.ts file added or updated if required
• Related docs have been updated if required

QA

• Tested in CodeSandbox/storybook
• Add new Cypress test coverage if required
• Carbon implementation matches Design System/designs
• UI Tests GitHub check reviewed if required

Additional context

Testing instructions

The following CodeSandbox is an example of the broken behaviour.
You can see the new behaviour by looking at the version in the comment by codesandbox[bot].

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit c1c57a2:

Sandbox	Source
carbon-quickstart	Configuration
carbon-quickstart-typescript	Configuration
carbon-quickstart	PR

[DipperTheDan]

Everything looks OK to me. Just this what we discussed privately basically. Looks like the edit button can now be focused but it appears to be the incorrect focus styling (Focus Redesign set to true on the screenshot btw). It looks like this will have existed before your change but now that edit button can be focused, this has been brought to light.

[Parsium]

Looks good to me, nothing more to add in addition to @DipperTheDan's comment

[carbonci]

🎉 This PR is included in version 122.0.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀