SHS-6001: Accessibility issues in lists of people

[mariannuar]

Summary

• Make structured card full clickable to avoid having redundant information
• Add more context to the links inside the structured card

Need Review By (Date)

01/30

Urgency

medium

Notes

• To avoid having redundant links, it's necessary to go to the configuration of the view and remove the Link media to parent for the Image field
• All links inside structured card (it's the pattern being used in person lists) are going to have this structured <a href="/"><span class="visually-hidden">Emilius Aalto: </span>Website</a>, except mailto links and the title link

Steps to Test

1. Go to /default-views/people
2. Scroll down to Default People view - People List Link (Grouped) Display
3. Confirm the whole card is clickable and it works and looks as expected when interacting with it.
4. Confirm that you can interact with text inside the card without the issue of being redirect immediately to another page. (Please check this also in /default-views/news
5. Check links inside the card (Like Personal Website, Email, etc) now have this structured <a href="/"><span class="visually-hidden">Emilius Aalto: </span>Website</a>, except mailto links and the title link

Review Tasks

Backend / Functional Validation

Code

• Are the naming conventions following our standards?
• Are PHP functions and variables in snake_case and not camelCase?
• Does Drupal code follow Drupal Coding 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?

Code security

• Is all user input properly sanitized when rendered?
• 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?

---

• To see the specific tasks where the Asana app for GitHub is being used, see below:
  • https://app.asana.com/0/0/1209354428724036

[cienvaras]

@mariannuar Looks good! Let's just organize the JS files a bit better:

1. Rename linked-cards folder to cards, move structured-cards.js there
2. Extract click and focus event handlers to a new file, add a wrapper function to assign all event handlers at once to cards
3. Include the new file and call the wrapper function in both linked-cards.js and structured-cards.js

This will help us find to have a better structure that goes along the JS restructuring done in #1691

[mariannuar]

@cienvaras Ready for review again!

[cienvaras]

@mariannuar Looks great. There's just one small detail that we discussed in our call but forgot to add to the requested changes: let's use the is-focused class that's being added when the title is focused to match the hover styles for the whole card (I think it's only the zoom effect on the image)

[mariannuar]

@cienvaras Done!

[cienvaras]

@mariannuar Works as expected, thanks for the fixes!

@ahughes3 Ready for you

[ahughes3]

LGTM!

[mariannuar]

@cienvaras @ahughes3 Changes to unlink the image applied to Default People views

[joegl]

@mariannuar @cienvaras @ahughes3 I merged this one but noticed Maria made a small change after the approvals.

[cienvaras]

Thanks @joegl, yes, that's something extra we discussed during today's demo and I forgot to add a comment to let you know. It's a small config change, so shouldn't be a problem, but I'll take a look and confirm that everything works as expected.

cc. @ahughes3 @mariannuar

[joegl]

Awesome, thanks Andres 👍