replaced focus state with focus-visible

nickshi · Jun 6, 2023 · 472546c · 472546c
1 parent 936a3a7
commit 472546c
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 24 deletions.
diff --git a/src/components/Checkbox.js b/src/components/Checkbox.js
@@ -50,24 +50,11 @@ const defaultProps = {
 class Checkbox extends React.Component {
     constructor(props) {
         super(props);
-        this.state = {
-            isFocused: false,
-        };
 
-        this.onFocus = this.onFocus.bind(this);
-        this.onBlur = this.onBlur.bind(this);
         this.handleSpaceKey = this.handleSpaceKey.bind(this);
         this.firePressHandlerOnClick = this.firePressHandlerOnClick.bind(this);
     }
 
-    onFocus() {
-        this.setState({isFocused: true});
-    }
-
-    onBlur() {
-        this.setState({isFocused: false});
-    }
-
     handleSpaceKey(event) {
         if (event.code !== 'Space') {
             return;
@@ -83,13 +70,6 @@ class Checkbox extends React.Component {
             return;
         }
 
-        const wasChecked = this.props.isChecked;
-
-        // If checkbox is checked and focused, make sure it's unfocused when pressed.
-        if (this.state.isFocused && wasChecked) {
-            this.onBlur();
-        }
-
         this.props.onPress();
     }
 
@@ -99,10 +79,7 @@ class Checkbox extends React.Component {
                 disabled={this.props.disabled}
                 onPress={this.firePressHandlerOnClick}
                 onMouseDown={this.props.onMouseDown}
-                onFocus={this.onFocus}
-                onBlur={this.onBlur}
                 ref={this.props.forwardedRef}
-                onPressOut={this.onBlur}
                 style={this.props.style}
                 onKeyDown={this.handleSpaceKey}
                 accessibilityRole="checkbox"
@@ -120,8 +97,9 @@ class Checkbox extends React.Component {
                             this.props.isChecked && styles.checkedContainer,
                             this.props.hasError && styles.borderColorDanger,
                             this.props.disabled && styles.cursorDisabled,
-                            (this.state.isFocused || this.props.isChecked) && styles.borderColorFocus,
                         ]}
+                        // Used as CSS selector to customize focus-visible style
+                        dataSet={{checkbox: true}}
                     >
                         {this.props.isChecked && (
                             <Icon

diff --git a/web/index.html b/web/index.html
@@ -64,6 +64,9 @@
         select:focus-visible, select:focus[data-focusvisible-polyfill]  {
             box-shadow: none;
         }
+        div[role="checkbox"]:focus-visible > div[data-checkbox], div[role="checkbox"]:focus[data-focusvisible-polyfill] > div[data-checkbox] {
+            border-color: #03D47C !important;
+        }
         ::-ms-reveal {
             display: none;
         }