SDSS-846: A11y | Updates to News Vertical Card component

[jenbreese]

READY FOR REVIEW

Summary

• A11y updates to the vertical news card
• fixed

Review By (Date)

• 9/1

Criticality

• Normal

Review Tasks

Setup tasks and/or behavior to test

1. Check out this branch
2. Navigate to a news page.
3. Make sure it has Explore more cards at the bottom.
4. Verify the image link has a tab-index=-1 and an aria-hidden=true
5. Tab through the cards, notice it goes from the image to the headline to the date.

Front End Validation

• Is the markup using the appropriate semantic tags and passes HTML validation?
• Cross-browser testing has been performed?
• Automated accessibility scans performed?
• Manual accessibility tests performed?
• Design is approved by @ user?

Backend / Functional Validation

Code

• Are the naming conventions following our standards?
• Does the code have sufficient inline comments?
• Is there anything in this code that would be hidden or hard to discover through the UI?
• Are there any code smells?
• Are tests provided? eg (unit, behat, or codeception)

Code security

• Are all forms properly sanitized?
• Any obvious security flaws or new areas for attack?

General

• Is there anything included in this PR that is not related to the problem it is trying to solve?
• Is the approach to the problem appropriate?

Affected Projects or Products

• Does this PR impact any particular projects, products, or modules?

Associated Issues and/or People

- SDSS-846

Resources

• AMP Tool
• Accessibility Manual Test Script
• HTML Validator
• Browserstack and link to Browserstack Credentials

[joegl]

Code LGTM. I verified the steps to test except when I tab through "Explore More", I'm having two things happen that don't align:

1. I do not tab to the date; only the headline and the image.
2. I tab to the headline first and then the image. The steps say the order should be image, headline, date; mine is headline then image, no date.

I am using Chrome on Windows.

@jenbreese FWIW, I experienced the above in an Incognito/Private browser when not logged in. When I was logged in it appeared to tab in the order you specified.

[jenbreese]

@joegl I'm sorry I forgot you are using a Windows machine. When I said tab I forgot it was a VoiceOver tab which is different. What happened when you tabbed is ok.

[joegl]

LGTM, thanks Jen!