### Keyboard nav to and from QuickView panelAs part of the initial QuickView implementation, Eric did a lot of work to enable keyboard navigation to, from, and within the Quickview component. There are a few things we could do to make this even better:
If a user navigates to an image and presses enter to open the QuickView panel, they would have to tab through all the remaining image results before getting to the QuickView aside element. When a user opens QuickView we should move focus to the panel, probably on the title link to the filepage. Similarly, when the user closes the panel,1. we should return them to the image they expanded.
### Keyboard nav within QuickView panel
None of the links in the QuickView component are reachable by keyboardBetter focus styles for close button. It's most important that the two buttonsCurrently, "close" and "morwe're using the details"fault outline, are keybowhich looks a little awkward accessibleround the round button. There are a few issues with the close button:
- It needs to be reachable by keyboard@mwilliams is considering alternate designs here.
- We should add (hidden) link text
- The focus styles could be more obvious
One way to tackle this would be to use the Button component and change the styles to match the current design.2. The call to action button should be a link since it takes the user to a different page. We've considered adding a LinkButton base component, which is a link styled to look like a button. That said, Similarlyit's typically not ideal for UX to show the user a button when they're actually clicking on a link, the Button component probablyso perhaps we shouldn't be used for the "more details" link,d reconsider
3. so we might consider a simple LinkButton component that produces a link styled like a button.Review the [[ https://www.w3.org/TR/html52/sections.html#the-aside-element | w3 spec on asides ]] and see if we need to do anything else to ensure the QuickView UX works via screen reader
[ ] User can navigate to and from quickview panel via keyboard
[ ] All links in the quickview panel are accessible by keyboard navigation
[ ] Close button has visually-hidden label or title and visible focus styles
[ ] More Details button is a link styled like a button
[ ] Code meets standards set in the w3 spec
### COVID-19 Deployment Criteria
[x] Can you roll back this change without lasting impact? - Yes
# A recovery plan is required as this will help identify our capacity for recovering from the failure
# THIS IS A KEY QUESTION, if you can’t answer it, you shouldn’t deploy
[x] Is specialized knowledge required to support this change in production? If so, are there multiple people with this knowledge? - No specialized knowledge needed
[x] Is there a way to increase confidence about the correctness of this change?
# Reviews (Design, Code, etc)
# Testing coverage (unit tests, integration tests)
# Manual testing (e.g. Beta, vagrant, docker)