@spark-web/button 5.3.1 → 5.3.3

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @spark-web/button
 
+## 5.3.3
+
+### Patch Changes
+
+- [#625](https://github.com/brighte-labs/spark-web/pull/625)
+  [`b844b9c`](https://github.com/brighte-labs/spark-web/commit/b844b9c2891b92fe739015add83569efd272d223)
+  Thanks [@michtntbrighte](https://github.com/michtntbrighte)! - Upgrade button
+  spinner
+
+## 5.3.2
+
+### Patch Changes
+
+- [#594](https://github.com/brighte-labs/spark-web/pull/594)
+  [`ecf32cb`](https://github.com/brighte-labs/spark-web/commit/ecf32cba87b2fd55426ccff1b6dae31f26147757)
+  Thanks [@peterp-brighte](https://github.com/peterp-brighte)! - accessibility
+  improvements to button focus ring and alert component
+
 ## 5.3.1
 
 ### Patch Changes

package/dist/spark-web-button.cjs.dev.js

@@ -10,9 +10,9 @@ var react = require('react');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var react$1 = require('@emotion/react');
-var a11y = require('@spark-web/a11y');
 var spinner = require('@spark-web/spinner');
 var text = require('@spark-web/text');
+var a11y = require('@spark-web/a11y');
 var theme = require('@spark-web/theme');
 var link = require('@spark-web/link');
 var ts = require('@spark-web/utils/ts');
@@ -326,7 +326,8 @@ function useButtonStyles(_ref) {
     tone = _ref.tone;
   var theme$1 = theme.useTheme();
   var focusRingStyles = a11y.useFocusRing({
-    tone: tone
+    tone: tone,
+    always: true
   });
   var disabledFocusRingStyles = a11y.useFocusRing({
     tone: 'disabled'
@@ -459,7 +460,7 @@ var Button = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
 Button.displayName = 'Button';
 function Loading(_ref2) {
   var tone = _ref2.tone;
-  return jsxRuntime.jsxs(box.Box, {
+  return jsxRuntime.jsx(box.Box, {
     as: "span",
     position: "absolute",
     top: 0,
@@ -469,12 +470,10 @@ function Loading(_ref2) {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    children: [jsxRuntime.jsx(a11y.VisuallyHidden, {
-      children: "button loading indicator"
-    }), jsxRuntime.jsx(spinner.Spinner, {
+    children: jsxRuntime.jsx(spinner.Spinner, {
       size: "xsmall",
       tone: tone
-    })]
+    })
   });
 }
 

package/dist/spark-web-button.cjs.prod.js

@@ -10,9 +10,9 @@ var react = require('react');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var react$1 = require('@emotion/react');
-var a11y = require('@spark-web/a11y');
 var spinner = require('@spark-web/spinner');
 var text = require('@spark-web/text');
+var a11y = require('@spark-web/a11y');
 var theme = require('@spark-web/theme');
 var link = require('@spark-web/link');
 var ts = require('@spark-web/utils/ts');
@@ -326,7 +326,8 @@ function useButtonStyles(_ref) {
     tone = _ref.tone;
   var theme$1 = theme.useTheme();
   var focusRingStyles = a11y.useFocusRing({
-    tone: tone
+    tone: tone,
+    always: true
   });
   var disabledFocusRingStyles = a11y.useFocusRing({
     tone: 'disabled'
@@ -459,7 +460,7 @@ var Button = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
 Button.displayName = 'Button';
 function Loading(_ref2) {
   var tone = _ref2.tone;
-  return jsxRuntime.jsxs(box.Box, {
+  return jsxRuntime.jsx(box.Box, {
     as: "span",
     position: "absolute",
     top: 0,
@@ -469,12 +470,10 @@ function Loading(_ref2) {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    children: [jsxRuntime.jsx(a11y.VisuallyHidden, {
-      children: "button loading indicator"
-    }), jsxRuntime.jsx(spinner.Spinner, {
+    children: jsxRuntime.jsx(spinner.Spinner, {
       size: "xsmall",
       tone: tone
-    })]
+    })
   });
 }
 

package/dist/spark-web-button.esm.js

@@ -6,9 +6,9 @@ import { forwardRef, useRef, useCallback, Children, isValidElement, cloneElement
 import { jsx, jsxs } from '@emotion/react/jsx-runtime';
 import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
 import { css } from '@emotion/react';
-import { useFocusRing, VisuallyHidden } from '@spark-web/a11y';
 import { Spinner } from '@spark-web/spinner';
 import { Text } from '@spark-web/text';
+import { useFocusRing } from '@spark-web/a11y';
 import { useTheme } from '@spark-web/theme';
 import { useLinkComponent } from '@spark-web/link';
 import { forwardRefWithAs } from '@spark-web/utils/ts';
@@ -322,7 +322,8 @@ function useButtonStyles(_ref) {
     tone = _ref.tone;
   var theme = useTheme();
   var focusRingStyles = useFocusRing({
-    tone: tone
+    tone: tone,
+    always: true
   });
   var disabledFocusRingStyles = useFocusRing({
     tone: 'disabled'
@@ -455,7 +456,7 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
 Button.displayName = 'Button';
 function Loading(_ref2) {
   var tone = _ref2.tone;
-  return jsxs(Box, {
+  return jsx(Box, {
     as: "span",
     position: "absolute",
     top: 0,
@@ -465,12 +466,10 @@ function Loading(_ref2) {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    children: [jsx(VisuallyHidden, {
-      children: "button loading indicator"
-    }), jsx(Spinner, {
+    children: jsx(Spinner, {
       size: "xsmall",
       tone: tone
-    })]
+    })
   });
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-web/button",
-  "version": "5.3.1",
+  "version": "5.3.3",
   "homepage": "https://github.com/brighte-labs/spark-web#readme",
   "repository": {
     "type": "git",
@@ -21,7 +21,7 @@
     "@spark-web/box": "^5.0.0",
     "@spark-web/icon": "^5.0.0",
     "@spark-web/link": "^5.0.0",
-    "@spark-web/spinner": "^5.0.0",
+    "@spark-web/spinner": "^5.0.1",
     "@spark-web/text": "^5.1.0",
     "@spark-web/theme": "^5.9.0",
     "@spark-web/utils": "^5.0.0"