feat(search, menu-item): Search accessibility updates

[damienrobson-sage]

Users can clear the text of the search box using the keyboard/voice commands; as such, the clear button in the search input is being read out to non-visual users unnecessarily and can be removed from the tab order. It also does not need to be focusable. In order to enhance this component further, functionality has been introduced to allow users to clear the Search field with the Escape key, which is standard practice across the web.

Resolves #7170

Proposed behaviour

• Remove the clear button from the tab order;
• Add the aria-hidden attribute to the clear button;
• Enable support for clearing the input via the Escape key

Screen.Recording.2025-01-30.at.06.58.51.mov

Screen.Recording.2025-01-30.at.06.56.37.mov

Current behaviour

The "clear" icon is tabbable and read out by screen readers, and the search input cannot be cleared by expected means.

Screen.Recording.2025-01-30.at.06.56.02.mov

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
• 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 provided StackBlitz sandbox/Storybook
• Add new Playwright test coverage if required
• Carbon implementation matches Design System/designs
• UI Tests GitHub check reviewed if required

[harpalsingh]

Did a UXQA and A11y review at desk with Accessibility team, so looks good to us.

[carbonci]

🎉 This PR is included in version 147.4.0 🎉

The release is available on:

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

Your semantic-release bot 📦🚀