Open Bug 1889362 Opened 1 year ago Updated 1 year ago

Clicking on a scrollbar moves focus to closest click-focusable ancestor, if any (was: Focus behavior on overflow: scroll is different in dialog and body)

Categories

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

Product:
Core
Component:
DOM: UI Events & Focus Handling
Version:
Firefox 124
Type:
defect

Tracking

()

People

(Reporter: tom.schindl, Unassigned)

References

Details

Attachments

(2 files)

dialog.html
1.24 KB, text/html
Details
test-case with a <div tabindex>
647 bytes, text/html
Details
Attached file dialog.html —

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:124.0) Gecko/20100101 Firefox/124.0

Steps to reproduce:

Repeat the above steps on the dialog opened with the button and you'll notice that the button looses the focus if you start interacting with the scrollbar.

Actual results:

Using the scrollbar in a dialog move the focus from the current element onto the dialog

Expected results:

Using the scrollbar keeps the focus on the current focused element like it does when used inside the <body> directly

The current behavior makes it impossible to use more complex controls eg https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/ because upon scrolling with the mouse the focus gets lost

The Bugbug bot thinks this bug should belong to the 'Core::Layout: Scrolling and Overflow' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Component: Untriaged → Layout: Scrolling and Overflow
Product: Firefox → Core

The severity field is not set for this bug.
:hiro, could you have a look please?

For more information, please visit BugBot documentation.

Flags: needinfo?(hikezoe.birchill)

I tested the test case on Chrome, on Chrome focus changes happen in the original scroll container's scrollbar for some reasons.

This seems unrelated to <dialog> whatsoever, afaict. This is more about whether the container is focusable by mouse, see test-case.

Whether it should happen, I don't know, tho... You could argue that clicking on the scrollbars shouldn't focus the closest container element...

Now, two questions:

  • Should clicking the scrollbar move the focus to the nearest focusable ancestor? Debatable...
  • Should <dialog> be click-focusable?

Sean, do you happen to know if the later was discussed?

Flags: needinfo?(sefeng)

I wonder if someone on the a11y team has strong opinions on this? I could see arguments both ways about my first question above...

Status: UNCONFIRMED → NEW
Component: Layout: Scrolling and Overflow → DOM: UI Events & Focus Handling
Ever confirmed: true
Summary: Focus behavior on overflow: scroll is different in dialog and body → Clicking on a scrollbar moves focus to closest click-focusable ancestor, if any (was: Focus behavior on overflow: scroll is different in dialog and body)

It does seem our behavior is consistent with Chrome indeed...

(In reply to Emilio Cobos Álvarez (:emilio) from comment #5)

This seems unrelated to <dialog> whatsoever, afaict. This is more about whether the container is focusable by mouse, see test-case.

... You could argue that clicking on the scrollbars shouldn't focus the closest container element...

I think there's still an inconsistency here though. I realise that "focus" on the document/body is a bit different from focus on a container; you can't really "focus" a document, but rather you blur focus. Even so, in a11y terms at least, the document gets "focus" when you blur. So, even assuming that focusing the nearest focusable container when you click the scroll bar is the right thing to do, shouldn't we be focusing the document (AKA blurring the focus) when you click the document scroll bar for consistency?

Possibly, yeah

The chrome ticket i filed is https://issues.chromium.org/issues/332589871

Should <dialog> be click-focusable?

I am not aware any discussion about this.

I searched around and found an old webkit bug which they intentionally to make clicking the scrollbar to not blurring the existing focus on the document, to match Chrome and Firefox.

To me it seems that the most common/acceptable behaviour is to not blurring the focus when you click the scrollbar. Should we special case the scrollbar so that it won't blur the existing focus, but <dialog> remains click focusable? I think it'd be weird you can't click the <dialog> to blur the focus.

Flags: needinfo?(sefeng)

I think it'd be weird you can't click the <dialog> to blur the focus.

Note that making the dialog not click-focusable would still allow you to blur the focus with the mouse, it's just that the focus wouldn't go to the <dialog>

Flags: needinfo?(hikezoe.birchill)
Severity: -- → S3
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: