A11y swarm for 'Recommedation' container

[rhenshaw56]

Is your feature request related to a problem? Please describe. Carry out a dev a11y swarm for the 'Recommedations' container once it's enabled on test. Unfortunately there are currently no assets on tests which will allow us to see Recommendations on the test environment, for the a11y swarm we can carry this out locally.

Here are the steps to allow Simorgh to be viewable on your local home network to test on multiple devices:

1. In Simorgh's route directory navigate to webpack.config.client.js
2. Replace localhost on line 33 and line 40 to 0.0.0.0
3. Open up a new terminal window and type ifconfig
4. CMD + F for inet and find your local network IP address, it will likely be in this format inet 192.168.0.xx with the xx being your devices IP number.
5. Start up your Simorgh dev server with npm run dev and visit http://192.168.0.xx:7080/mundo/23263889
6. Now you should be able to access any page on any device that's connected on your local network by prefixing your Simorgh's host machines IP http://192.168.0.xx:7080/foobar instead of http://localhost:7080/foobar

Accesibility Acceptance Criteria (Click me to see)

**Landmark** Given I use a screen reader When I navigate to the Recommendations section within the body copy of a STY page Then a region landmark must be announced e.g. Region And this must be announced with a label And the label must be the same as the strong HTML element (e.g. component title) And this should be inside the main landmark **Skip link** (This work will be done separately on https://github.com/bbc/simorgh/issues/6267) Given I use a keyboard When I navigate to the Recommendations component Then a skip link is visually displayed when it receives focus And this should be the first content within the component And the text should say "Skip [title of component] and continue reading" Given I use a screenreader When I activate the skip link Then my focus moves to an end message And this should be the last content within the component And this is announced as "End of [title of component]" Given I use a keyboard When I navigate to the Recommendations component Then a skip link is visually displayed when it receives focus And the browser default focus outline styling is applied **Screenreader UX** Given I am using a screenreader When I navigate to the Recommendations component title And this is within the body copy of a STY page Then this should not have heading semantics And it should be a strong HTML element Given I am using a screenreader When I navigate to the Recommendations component promos And this component is within the body copy of a STY page Then these should not contain heading semantics

Describe the solution you'd like Dev/A11y Swarm

-https://bbc.github.io/accessibility-news-and-you/accessibility-news-and-testers

• [x] Meets screen reader UX
• [x] Meets accessibility acceptance criteria
• [x] Design
• [x] Colour Contrast
• [x] Colour blindness
• [x] Windows HCM
• [x] FF Colour Preferences
• [x] Text 200%, Page 200%
• [x] Icons
• [x] Heading Order
• [x] Check accesibility of browser DOM
• [x] Keyboard Navigation - When tabbing through we noticed the skip link doesn't have correct translations - Will be addressed in #7381
• [x] No CSS

Screen Readers (Windows a11y laptop)

• [x] ZoomText Magnifier/Reader
• [x] Dragon NaturallySpeaking
• [x] JAWS
• [x] Read&Write
• [x] NVDA (Firefox)

Mac, iOS, and Android:

• [x] VoiceOver iOS (iPhone/iPad) - Landmarks wasn't showing on rotor menu, test on another iPhone
• [x] Voice Control on iOS
• [x] VoiceOver OS (Mac)
• [x] TalkBack (Chrome on Android)
• [x] Voice Access on Android

Describe alternatives you've considered A clear and concise description of any alternative solutions or features you've considered.

Testing notes [Tester to complete]

Dev insight: Will Cypress tests be required or are unit tests sufficient? Will there be any potential regression? etc

• [ ] This feature is expected to need manual testing.

Additional context A UX issue was highlighted by @nataliesmart but this should not be a blocker for this. That would be addressed separately and would be subsequently followed by a UX review

[paruchurisilpa]

On Chrome talkback Android version 10

I can see it reads skip to link correctly and end of recommendation correctly but when I swipe right it reads each clickable promo item in recommendations twice rather than going to the next promo item..

[rhenshaw56]

On Chrome talkback Android version 10

I can see it reads skip to link and end of recommendation correctly but when I swipe right it reads each link in recommendations twice rather than going into the next link

@paruchurisilpa when you say "reads each link in recommendations" do you mean the skip links or the clickable headers in each promo item ?

[paruchurisilpa]

@rhenshaw56 it reads skip to link ok, yeh by link I mean clickable promo item..

[LilyL0u]

Behaviour on NVDA (firefox) navigating with tab key - Reads out 'Skip Quizas tambien te interese and continue reading' and then 'visited link'. I tried to use an incognito browser and clearing data in the local and session storage to try to 'reset' it so I could check what it says in an unvisited state, but I couldn't get it to say anything other than 'visited link'. When I click it, focus disappears from the region and I hear it says something like 'end of quizas tambien te interese', but it is not that clear so I can't be 100% certain. If I do not click the skip button, focus moves to the first link in the list in the region. It says 'Region list with ten items', then the title, then 'link'. As I tab through after this, each item has just the title read out, followed by 'link'. It does not read out 'end of Quizias tambien' etc if I am just tabbing through the links, without using the skip button. The last link says 'visited link' as it links to the current page.

Behaviour on JAWS - Using tab to navigate through interactive items: Chrome and Internet Explorer: Reads out 'Skip Quizas tambien te interese and continue reading', then '[something] link'. Clicking the link then takes the focus out of the region and reads 'End of quizas tambien te interese. End of quizas tambien te interese. Page has three frames, 12 regions, 32 headings and 84 links. End of quizas tambien te interese.' If I do not click the skip button, next I navigate to the first link which says 'Quizias tambien te interese region. [title]. link'. Each further link reads out '[titl], link'. The last link does not say 'visited link'.

Using arrow key to navigate through all items to read the article: Chrome and Internet Explorer: There is a 'blank' read out before the recommendations region. 'Visited same page link, Skip Quizas tambien te interese and continue reading'. When I restarted the computer, 'visited same page link' became just 'same page link'. Same behaviour as using tab in the notes above when I click it. If I instead navigate down one it reads the heading 'Quizias tambien te interese. Region' in the British voice. Next focus says 'Quizias tambien te interese' in the Spanish voice. Then next, 'list of 10 item'. Then next, 'graphic [alt text of the image I expect]'. Then next 'link. [title]'. And the same for the rest in the list. At the end of the list after navigating from the last item it says 'list end', then 'Quizias tambien te interese. Region end' in the British voice.

On internet explorer on the Windows 7 a11y laptop, the recommendations section has a different appearance:

[joshcoventry]

ZoomText and Read&Write tested and passed.

[HarveyPeachey]

a11y storm completed, no additional issues have been found so I'm closing the issue 🎉