Open flathub.org in Firefox or chromium-browser, and click the magnifying glass icon in the header.
A text field appears with "Search apps" placeholder text, but this does not have the input focus. You have to click a second time to type anything into it, or press [Shift+Tab] to move the focus to it A minor detail, but it feels weird.
you would think the autofocus="" would put the input focus there.
In fact, if you bring up a flathub page and immediately type BAZINGA, then click the magnifying glass, the search box appears with your typed text in it. So the initial input focus is set to this invisible field (you can [Tab] and [Shift+Tab] from it to the magnifying glass and 3-dot menu), but when you click on the magnifying glass, your keyboard focus doesn't return to the search box. After clicking the magnifying glass, typing document.activeElement in the browser developer tools console displays <button _ngcontent-bgw-c94="" mat-icon-button="" class="mat-focus-indicator ...">, not the input#search-box.search-box. If you tab backwards and forwards you can see the input focus ring highlight "behind" the search box where the magnifying glass was visible.
hotlittlewhitedog
commented
2 years ago
Open flathub.org in Firefox or chromium-browser, and click the magnifying glass icon in the header. A text field appears with "Search apps" placeholder text, but this does not have the input focus. You have to click a second time to type anything into it, or press [Shift+Tab] to move the focus to it A minor detail, but it feels weird.
Looking at the HTML for the search box,
you would think the
autofocus=""would put the input focus there.In fact, if you bring up a flathub page and immediately type BAZINGA, then click the magnifying glass, the search box appears with your typed text in it. So the initial input focus is set to this invisible field (you can [Tab] and [Shift+Tab] from it to the magnifying glass and 3-dot menu), but when you click on the magnifying glass, your keyboard focus doesn't return to the search box. After clicking the magnifying glass, typing document.activeElement in the browser developer tools console displays
<button _ngcontent-bgw-c94="" mat-icon-button="" class="mat-focus-indicator ...">, not theinput#search-box.search-box. If you tab backwards and forwards you can see the input focus ring highlight "behind" the search box where the magnifying glass was visible.