1650820 - TekSavvy availability checker dialog now shows drop-downs under itself, and no longer autofocuses the street input

Status: RESOLVED WORKSFORME

(Web Compatibility :: Site Reports, defect, P2)

Description

[Thomas Wisniewski [:twisniewski]]

After bug 1645046 landed, the TekSavvy "check availability" dialog now no longer autofocuses on its "street" input. In addition, the drop-down wheen one begins to type into the street input now appears under the dialog.

Comment 1

[Emilio Cobos Álvarez (:emilio)]

It's also mispositioned because we use translate rather than transform in the UA sheet. We should probably change that.

Comment 2

[Sean Feng [:sefeng]]

For the focusing part, I think the page uses https://github.com/GoogleChrome/dialog-polyfill to operate the dialog. If the dialog feature is not supported, it'd use dialog-polyfill's focusing steps implementation which results in the <input> to be focused. On the other hand, our dialog focusing steps focus the Sign in here link as this is the first non-inert descendant element (based on spec).

So I think we are not doing anything wrong here, in terms of following the current version of the spec. Chrome also focuses on the Sign in here link. One could argue that focusing the input is better for accessibility, we do have some accessibility changes we want to make, however they are not in the spec yet.

cc Jamie for this is a good accessibility use case.

For the dropdown appears under the dialog, I believe the website uses https://github.com/kraaden/autocomplete to do it, and the default setting of this library would render the dropdown under the dialog in both Firefox (when naive dialog is enabled) and Chrome. The site has a blink specific fix which makes it not rendering under the dialog in Chrome

    customize: function (input, t, container, maxHeight) {
        document.body.classList.contains("blink") &&
        (container.style.top = "", container.style.left = "",
          document.querySelector(".addr").appendChild(container))
    }

So I believe the correct fix is applying the same fix to Gecko.

Comment 3

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

Set release status flags based on info from the regressing bug 1645046

Comment 4

[Hsin-Yi Tsai (she/her) [:hsinyi]]

(In reply to Sean Feng [:sefeng] from comment #2)

For the dropdown appears under the dialog, I believe the website uses https://github.com/kraaden/autocomplete to do it, and the default setting of this library would render the dropdown under the dialog in both Firefox (when naive dialog is enabled) and Chrome. The site has a blink specific fix which makes it not rendering under the dialog in Chrome

    customize: function (input, t, container, maxHeight) {
        document.body.classList.contains("blink") &&
        (container.style.top = "", container.style.left = "",
          document.querySelector(".addr").appendChild(container))
    }

So I believe the correct fix is applying the same fix to Gecko.

Thanks for the diagnosis! Will report the issue to the website .

Comment 5

[James Teh [:Jamie]]

(In reply to Sean Feng [:sefeng] from comment #2)

One could argue that focusing the input is better for accessibility, we do have some accessibility changes we want to make, however they are not in the spec yet.

Note that the changes we're proposing wouldn't focus the input here by default. Instead, they'd focus the dialog itself. However, the input could be focused simply by adding the autofocus attribute. In this case, focusing the input is probably better for accessibility, but that's not always going to be the case, so I think allowing this to be set explicitly with autofocus is a better option.

Note that putting autofocus on the input will already work in Firefox and Chrome. I'm not sure what the polyfill will do with that, though.

Comment 6

[Hsin-Yi Tsai (she/her) [:hsinyi]]

(In reply to Hsin-Yi Tsai [:hsinyi] from comment #4)

(In reply to Sean Feng [:sefeng] from comment #2)

For the dropdown appears under the dialog, I believe the website uses https://github.com/kraaden/autocomplete to do it, and the default setting of this library would render the dropdown under the dialog in both Firefox (when naive dialog is enabled) and Chrome. The site has a blink specific fix which makes it not rendering under the dialog in Chrome

    customize: function (input, t, container, maxHeight) {
        document.body.classList.contains("blink") &&
        (container.style.top = "", container.style.left = "",
          document.querySelector(".addr").appendChild(container))
    }

So I believe the correct fix is applying the same fix to Gecko.

Thanks for the diagnosis! Will report the issue to the website .

Contacted the website. Hope we hear back from them soon.

Comment 7

[Julien Cristau [:jcristau]]

dom.dialog_element.enabled is nightly only.

Comment 8

[Emilio Cobos Álvarez (:emilio)]

The compat bug was closed and the site was fixed.