LinkField is accessible

[maxime-rainville]

Story

As visually impaired content author, I want to be able to manage Links.

Some things to watch out for

• should be able to tab through links and press enter to open the modal, even in read-only
• opening the modal should give focus to the first field in the modal automatically
• if closing or submitting the modal using the keyboard, focus should be returned to the button which would open the modal for that link (or to the "add link" button for new link modal)
• Should be able to submit modal using the enter key when focus is on any text field
• Should be able to reorder links with the keyboard.
• Aria label should be present whenever an image/icon is used instead of text.

Acceptance criteria

• Accessibility issues with LinkField are identified.
• Simple issues are addressed.
• Complex issues are spun up as separate card.

Exception

• In some cases the LinkField maybe reusing other CMS UI elements that are not accessible (e.g. File Upload modal). Fixing those other elements is beyond the scope of this card.

Note

• Since this is a one of the first time we do a proper accessibility review, we should take learning from this card into a retro topic.

New issues created

• Behat test for keyboard sorting #205

PRs

• ENH Improve keyboard support #200

[maxime-rainville]

Cassie said this should be a high priority.

[emteknetnz]

Accessibility issues with LinkField are identified.

Going from https://govtnz.github.io/web-a11y-guidance/

Accessible UX best practices:

• Colour and contract - Out of scope for this card - broader issue with CMS that should be dealt with in a CMS redesign
• Designing documents for print - Not applicable for the CMS
• Keyboard accessibility - Linked PR implements - I think LinkField should now be compliant with everything there?
• Language of content - Out of scope for this card - broader issue with CMS, though I'm honestly not sure if it's an issue right now since we already have translatable support

Linked PR implements keyboard nav and I honestly don't know what else to look for accessibility issues with linkfield

Complex issues are spun up as separate card.

To meet the AC's I could spin up a new card to look at accessibility of the CMS in terms of colors / contrast / font sizes etc, though I'm not sure what value there is of that in isolation - I'd expect that sort of card would be created as part of a broader CMS design refresh epic

[GuySartorelli]

Might make sense to open a card to add behat tests for whatever scenarios you couldn't cover in jest

[emteknetnz]

Have creating a new issue to use behat to test keyboard sorting #205

[sabina-talipova]

Task is completed. PR's merged.