#92: focus indicator bug fixes

[carylwyatt]

website logo focus indicator

The navbar logo had a visible focus indicator in the apps but not on the website. The element received focus without issue, but there was no visible focus indicator. I changed the display to block instead of inline and that fixed the issue.

"active" button focus indicator style

I missed that we use the "active" class on some buttons (the ones that came up during testing are in page turner, but they may be elsewhere, too!). "active" buttons had their own focus styles from bootstrap, so I overrode those.

remove animations on focus

The animations that are triggered on focus are not consistent and are a little distracting. I set transition: unset in all of our focus state styles to remove animations on focus.

to test

• Hop on your VPN and head over to https://dev-3.www.hathitrust.org/. Tab through to the navbar logo and see the blue focus indicator.
• Pick any item in page turner. Maybe the jello book from the website launch? Open the "Search in this Text" accordion and search for 'jello'. Use your keyboard to tab down to the search sorting options. The two gray buttons have an "active" class applied, and when you tab over them, you should see a blue outside ring with a white inside ring around the gray button.
• There isn't a very good way to test the lack of animation on the focus styles. You can tab around and see if the blue ring slowly (300ms isn't really slow but it kind of is compared to 0ms) fades in or not. Based on my testing, there is still animation on the colors of the text and background of buttons and links, but that's supposed to be like that. It's pretty subtle, so don't worry about testing this, really.

[netlify]

✅ Deploy Preview for hathitrust-firebird-common ready!

Name	Link
🔨 Latest commit	7f9497f
🔍 Latest deploy log	https://app.netlify.com/sites/hathitrust-firebird-common/deploys/66a3cf4b5d16db000898445b
😎 Deploy Preview	https://deploy-preview-97--hathitrust-firebird-common.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[liseli]

I have tested this PR and it seems it is working fine. I could see all the changes Caryl mentioned

[carylwyatt]

@angelinanz @giramesh These are now staged on https://test.www.hathitrust.org/ and ready for testing before deploying on Monday. I also updated page turner so these styles should also apply there. Thanks!

[giramesh]

can confirm that the focus indicator on website logo and active buttons states are visible, and i do not see animation (if i did, it was subtle) - tested on chrome, firefox, edge, safari!