Accessibility swarm on the Script Link component

[DenisHdz]

Is your feature request related to a problem? Please describe.
Carry out a two devs accessibility swarm for the ScriptLink component.

Describe the solution you'd like
Go through this checklist and fix any issue we might face.

Describe alternatives you've considered
N/A

Testing notes
[Tester to complete]

Dev insight: Will there be any potential regression? etc

• This feature is expected to need manual testing.

Additional context
Add any other context or screenshots about the feature request here.

[DenisHdz]

Blocked on BBC-archive/psammead#2255

[DenisHdz]

Unblocked on BBC-archive/psammead#2255

[DenisHdz]

❓ = Not done
✅ = Done, pass
❌ = Done, fail
👀 = Review with UX

Checklist - Manual

• Design ✅

• Color contrast ✅

• Color blindness ✅

• High Contrast mode PC ✅

• Color preferences changed in Firefox ✅

• Text resized to 200% ✅

• Page zoomed to 200% ✅

• Heading order

• Icons

• Keyboard navigation: tab order, focus css, trace tab path ✅

• aXe ✅

• No CSS ✅

• No Javascript ✅

• bbc-a11y ✅

Checklist - Assistive Technology

Acceptance criteria:

❌Given I use a screen reader
When navigating through the banner landmark on a front page with a script link
Then the script link must be announced after the ‘skip to content’ link


✅Given I use a screen reader
When I navigate to the script link
Then the text should be announced (E.g.  "Simplified” or “Traditional”, “Latin” or “ Cyrillic”)
And this should be identified as a link


✅Given I use a keyboard only
When I navigate to the script link by pressing the TAB key
Then this must have visible state change on focus 
And this must not be identified by colour alone
And be in addition to the browser default focus outline styling
And this must be visible in a custom mode when viewing in high contrast mode on PC

✅Given I view the script link in GEL Group B and C
And I tap on the link
Then touch targets must be large enough to touch accurately 
And it must have a width and height of 44px as a minimum

✅Given I view the script link in GEL Group D (and A when appropriate)
When I tap on the link
Then touch targets must be large enough to touch accurately 
And it must have a width and height of 32px as a minimum

• VoiceOver OS (Mac) (Screen Reader) ✅

  With Safari (Latest Version) on Mac OS (Latest Version)

• VoiceOver iOS (iPhone/iPad) (Screen Reader) ✅

  Latest Version with Safari (Latest Version) on iOS (Latest Version)

• TalkBack (Screen Reader) ✅

  Latest Version with Chrome (Latest Version) on Android (Latest Version)

• ZoomText (Screen Magnifier with Screen Reader capabilities) ✅

  Latest Version with Internet Explorer 11 on Windows (XP/Vista/7/8/10)

• Dragon Naturallyspeaking (Speech Recognition) ✅

  Version 13 with Internet Explorer 11 on Windows (XP/Vista/7/8/10)

• JAWS (Screen Reader) ✅

  Version 17 with Internet Explorer 11 on Windows (XP/Vista/7/8/10)

• Read&Write (Reading Solution) ❌

  Latest Version with Internet Explorer 11 on Windows (XP/Vista/7/8/10)

• NVDA (Screen Reader) ✅

  Latest Version with Firefox (Latest Version) on Windows (XP/Vista/7/8/10)

[amywalkerdev]

Needs #2454 to be done then we can do an a11y swarm

[ghost]

The ScriptLink overlaps Brand. Breakpoints < 332

[Bopchy]

Currently, when navigating through the banner landmark on a front page with a script link, the script link is announced before the ‘skip to content’ link. This will be fixed in BBC-archive/psammead#2713 , such that the script link is announced after the ‘skip to content’ link

[DenisHdz]

To be consistent with the Nav menu button styling, UX has requested to update the ScriptLink hover/focus state BBC-archive/psammead#2685.

[DenisHdz]

The Skip to content link is not well located in IE.

This has been fixed in BBC-archive/psammead#2680

[Bopchy]

#4180 (comment) was fixed in BBC-archive/psammead#2534

[Bopchy]

BBC-archive/psammead#2751 was discovered during the swarm. This will be fixed in BBC-archive/psammead#2750

BBC-archive/psammead#2750 also adjusts the height, line-height and padding of the ScriptLink for @media (min-width: 400px)

[tochwill]

I've got the devices in the office, will finish these checks off now

[tochwill]

I have completed the rest of the assistive technology checks - text is announced as 'Lat' rather than 'Latin' as in the acceptance criteria (as the text written is 'Lat'), so will check if this is OK. I am unable to get Read&Write to speak the text on either IE11 or Chrome, so will look further into this as well.

[ghost]

I guess it is because it is not wrapped in a container with aria-hidden attribute. In the storybook we could have

<ScritpLink>
  <span aria-hidden='true'> Lat </span>
   <VisuallyHiddenText> Latin </VisuallyHiddenText>
</ScriptLink>

[tochwill]

I guess it is because it is not wrapped in a container with aria-hidden attribute. In the storybook we could have

<ScritpLink>
  <span aria-hidden='true'> Lat </span>
   <VisuallyHiddenText> Latin </VisuallyHiddenText>
</ScriptLink>

This works :)

[tochwill]

Read&Write is not reading the script link on IE11 on windows. On Chrome, on hovering over the script link, all of the content of the Brand component is read. A javascript error is then thrown by the browser extension, and the link is not read again on a second hover.

[ghost]

Read & write issue fixed in BBC-archive/psammead#2833

[DenisHdz]

This can be closed since all the issues/bugs have been fixed.