Closed Bug 1391428 Opened 7 years ago Closed 2 years ago

Next focusable element is not updated on button click on OS X

Categories

(Core :: DOM: UI Events & Focus Handling, defect, P2)

54 Branch
Unspecified
macOS
defect

Tracking

()

RESOLVED WORKSFORME

People

(Reporter: varmaa, Unassigned)

Details

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.101 Safari/537.36

Steps to reproduce:

I visited the "UI components -> Accordions" page in the U.S. Web Design Standards at https://standards.usa.gov/components/accordions/ on Firefox on OS X. Then I clicked the "Second Amendment" accordion button and pressed Tab.


Actual results:

The button did not receive focus when I clicked, as expected for the OS X platform (see bug 756028 for a justification of this). However, pressing Tab afterwards focused the "First Amendment" button immediately above the button I clicked.



Expected results:

The "Third Amendment" button--the first focusable element after the button I clicked--should have been focused. This is what happens on OS X Safari, so I assume it's the expected behavior for the platform.
Component: Untriaged → Event Handling
OS: Unspecified → Mac OS X
Product: Firefox → Core
(In reply to Atul Varma from comment #0)
> User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36
> (KHTML, like Gecko) Chrome/60.0.3112.101 Safari/537.36
> 
> Steps to reproduce:
> 
> I visited the "UI components -> Accordions" page in the U.S. Web Design
> Standards at https://standards.usa.gov/components/accordions/ on Firefox on
> OS X. Then I clicked the "Second Amendment" accordion button and pressed Tab.
> 
> 
> Actual results:
> 
> The button did not receive focus when I clicked, as expected for the OS X
> platform (see bug 756028 for a justification of this). However, pressing Tab
> afterwards focused the "First Amendment" button immediately above the button
> I clicked.
> 

Additional note from my observation - When I pressed tab after clicking "Second Amendment" in the "Borderless" section, the "First Amendment" in the "Deprecated" section was focused.


> 
> 
> Expected results:
> 
> The "Third Amendment" button--the first focusable element after the button I
> clicked--should have been focused. This is what happens on OS X Safari, so I
> assume it's the expected behavior for the platform.
Priority: -- → P2
(In reply to Atul Varma from comment #0)
> Expected results:
> 
> The "Third Amendment" button--the first focusable element after the button I
> clicked--should have been focused. This is what happens on OS X Safari, so I
> assume it's the expected behavior for the platform.

To switch focus via Tab on Safari, a preference is required to enable:
Preferences -> Advanced -> Accessibility -> check "Press Tab to highlight each item on a webpage"
(In reply to Atul Varma from comment #0)
> The button did not receive focus when I clicked, as expected for the OS X
> platform (see bug 756028 for a justification of this). However, pressing Tab
> afterwards focused the "First Amendment" button immediately above the button
> I clicked.

When mouse clicks, focused node is cleared [1] since button is non-focusable with mouse on OS X [2][3]. As a result, post-handling of TAB key event [4] seeks next tabbable content from document's root element [5] instead of focused node [6].

[1] http://searchfox.org/mozilla-central/rev/48ea452803907f2575d81021e8678634e8067fc2/dom/events/EventStateManager.cpp#3140
[2] http://searchfox.org/mozilla-central/rev/48ea452803907f2575d81021e8678634e8067fc2/dom/events/EventStateManager.cpp#3099
[3] http://searchfox.org/mozilla-central/rev/48ea452803907f2575d81021e8678634e8067fc2/dom/html/HTMLButtonElement.cpp#161
[4] http://searchfox.org/mozilla-central/rev/48ea452803907f2575d81021e8678634e8067fc2/dom/events/EventStateManager.cpp#2935
[5] http://searchfox.org/mozilla-central/rev/48ea452803907f2575d81021e8678634e8067fc2/dom/base/nsFocusManager.cpp#2835
[6] http://searchfox.org/mozilla-central/rev/48ea452803907f2575d81021e8678634e8067fc2/dom/base/nsFocusManager.cpp#2664


Note in my trial, first time pressing Tab focuses on _button "Here's how you know" at the top_ and "First Amendment" is focused at the second time.
(In reply to Atul Varma from comment #0)
> Expected results:
> 
> The "Third Amendment" button--the first focusable element after the button I
> clicked--should have been focused. This is what happens on OS X Safari, so I
> assume it's the expected behavior for the platform.

Safari's behavior doesn't seem to follow spec [1] as "Second Amendment" button shouldn't receive keyboard events if it's not focused. Note Chrome focuses on button with mouse regardless of OS X platform convention.

[1] "Keyboard events are always targeted at this focused element."
https://html.spec.whatwg.org/multipage/interaction.html#introduction-8
Component: Event Handling → User events and focus handling

see also https://zellwk.com/blog/inconsistent-button-behavior/
doing a a cross analysis of button behavior across platforms and browsers.

Webcompat Priority: --- → ?
Webcompat Priority: ? → revisit

Not sure if the site changed or if Firefox changed, but the original report is no longer reproducible.

Status: UNCONFIRMED → RESOLVED
Closed: 2 years ago
Webcompat Priority: revisit → ---
Resolution: --- → WORKSFORME
You need to log in before you can comment on or make changes to this bug.