Whole Card Clickabilty Test Page

[colbytcook]

Jira

https://pegadigitalit.atlassian.net/browse/WWW-1480

Summary

Created a test page to test out different methods of whole card clickability

[remydenton]

Overall looks good, thanks for adding this.

I noticed the "Open a modal" button in the Existing Card With Button example doesn't work. Is that a known issue? If so, might be helpful to add a small note that it isn't expected to work currently.

Screen.Recording.2022-07-07.at.12.28.01.PM.mov

[colbytcook]

@remydenton yea sorry, I will update this to be more apparent to why it breaks. I added a note in the description but I will make it more pronounced, one sec (I will also fix the silly typo!)

[danielamorse]

The Teaser solution is definitely the way to go. Wrapping the card in a button works but technically only "phrasing content" is permitted inside a button. When we put a whole card inside the button it has no accessible name. I added aria-label to the Trigger example as a slight improvement, but still strongly recommend going with Teaser for accessibility reasons.