[Chip] Replace :focus with :focus-visible

[alexmotoc]

Fix #22386

Clicking a chip no longer makes it appear selected. The :focus-visible styling only appears when using keyboard navigation.

[alexmotoc]

@oliviertassinari At the moment the current test coverage misses line 308. The following test is designed to meet the condition of the if block but the final assertion fails as the focusVisible class is still present. Is there anything I am missing?

diff --git a/packages/material-ui/src/Chip/Chip.test.js b/packages/material-ui/src/Chip/Chip.test.js
index 6d42dc4c8..716362673 100644
--- a/packages/material-ui/src/Chip/Chip.test.js
+++ b/packages/material-ui/src/Chip/Chip.test.js
@@ -554,5 +554,19 @@ describe('<Chip />', () => {
 
       expect(chip).to.have.class(classes.focusVisible);
     });
+
+    it('should reset the focused state', () => {
+      const { container, setProps } = render(<Chip label="Test Chip" onClick={() => {}} />);
+      const chip = container.querySelector(`.${classes.root}`);
+      simulatePointerDevice();
+
+      focusVisible(chip);
+      
+      expect(chip).to.have.class(classes.focusVisible);
+
+      setProps({ disabled: true });
+
+      expect(chip).not.to.have.class(classes.focusVisible);
+    });

[mui-pr-bot]

Details of bundle changes

Generated by 🚫 dangerJS against d2cd1a3

[oliviertassinari]

@alexmotoc Turns out, it was because we didn't forward the disabled prop down to the ButtonBase component. I have pushed the approach one step further. It seems that we can use focusVisibleClassName with no downsides.

[eps1lon]

I'm missing some context how we went from clicking behavior that's not expected to applying :focus-visible. :focus-visible is not about :focus that is visible but keyboard focus.

It's not clear why a generic div should be focus-visible and it seems to me there are a couple of concepts mixed up here. I'd like to go back to the issue and identify what the problem actually is in the context of #20470

[eps1lon]

Looks good. Updating it with the latest commit on next for good measure and then some minor nitpick about naming.

[oliviertassinari]

Related note: we should probably look into applying https://material.io/design/interaction/states.html. This is would be for another pull request.

[alexmotoc]

Are you suggesting we apply different styling to focus compared with hover?

[oliviertassinari]

Yes, it's something we have started to do, see #10870 for progress.

updated

[oliviertassinari]

@alexmotoc Thank you :)