WS-2860-Topic Discovery: Front end work to support roll out - a11y

[Nabeel1276]

Resolves JIRA: https://bbc.atlassian.net/browse/WS-2860

Summary

Following an A11y swarm, there were a various number of minor issues that needed resolved. This PR improves the accessibility and keyboard navigation of the Topic Discovery component to support wider rollout. The changes ensure the component behaves more consistently for keyboard and screen reader users, improves compatibility with High Contrast mode, and aligns the experience with A11y swarm feedback.

Code changes

• Uses CanvasText that represents the default text colour used on a canvas/background, adapting to the user’s theme or accessibility settings.
• Adjusted hover behaviour to avoid clashing with keyboard focus visuals.
• Updated focus-visible styling to avoid extra decorative overlay during keyboard focus.
• Added styling tweak for the Topic Discovery skeleton image to render a 2px border box to improve visual consistency.
• Updated screenreader UX to match Figma design requiring 2 scenarios.
  Scenario 1 - The screenreader just goes through all the topics on the scrollableTabs and then onto the first article of the first topic, in this case being Cuba.
  Scenario 2 - When a user selects a topic, we are wanting to go through all the articles of that selected topic (including the more from link) and once finished, we are wanting to go on the next topic in the scrollableTabs. So if a user selects Cuba, the screenreader should go through all the articles for Cuba, the more from link and then Politica.

Testing

1. List the steps required to test this PR.

Useful Links

• Coding Standards
• Repository use guidelines
• Add Links to useful resources related to this PR if applicable.

[pvaliani]

I think this stops the normal tab key before we know there is another topic to move to. On the last topic, pressing tab on the "More About" link is doing nothing for me, so keyboard users can get stuck there. Does it do that for you?

Might need to only call preventDefault() when a next tab exists and if there is no next tab, let the browser move focus to the next thing on the page.

Everything else in the PR LGTM for the a11y rollout!

[LilyL0u]

Same happens to me on the More About link

[Nabeel1276]

Yes the issue was happening to me too, I have solved it now so that tab focus moves to the next section of the page. Good catch!