FE-7563 - Fix Accessibility Issues with Mentions Plugin

[nineteen88]

Proposed behaviour

• Resolve Accessibility issues for the Mentions Plugin

Current behaviour

• Axe is showing multiple Accessibility issues with the Mentions plugin when Best Practices is enabled or disabled

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

Additional context

Testing instructions

[DipperTheDan]

question: are these dependancy changes expected for this piece of work? It looks like you've changed babel/core to a peer dependency here.

[nineteen88]

Good spot I missed that I'd pushed a package-lock update. That shouldn't be in there I don't believe. I'll get it removed.

[edleeks87]

question (non-blocking): are there any tokens for these colours?

[edleeks87]

suggestion: I wonder if it'd be better to add the style overrides into the portrait and icon styles instead (at the bottom of the block etc)

// portrait.style

${MentionListItem}.selected & {
  color: currentColor;
}

// initials

${StyledPortrait} & {
  color: currentColor;
}

// icon.style

${StyledPortrait} & {
  color: currentColor;
}