fix(toast): ensure toast component has first focus when opened - FE-5281

[DipperTheDan]

fixes #5320

Proposed behaviour

Toast component should be first component to be focused

Current behaviour

Currently Toast is not focusable

Checklist

• [x] Commits follow our style guide
• [x] Related issues linked in commit messages if required
• [ ] Screenshots are included in the PR if useful
• [x] All themes are supported if required
• [x] Unit tests added or updated if required
• [x] Cypress 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

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

N/A

Testing instructions

Test that the Toast stories in Storybook work as expected with the new functionality and check for any regressions

[codesandbox-ci[bot]]

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 8083cfebbab0df1792e3705e0599f65b2aaf452e:

Sandbox	Source
carbon-quickstart	Configuration
carbon-quickstart-typescript	Configuration
carbon-quickstart (forked)	PR

[cypress[bot]]

---

Test summary

3969 • 0 • 6 • 0 • 0

---

Run details

Project	carbon
Status	Passed
Commit	8083cfebba
Started	Nov 23, 2022 8:25 AM
Ended	Nov 23, 2022 8:31 AM
Duration	06:04 💡
OS	Linux Debian - 11.4
Browser	Chrome 106

View run in Cypress Dashboard ➡️

---

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard

[harpalsingh]

I know @tempertemper is away this week, so I have done the accessibility review by testing the voiceover feature too.

[tempertemper]

I think the focus was moved from the close button to the toast itself, wasn't it? That way screen reader users get read the message rather than "Close" when the toast pops-up. @robinzigmond was looking at this a short while ago.

[DipperTheDan]

I think the focus was moved from the close button to the toast itself, wasn't it? That way screen reader users get read the message rather than "Close" when the toast pops-up. @robinzigmond was looking at this a short while ago.

Sorry for the delay in replying @tempertemper. I've been on annual leave. I think the change you mentioned in the previous comment was made to our Dialog component. It is yet to be implemented to Toast hence this PR 😃

[carbonci]

:tada: This PR is included in version 111.12.1 :tada:

The release is available on:

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

Your semantic-release bot :package::rocket: