bbc / simorgh

The BBC's Open Source Web Application. Contributions welcome! Used on some of our biggest websites, e.g.

https://www.bbc.com/pidgin

Other

1.42k stars 227 forks source link

WSTEAMA-1454 - Related Content focus indicator #12176

Closed amoore108 closed 1 week ago

amoore108 commented 1 week ago

Resolves JIRA https://jira.dev.bbc.co.uk/browse/WSTEAMA-1454

Overall changes

Adds focus indicator styling to the Related Content h2 element
Adds id and tabIndex to the h2 element in the psammead-section-label component so that it can be focused to. This id is different to the one that is used in the child span element to retain any previous functionality around that id.

Screenshot 2024-11-14 at 15 44 51

Testing

Visit http://localhost:7080/pidgin/articles/c7049l52l2go?renderer_env=live
Scroll down to the related content section
Open Chrome dev tools
Highlight the h2 element of the related content header
Force :focus-visible state and observe the focus indicator styling

Helpful Links

Add Links to useful resources related to this PR if applicable.

Coding Standards

Repository use guidelines