disableRipple not working in checkbox with custom theme

[bampakoa]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

The ripple effect should not be visible when disableRipple attribute is set to true on a checkbox.

What is the current behavior?

The ripple effect is still shown when disableRipple attribute is set to true on a checkbox.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-clzfgv

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

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

Angular CLI: 7.0.3
Node: 8.12.0
OS: win32 x64
Angular: 7.0.1
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package Version

@angular-devkit/architect 0.10.3
@angular-devkit/build-angular 0.10.3
@angular-devkit/build-optimizer 0.10.3
@angular-devkit/build-webpack 0.10.3
@angular-devkit/core 7.0.3
@angular-devkit/schematics 7.0.3
@angular/cdk 7.0.2
@angular/cli 7.0.3
@angular/material 7.0.2
@ngtools/webpack 7.0.3
@schematics/angular 7.0.3
@schematics/update 0.10.3
rxjs 6.3.3
typescript 3.1.3
webpack 4.19.1

Is there anything else we should know?

If we do not use a custom theme, disableRipple is working as expected.

[crisbeto]

The disableRipple is working in your example. What you're seeing is the focus and hover indication.

[bampakoa]

Thanks @crisbeto for clearing that. Are these also supposed to be hidden when disableRipple is true?

[crisbeto]

I don't think so, because they're also there for accessibility.

[bampakoa]

The strange thing is that they are not visible when disableRipple is true and there is no custom theme. Why is that?

[bitflower]

Any news on this? Is somebody investigating? We have a custom theme as well and have the sticky circle after clicking the component.

[devversion]

This is actually the same for non-custom themes too: https://stackblitz.com/edit/comp-13904?file=.angular-cli.json.

It's working as expected as those are accessibility focus indicators which aren't affected by disableRipple. If you want to remove them, you could use CSS overrides, though we don't recommend disabling focus indication.

[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.}