1804462 - Keyboard Navigation focus border is not properly displayed inside Datepickers

Status: VERIFIED FIXED

(Core :: Layout: Form Controls, defect)

Description

[Ina Popescu, Desktop QA]

Found in

• Nightly 109.0a1

Affected versions

• Firefox Nightly 109.0a1

Tested platforms

• Affected platforms: Windows 10, Ubuntu 22.04
• Unaffected platforms: macOS 11

Preconditions

• Firefox Nightly installed

Steps to reproduce

1. Open data:text/html, <input type='date'> or data:text/html,<input type='datetime-local'> in browser
2. Click on the calendar button inside the date field
3. Tab to reach the Show next month and Show previous month buttons
4. Observe the two buttons

Expected result

• Reaching any buttons from the Datepicker using keyboard navigation should show a blue highlight border on the focused item

Actual result

• On Windows 10: Default and Light Themes do no show a blue highlight border. (Dark theme and Bold Colorways do.)
  Windows High Contrast themes do show a border, but it's the same broken highlight.
  On Ubuntu: Dark OS Theme , Dark themes from Firefox or Bold Colorways theme will not show a blue highlight border. (Light themes do show a blue highlight.)
  This issue does not occur on MacOS.

Regression range

• Not a regression because these improvements were recently implemented through Bug 1676068.

Additional notes

• When using Dark Theme on Windows, the border of the focused item is cut off.

Comment 1

[Ina Popescu, Desktop QA]

Attachment: arrows on Win.png

Comment 2

[Ina Popescu, Desktop QA]

Attachment: arrows on dark theme_Win.png

Comment 3

[Ina Popescu, Desktop QA]

Attachment: arrows on macOS.png

Comment 4

[Ina Popescu, Desktop QA]

Attachment: border cut off.png

Comment 5

[Anna Yeddi [:ayeddi]]

Attachment: RTL-focus-cut-off-on-edges.png

Comment 6

[Anna Yeddi [:ayeddi]]

Attachment: RTL-focus-cut-off-arrows.png

From Itiel in the Phab comment:

Despite the z-index added in D139980, focusing a day nubmer close to the outer area of the popup (including the day names) is cut off:
(see the screenshot attached above)
and for the arrows:
(attached)

Comment 7

[Rares Doghi, Desktop QA]

Attachment: Screenshot 2022-12-08 at 12.55.15.png

Please note that on Mac OS with High contrast enabled it wont show the keyboard focus border around the Calendar button it will just highlight it with blue.

Comment 8

[Anna Yeddi [:ayeddi]]

(In reply to Rares Doghi from comment #7)

Created attachment 9307282 [details]
Screenshot 2022-12-08 at 12.55.15.png

Please note that on Mac OS with High contrast enabled it wont show the keyboard focus border around the Calendar button it will just highlight it with blue.

That is sufficient indication of focused state that is expected for buttons on High Contrast Mode (HCM).

Comment 9

[Eitan Isaacson [:eeejay]]

Setting to access-s2 because the insufficient focus indication makes it impossible for keyboard users to use.

Comment 10

[BugBot [:suhaib / :marco/ :calixte]]

The severity field for this bug is set to S3. However, the accessibility severity is higher, [access-s2].
:dao, could you consider increasing the severity?

For more information, please visit auto_nag documentation.

Comment 11

[Anna Yeddi [:ayeddi]]

Attachment: Bug 1804462 - Ensure focus outline is fully shown within a date picker panel. r?dao,Itiel

Avoid one or two sides of the focus indicator being cut off on the edges of the panel.

Comment 12

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/bb852262fb29
Ensure focus outline is fully shown within a date picker panel. r=dao,desktop-theme-reviewers

Comment 13

[Marian-Vasile Laza]

https://hg.mozilla.org/mozilla-central/rev/bb852262fb29

Comment 14

[Ina Popescu, Desktop QA]

Attachment: screenshots.7z

I've checked on Windows 10 using the latest version Nightly 112.0a1 the focused state on the Show next month and Show previous month buttons of the datepicker when using keyboard.
It seems there is a double border when focusing these buttons and having the Dark Theme enabled in Firefox.
Anna, could you please share your opinion on this?

Please see the screenshots attached:
High Contrast_Win 10
Dark theme_Win10
Dark theme_Win10(2)
Dark theme_Win10(3)

Comment 15

[Anna Yeddi [:ayeddi]]

Hi Ina, thank you for checking the focus out!

I'd defer to Morgan if this is the behavior we want to change and, if so, how we'd like it to look like. I'll be happy to work on the fix when I'm back then.

Comment 16

[Morgan Reschenberg [:morgan]]

This looks fine to me :)

Comment 17

[Ina Popescu, Desktop QA]

Thanks for confirming.
Marking this as Verified Fixed.