@khanacademy/math-input 6.0.0 → 6.0.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @khanacademy/math-input
 
+## 6.0.1
+
+### Patch Changes
+
+-   8d1745c1: Removed double focus outline from keypad buttons
+
 ## 6.0.0
 
 ### Major Changes

package/dist/es/index.js

@@ -4908,6 +4908,11 @@ const styles$8 = StyleSheet.create({
     width: 36,
     height: 3,
     marginLeft: 3
+  },
+  clickable: {
+    ":focus": {
+      outline: `none`
+    }
   }
 });
 function imageTintColor(itemState, hovered, focused, pressed) {
@@ -4933,6 +4938,7 @@ class TabbarItem extends React.Component {
       onClick: onClick,
       disabled: itemState === "disabled",
       "aria-label": itemType,
+      style: styles$8.clickable,
       "aria-selected": itemState === "active",
       role: "tab"
     }, ({
@@ -8263,7 +8269,7 @@ const KeypadButton = ({
     pressed
   }) => {
     return /*#__PURE__*/React.createElement(View$1, {
-      style: [styles$1.outerBoxBase, hovered && styles$1.outerBoxHover, pressed && styles$1.outerBoxPressed]
+      style: [styles$1.outerBoxBase]
     }, /*#__PURE__*/React.createElement(View$1, {
       style: [styles$1.base, tintColor != null ? {
         background: tintColor
@@ -8289,7 +8295,7 @@ const styles$1 = StyleSheet.create({
     padding: 1
   },
   hovered: {
-    border: `1px solid ${Color.blue}`,
+    border: `2px solid ${Color.blue}`,
     padding: 1,
     boxShadow: "none"
   },
@@ -8312,16 +8318,13 @@ const styles$1 = StyleSheet.create({
     borderRadius: 7,
     border: "2px solid transparent"
   },
-  outerBoxHover: {
-    border: `2px solid ${Color.blue}`
-  },
-  outerBoxPressed: {
-    border: "2px solid #1B50B3"
-  },
   clickable: {
     width: "100%",
     height: "100%",
-    boxSizing: "border-box"
+    boxSizing: "border-box",
+    ":focus": {
+      outline: `none`
+    }
   }
 });