focus-visible icon indicating copy to clipboard operation
focus-visible copied to clipboard

Default to polyfill off in Web Native cases?

Open cpyle0819 opened this issue 3 years ago • 0 comments

Thank you

First, thanks for this polyfill. It's great, and is working for most of our needs.

Summary

Our app is an ionic/capacitor app which manipulates the focus for the benefit of screen readers. We noticed when the polyfill is installed, focus-visible is applied to one of the elements we're focusing on app start. This scenario does not match any of the specs for the polyfill standard: we're not coming off a previous focus-visible element, there is no user setting, there's no keyboard navigation, etc.

Root Cause

Upon digging into the code, we found this:

    function onFocus(e) {
      // Prevent IE from focusing the document or HTML element.
      if (!isValidFocusTarget(e.target)) {
        return;
      }

      if (hadKeyboardEvent || focusTriggersKeyboardModality(e.target)) {
        addFocusVisibleClass(e.target);
      }
    }

The trigger ended up being hadKeyboardEvent = true. Which I assume is because:

    function applyFocusVisiblePolyfill(scope) {
      var hadKeyboardEvent = true;
      
    // AND
    /**
     * When the polfyill first loads, assume the user is in keyboard modality.
     * If any event is received from a pointing device (e.g. mouse, pointer,
     * touch), turn off keyboard modality.
     * This accounts for situations where focus enters the page from the URL bar.
     * @param {Event} e
     */
    function onInitialPointerMove(e) {

Question

My question is: is there a way to have hadKeyboardEvent = false in scenarios where we're not coming directly from the url bar, like in the case of our native web app?

cpyle0819 avatar May 27 '21 16:05 cpyle0819