Focus is displayed inconsistently

[stephanrauh]

Have a look at the showcase https://mozilla.github.io/pdf.js/web/viewer.html. Open the find dialog, click into the input field and hit the tab key three times. While doing that, you'll observe the focus is displayed in three different ways:

• a nice blue frame around input fields
• a stylish but hard-to-spot blue halo around checkboxes
• a white frame plus slightly darker background on every other button and menu icon. That's hard to see if you're outside a building or if the sun is shining brightly into your office.

Note that's a general topic. I only mentioned the findbar because all three options are there side-by-side.

Using Chrome the focus looks a bit different. In particular, the checkboxes aren't hightlighted at all, and the buttons don't have the white border.

Here are some screenshots, taken with a current Firefox:

I also wonder why there's so much focus-related CSS. I suppose you could join several of these rules.

[Snuffleupagus]

It doesn't seem entirely necessary to track these sort of changes separately, since it'd make a lot more sense to address this as part of #9702 (which covers modernization of the UI). That work is however made more difficult by the lack of an updated official PDF.js design-spec from the Firefox UI/UX-team.

---

Also, this issue seem to lack a good closing criteria, i.e. it's not entirely clear at what point it would actually be considered "fixed"; the third paragraph of https://github.com/mozilla/pdf.js/blob/master/.github/CONTRIBUTING.md is perhaps relevant here.

[stephanrauh]

You're right, it's a good idea to track this topic in #9702.

it's not entirely clear at what point it would actually be considered "fixed"

Well, that's up to you. I just thought you might be interested to learn the focus is displayed differently. I can't decide what it should look like. That your job, or the job of your UX designers. :)

I've started to create my own UI of the viewer which embraces the look and feel of Material Design, so probably I'm going to implement the focus the way Angular Material does. But that's only my choice. By the way, it's interesting that the my new design resembles #11077 despite being developed independently. Have a look at https://pdfviewer.net/find if you're interested in the intermediate result.

[stephanrauh]

@Snuffleupagus I've found the relevant part of the Mozilla UI guidelines for you: https://design.firefox.com/photon/components/buttons.html
https://design.firefox.com/photon/components/input-fields.html
https://design.firefox.com/photon/components/checkboxes.html

[timvandermeij]

Let's indeed track this together with the Photon modernization efforts. Thanks!