Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Default to polyfill off in Web Native cases? #258

Open
cpyle0819 opened this issue May 27, 2021 · 0 comments
Open

Default to polyfill off in Web Native cases? #258

cpyle0819 opened this issue May 27, 2021 · 0 comments

Comments

@cpyle0819
Copy link

cpyle0819 commented May 27, 2021

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 cpyle0819 changed the title Absence of interaction events causes outline to display by default on focus. Default to polyfill off in Web Native cases? May 27, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant