1795509 - Element with overflow-x: hidden can be focused by Tab key

Status: NEW

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

Description

[Jasmine]

Attachment: tab-focus-repro.html

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:105.0) Gecko/20100101 Firefox/105.0

Steps to reproduce:

1. Open the attached file (tab-focus-repro.html) in Firefox.
2. Press the Tab key

Actual results:

The text can be focused using the Tab key, which does not make sense. It is neither scrollable nor clickable.

Expected results:

The text should not be focusable by the Tab key.

Comment 1

[Emilio Cobos Álvarez [:emilio]]

This code should be tweaked to handle each direction separately. Should be a trivial-ish bug fix + test.

Comment 2

[Gagah Pangeran Rosfatiputra [:GPR]]

Hello, I'm interested to fix this bug!

I need help how to create the test file. Is there any existing test as an example?

Comment 3

[Emilio Cobos Álvarez [:emilio]]

Yes, sure! dom/base/test/test_focus_scrollable_fieldset.html is a somewhat related test you could probably copy as a start.

Instead of focusing <input>s, you could be focusing <p> elements with different overflow values and contents.

Comment 4

[Gagah Pangeran Rosfatiputra [:GPR]]

you could be focusing <p> elements with different overflow values and contents.

Just to confirm, so I need to create test cases for all possible overflow value (visible, hidden, scroll, auto), also with combination of all direction (x, y, both), is that correct?

Comment 5

[Emilio Cobos Álvarez [:emilio]]

Might not be necessary to test visible, nor differentiate between scroll/auto, but you want to test overflow hidden in both and any axis, with and without scroll range on any of the axes.

Comment 6

[Gagah Pangeran Rosfatiputra [:GPR]]

Hello, sorry for the long inactivity. I want to pick this up again.

I already make the test cases for the overflow hidden in both and any axis.

<style>
  .x-hidden {
    overflow-x: hidden;
    white-space: nowrap;
    width: 100px;
  }
  .y-hidden {
    overflow-y: hidden;
    width: 100px;
    height: 20px;
  }
  .both-hidden {
    overflow: hidden;
    width: 50px;
    height: 20px;
  }
</style>

<p class="x-hidden">overflow-x: hidden</p>
<p class="y-hidden">overflow-y: hidden</p>
<p class="both-hidden">overflow: hidden</p>

Can you give example test cases for with and without scroll range on any of the axes?

Thank you.

Comment 7

[Emilio Cobos Álvarez [:emilio]]

Sure, in order to do that you just need to have something taller or wider than the container, respectively.

So, for example, in your test case, you can have a <div style="width: 200px; height: 200px; background-color: green"></div> inside your paragraphs to have overflow in both directions, width: 5px; height: 5px to have no overflow, width: 5px; height: 200px; to have overflow in the y direction, and width: 200px; height: 5px; to have overflow only on the x direction. Does that help?