No visual indicator when a Document Properties close button is focused

[Thunderforge]

The Document Properties window in viewer.js has a "Close" button. However, when the user tabs to this item, there is no visual indicator. To reproduce:

1. Go to the PDF.js demo in any browser
2. Click on the secondary menu bar button (>>) and choose "Document Properties"
3. Click on the URL title bar, then tab through the elements until you get to the secondary menu bar button (>>) and then tab one more time.
4. Note that there is no visual indicator on the Close button. It can still be activated if you press the spacebar though.

One of my coworkers claims that he can see a very slight outline when the button is focused in Firefox, but I can't see it. He says that it does not appear in any other browser.

[timvandermeij]

Perhaps this is due to https://github.com/mozilla/pdf.js/blob/master/web/viewer.css#L40 ? Anyway, this seems like a good beginner bug.

[zinking]

I guess @Thunderforge is talking about highlighting of tab selection focused UI element. tried a couple times. firefox does have dash dotted outlines wrapping the close button to indicate the button is high lighted. while chrome don't.

@timvandermeij I don't think css styles control the button tab highlight , do they?

this issue looks really trivial to me, not sure why care about the tab highlights though @Thunderforge

[Thunderforge]

@zinking The reason that we care about it is that our product has accessibility requirements that we need to meet. Not only do we need to have elements be keyboard accessible (which they are), but also there needs to be a visual indicator so that you can tell at a glance which element is in focus and will respond to keyboard input. I know it may seem trivial to many users, but it's very important to those who, due to disabilities or other reasons, rely on keyboard navigation.

[arni2033]

@zinking You can see that this CSS does the trick if you try "Style Editor" tab in firefox devtools.

:focus
{
  outline:4px solid red!important;
  outline-offset: -2px!important;
  background:green!important;
}

So why is this stated "good-beginner-bug" without any proposal on how selected buttons should look like?

[zinking]

@Thunderforge that is the reason I can think of. Ah, there's really people doing these things. great, thumbs up. @arni2033 thanks for letting me know.

[Snuffleupagus]

Note: This affects all overlayButtons, i.e. the ones in the Password prompt as well.
One idea (I don't know if it's really that good), would be to use the same border-color as we use for the focused .toolbarFields, i.e. something like this:

diff --git a/web/viewer.css b/web/viewer.css
index 4602351..383b17e 100644
--- a/web/viewer.css
+++ b/web/viewer.css
@@ -1305,6 +1305,9 @@ html[dir='rtl'] .attachmentsItem > button {
   margin: 3px 4px 2px 4px !important;
   padding: 2px 6px 3px 6px;
 }
+.overlayButton:focus {
+  border-color: hsla(204,100%,65%,.8) hsla(204,100%,65%,.85) hsla(204,100%,65%,.9);
+}

 #overlayContainer {
   display: table;

[Thunderforge]

The fix from @dsprenkels works for our team. I'm not sure if @Snuffleupagus was a commentary on that fix or if it was an alternate implementation.

[yurydelendik]

One of my coworkers claims that he can see a very slight outline when the button is focused in Firefox, but I can't see it. He says that it does not appear in any other browser.

fwiw, I can see the outline on Firefox for Mac OSX:

[dsprenkels]

@Thunderforge, I hesitated to put this through. This was the first time I was looking into the pdf.js code.

Sorry for all the commit spam. I hesitated and deleted the repository before, because I have rarely worked on stranger's code.

But if you would like my fix, feel free to accept my pull request (#6308).

@yurydelendik, it's about the (very subtle) dark glow of the button. See the images below for the difference.