Components: Global Disable Ripple Does Not Affect Keyboard Focus

[RandomNonameDude]

Bug, feature request, or proposal:

Bug.

What is the expected behavior?

When you set disabled: true using RippleGlobalOptions, the ripple should disappear completely, no matter if the focus arrives through tab key on keyboard or through mouse click.

What is the current behavior?

After setting disabled: true using RippleGlobalOptions, the ripple effect still appears when the focus arrives through tab key.

What are the steps to reproduce?

Here is a simple plunker containing two checkboxes: https://plnkr.co/edit/7aqtkq?p=preview

You can see that ripple effect is disabled globally. When you click any checkbox with mouse, the ripple effect does not appear, as expected. However, when you select any checkbox using tab key, the ripple effect still appears.

What is the use-case or motivation for changing an existing behavior?

I guess that when you disable ripple effect, you want to disable it completely.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 4, latest version of Material, Windows, browsers Google Chrome, Internet Explorer.

Is there anything else we should know?

One can get rid of the ripple effect completely using css .mat-checkbox-ripple { display: none; }

[josephperrott]

I will leave it to @DevVersion and @tinayuangao to confirm but I believe this is working as intended because the ripple you are seeing is to show the focus state. Without this background circle showing the focus is not shown which results in a lack of a11y for the checkbox.

[RandomNonameDude]

The issue is closed but the problem itself still seems to be unsolved. When the ripple effect is disabled through the global options, the ripple is still displayed when a checkbox or a radio button receives the focus using tab key (just tested on Stackblitz with the latest version of the library). Do you even plan to solve this?

[devversion]

It's intentionally not removing the focus ripples, because those are part of the accessibility we want to provide for all Angular Material components.

We can remove the animation if ripples are globally disabled though. This would improve the performance and won't really look like a ripple anymore.

cc. @jelbourn

[jelbourn]

@DevVersion yeah, it should probably disable the animation

[ssgriffen]

Is there a way to temporarily solve this? I have global ripple disabled and have been trying to solve the :focus ripple via css for quite some time now...

[devversion]

@ssgriffen You should be able to do:

.mat-ripple-element {
  transition-duration: 0ms !important;
}

[ssgriffen]

@DevVersion That didn't work for me. Any other ideas? I've tried alll the way up to this

:host >>> .mat-ripple-element, .cdk-focused, .cdk-keyboard-focused , .cdk-focused:focus, .cdk-keyboard-focused:focus, .mat-radio-input {
    transition-duration: 0ms !important;
    outline-style: none!important;
    outline-color: none!important;
}

Thats sitting on my main styles.css sheet...

[devversion]

@ssgriffen In my case it worked when I've set the transition-duration to 0ms. It's a very ugly workaround, because under the hood, the MatRipple directive expects different duration's, and therefore it might lead to unexpected behavior.

I have a new feature in mind, which should allow developers to easily control the animation. See #9253

[ssgriffen]

Hi @DevVersion we tried that...

We also went into node_modules and basically nuked the ripple system. It didn't work. I assume it's due to the fact we didn't change the .min.js

Assuming we don't want ripples at all, what would be the easiest way to just stop all ripples?

[devversion]

This shows that it works:

• https://stackblitz.com/edit/angular-material-disable-ripple-animation

You might just do the same and just use display: none, but it's not recommended at all, because the focus indicators are necessary for a good accessibility (but that's your choice)

[ssgriffen]

@DevVersion click right above the button and tab down (like I'm doing for a form), you'll see the ripple.

[devversion]

@ssgriffen I thought the intention was to remove the the animation of the ripple? If you want to remove the ripple completely you can change the transition-duration to display and set it to none. Isn't that what you want?

[ssgriffen]

You are a hero @DevVersion don't let it go to your head though, keep grinding. over and out.

[devversion]

Closing, as this is working as intended, and there are possibilities (that are mentioned in the ripple.md file) that allow customizing the animation. See https://github.com/angular/material2/pull/9253

[angular-automatic-lock-bot[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._}