Service for handling keyboard vs. mouse focus behavior

[devversion]

Currently, we always show a focus effect on the button component, when there was no mouse event the last 100ms.

This is really hard-coded and there are bugs. For example, switching browser tabs, is restoring focus and showing the focus-effect (should not happen).

A service for interaction, which detects the last interaction type would solve that issue very elegant and would be also helpful for other components.

I also implemented that in Material 1 (still pending after re-submit) and I would like to implement it in Material 2 as well.

So let me know if you need this, and I will implement it :)

[jelbourn]

@devversion yeah, this would be nice to have. I think the better solution is to set a flag on touchstart / mousedown and use that on the focus event. Is that what your approach in ng1 did?

[devversion]

@jelbourn - This is what we currently do in Material 1 and Material 2.

      scope.mouseActive = false;
      element.on('mousedown', function() {
        scope.mouseActive = true;
        $timeout(function(){
          scope.mouseActive = false;
        }, 100);
      })
      .on('focus', function() {
        if (scope.mouseActive === false) {
          element.addClass('md-focused');
        }
      })
      .on('blur', function(ev) {
        element.removeClass('md-focused');
      });

But this is an old approach and is not working probably anymore.
For example, if you click on a button and then you switch browser tabs, then the browser restores the focus (- but no mousedown event is triggered), so the button will become the md-focused class. (not valid)

I also created an issue on Material 1 a few days ago. Please take a look at it and the accompanying PR.

• a11y: dialog is always restoring focus. material#7963
• feat(interaction): added service to detect last interaction material#7965

This service tracks the last interaction type and allows us to provide perfect accessibility on some components.

[jelbourn]

Having a service would be good. Feel free to put together a PR!

[devversion]

@jelbourn Awesome, will start that tomorrow 👍

[devversion]

Just want to reference a few things here. The focus is currently accidentally showing up on Desktop Browsers, because the current workaround with the timeout is not working properly.

Once the Interaction Service will be approved / land, we will fix the following components:

• Checkbox Focus Indicator
• Slide-Toggle Focus Indicator
• Radio Focus Indicator

cc. @jelbourn

[csabattilas]

Hi, It looks that the radio focus indicator is still broken or not there. Where can i take a look on this how to fix it or add this feature? thanks

[devversion]

This should be fixed with the new focus-classes directive.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}