@spark-web/a11y - npm Package Compare versions

Comparing version 1.3.2 to 1.4.0

CHANGELOG.md

 # @spark-web/a11y
 
+## 1.4.0
+
+### Minor Changes
+
+- [#382](https://github.com/brighte-labs/spark-web/pull/382)
+  [`955bf5d`](https://github.com/brighte-labs/spark-web/commit/955bf5d7698bfdf45e7f317aa3e726c81d3444c0)
+  Thanks [@dilipt-brighte](https://github.com/dilipt-brighte)! - Updates React
+  version to latest (18.2.0)
+
+### Patch Changes
+
+- Updated dependencies
+  [[`955bf5d`](https://github.com/brighte-labs/spark-web/commit/955bf5d7698bfdf45e7f317aa3e726c81d3444c0)]:
+  - @spark-web/theme@3.2.0
+  - @spark-web/utils@1.3.0
+
 ## 1.3.2
@@ -4,0 +20,0 @@

dist/declarations/src/visually-hidden.d.ts

@@ -15,3 +15,3 @@ import type { DataAttributeMap } from '@spark-web/utils/internal';
     as?: Comp | undefined;
-    ref?: import("react").Ref<Comp extends "symbol" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | "set" | keyof HTMLElementTagNameMap ? (HTMLElementTagNameMap & Pick<SVGElementTagNameMap, "symbol" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | "set">)[Comp] : Comp extends new (...args: any) => any ? InstanceType<Comp> : undefined> | undefined;
+    ref?: import("react").Ref<Comp extends "symbol" | "clipPath" | "filter" | "mask" | "marker" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | keyof HTMLElementTagNameMap | "set" ? (HTMLElementTagNameMap & Pick<SVGElementTagNameMap, "symbol" | "clipPath" | "filter" | "mask" | "marker" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | "set">)[Comp] : Comp extends new (...args: any) => any ? InstanceType<Comp> : undefined> | undefined;
 } & Omit<import("react").PropsWithoutRef<import("react").ComponentProps<Comp>>, "as"> & VisuallyHiddenProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
@@ -18,0 +18,0 @@ export declare const visuallyHiddenStyles: {

dist/spark-web-a11y.cjs.dev.js

@@ -18,4 +18,4 @@ 'use strict';
   var data = _ref.data,
-      label = _ref.label,
-      symbol = _ref.symbol;
+    label = _ref.label,
+    symbol = _ref.symbol;
   return /*#__PURE__*/jsxRuntime.jsx("span", _objectSpread(_objectSpread({
@@ -31,19 +31,17 @@ "aria-hidden": label ? undefined : true,
 var focusVisibleDataAttribute = 'data-brighte-focus-visible';
-
 var showFocusRings = function showFocusRings() {
   return document.body.setAttribute(focusVisibleDataAttribute, 'true');
 };
-
 var hideFocusRings = function hideFocusRings() {
   return document.body.removeAttribute(focusVisibleDataAttribute);
-}; // Toggle state on user interaction
+};
+
+// Toggle state on user interaction
 // Safari is basically the only browser where `:focus-visible` is still not supported
 // https://caniuse.com/css-focus-visible
 
-
 var useFocusVisible = function useFocusVisible() {
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-      _ref$enabled = _ref.enabled,
-      enabled = _ref$enabled === void 0 ? true : _ref$enabled;
-
+    _ref$enabled = _ref.enabled,
+    enabled = _ref$enabled === void 0 ? true : _ref$enabled;
   react.useEffect(function () {
@@ -62,7 +60,6 @@ if (enabled) {
   var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-      _ref2$always = _ref2.always,
-      always = _ref2$always === void 0 ? false : _ref2$always,
-      _ref2$tone = _ref2.tone,
-      tone = _ref2$tone === void 0 ? 'primary' : _ref2$tone;
-
+    _ref2$always = _ref2.always,
+    always = _ref2$always === void 0 ? false : _ref2$always,
+    _ref2$tone = _ref2.tone,
+    tone = _ref2$tone === void 0 ? 'primary' : _ref2$tone;
   var theme$1 = theme.useTheme();
@@ -92,4 +89,4 @@ var baseRingColor = tone === 'neutral' ? theme$1.color.background.primary : theme$1.color.background[tone];
 var IdContext = /*#__PURE__*/react.createContext(defaultIdContext);
+
 /** Provide stable IDs in server rendered environments. */
-
 function IdProvider(_ref) {
@@ -109,11 +106,11 @@ var children = _ref.children;
   });
-} // Utils
+}
+
+// Utils
 // ------------------------------
 
 /** Generate a unique ID. */
-
 function useId(deterministicId) {
   var context = react.useContext(IdContext);
   var isBrowser = Boolean(globalThis === null || globalThis === void 0 ? void 0 : globalThis.document);
-
   if (!isBrowser && context === defaultIdContext) {
@@ -123,3 +120,2 @@ // eslint-disable-next-line no-console
   }
-
   return react.useMemo(function () {
@@ -129,4 +125,4 @@ return deterministicId || "brighte-id-".concat(context.prefix, "-").concat(++context.current);
 }
+
 /** Format IDs for compound components. */
-
 function composeId() {
@@ -136,3 +132,2 @@ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
   }
-
   return args.filter(function (val) {
@@ -146,9 +141,6 @@ return val != null;
   }
-
   var validIds = ids.filter(Boolean);
-
   if (validIds.length === 0) {
     return undefined;
   }
-
   return validIds.join(' ');
@@ -158,3 +150,2 @@ }
 var _excluded = ["as", "data"];
-
 /**
@@ -166,6 +157,5 @@ * Only display content to screen readers
   var _ref$as = _ref.as,
-      Tag = _ref$as === void 0 ? 'span' : _ref$as,
-      data = _ref.data,
-      consumerProps = _objectWithoutProperties(_ref, _excluded);
-
+    Tag = _ref$as === void 0 ? 'span' : _ref$as,
+    data = _ref.data,
+    consumerProps = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/jsxRuntime.jsx(Tag, _objectSpread(_objectSpread(_objectSpread({}, consumerProps), data ? internal.buildDataAttributes(data) : undefined), {}, {
@@ -172,0 +162,0 @@ ref: forwardedRef,

dist/spark-web-a11y.cjs.prod.js

@@ -18,4 +18,4 @@ 'use strict';
   var data = _ref.data,
-      label = _ref.label,
-      symbol = _ref.symbol;
+    label = _ref.label,
+    symbol = _ref.symbol;
   return /*#__PURE__*/jsxRuntime.jsx("span", _objectSpread(_objectSpread({
@@ -31,19 +31,17 @@ "aria-hidden": label ? undefined : true,
 var focusVisibleDataAttribute = 'data-brighte-focus-visible';
-
 var showFocusRings = function showFocusRings() {
   return document.body.setAttribute(focusVisibleDataAttribute, 'true');
 };
-
 var hideFocusRings = function hideFocusRings() {
   return document.body.removeAttribute(focusVisibleDataAttribute);
-}; // Toggle state on user interaction
+};
+
+// Toggle state on user interaction
 // Safari is basically the only browser where `:focus-visible` is still not supported
 // https://caniuse.com/css-focus-visible
 
-
 var useFocusVisible = function useFocusVisible() {
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-      _ref$enabled = _ref.enabled,
-      enabled = _ref$enabled === void 0 ? true : _ref$enabled;
-
+    _ref$enabled = _ref.enabled,
+    enabled = _ref$enabled === void 0 ? true : _ref$enabled;
   react.useEffect(function () {
@@ -62,7 +60,6 @@ if (enabled) {
   var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-      _ref2$always = _ref2.always,
-      always = _ref2$always === void 0 ? false : _ref2$always,
-      _ref2$tone = _ref2.tone,
-      tone = _ref2$tone === void 0 ? 'primary' : _ref2$tone;
-
+    _ref2$always = _ref2.always,
+    always = _ref2$always === void 0 ? false : _ref2$always,
+    _ref2$tone = _ref2.tone,
+    tone = _ref2$tone === void 0 ? 'primary' : _ref2$tone;
   var theme$1 = theme.useTheme();
@@ -92,4 +89,4 @@ var baseRingColor = tone === 'neutral' ? theme$1.color.background.primary : theme$1.color.background[tone];
 var IdContext = /*#__PURE__*/react.createContext(defaultIdContext);
+
 /** Provide stable IDs in server rendered environments. */
-
 function IdProvider(_ref) {
@@ -109,11 +106,11 @@ var children = _ref.children;
   });
-} // Utils
+}
+
+// Utils
 // ------------------------------
 
 /** Generate a unique ID. */
-
 function useId(deterministicId) {
   var context = react.useContext(IdContext);
   var isBrowser = Boolean(globalThis === null || globalThis === void 0 ? void 0 : globalThis.document);
-
   if (!isBrowser && context === defaultIdContext) {
@@ -123,3 +120,2 @@ // eslint-disable-next-line no-console
   }
-
   return react.useMemo(function () {
@@ -129,4 +125,4 @@ return deterministicId || "brighte-id-".concat(context.prefix, "-").concat(++context.current);
 }
+
 /** Format IDs for compound components. */
-
 function composeId() {
@@ -136,3 +132,2 @@ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
   }
-
   return args.filter(function (val) {
@@ -146,9 +141,6 @@ return val != null;
   }
-
   var validIds = ids.filter(Boolean);
-
   if (validIds.length === 0) {
     return undefined;
   }
-
   return validIds.join(' ');
@@ -158,3 +150,2 @@ }
 var _excluded = ["as", "data"];
-
 /**
@@ -166,6 +157,5 @@ * Only display content to screen readers
   var _ref$as = _ref.as,
-      Tag = _ref$as === void 0 ? 'span' : _ref$as,
-      data = _ref.data,
-      consumerProps = _objectWithoutProperties(_ref, _excluded);
-
+    Tag = _ref$as === void 0 ? 'span' : _ref$as,
+    data = _ref.data,
+    consumerProps = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/jsxRuntime.jsx(Tag, _objectSpread(_objectSpread(_objectSpread({}, consumerProps), data ? internal.buildDataAttributes(data) : undefined), {}, {
@@ -172,0 +162,0 @@ ref: forwardedRef,

dist/spark-web-a11y.esm.js

@@ -14,4 +14,4 @@ import _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';
   var data = _ref.data,
-      label = _ref.label,
-      symbol = _ref.symbol;
+    label = _ref.label,
+    symbol = _ref.symbol;
   return /*#__PURE__*/jsx("span", _objectSpread(_objectSpread({
@@ -27,19 +27,17 @@ "aria-hidden": label ? undefined : true,
 var focusVisibleDataAttribute = 'data-brighte-focus-visible';
-
 var showFocusRings = function showFocusRings() {
   return document.body.setAttribute(focusVisibleDataAttribute, 'true');
 };
-
 var hideFocusRings = function hideFocusRings() {
   return document.body.removeAttribute(focusVisibleDataAttribute);
-}; // Toggle state on user interaction
+};
+
+// Toggle state on user interaction
 // Safari is basically the only browser where `:focus-visible` is still not supported
 // https://caniuse.com/css-focus-visible
 
-
 var useFocusVisible = function useFocusVisible() {
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-      _ref$enabled = _ref.enabled,
-      enabled = _ref$enabled === void 0 ? true : _ref$enabled;
-
+    _ref$enabled = _ref.enabled,
+    enabled = _ref$enabled === void 0 ? true : _ref$enabled;
   useEffect(function () {
@@ -58,7 +56,6 @@ if (enabled) {
   var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-      _ref2$always = _ref2.always,
-      always = _ref2$always === void 0 ? false : _ref2$always,
-      _ref2$tone = _ref2.tone,
-      tone = _ref2$tone === void 0 ? 'primary' : _ref2$tone;
-
+    _ref2$always = _ref2.always,
+    always = _ref2$always === void 0 ? false : _ref2$always,
+    _ref2$tone = _ref2.tone,
+    tone = _ref2$tone === void 0 ? 'primary' : _ref2$tone;
   var theme = useTheme();
@@ -88,4 +85,4 @@ var baseRingColor = tone === 'neutral' ? theme.color.background.primary : theme.color.background[tone];
 var IdContext = /*#__PURE__*/createContext(defaultIdContext);
+
 /** Provide stable IDs in server rendered environments. */
-
 function IdProvider(_ref) {
@@ -105,11 +102,11 @@ var children = _ref.children;
   });
-} // Utils
+}
+
+// Utils
 // ------------------------------
 
 /** Generate a unique ID. */
-
 function useId(deterministicId) {
   var context = useContext(IdContext);
   var isBrowser = Boolean(globalThis === null || globalThis === void 0 ? void 0 : globalThis.document);
-
   if (!isBrowser && context === defaultIdContext) {
@@ -119,3 +116,2 @@ // eslint-disable-next-line no-console
   }
-
   return useMemo(function () {
@@ -125,4 +121,4 @@ return deterministicId || "brighte-id-".concat(context.prefix, "-").concat(++context.current);
 }
+
 /** Format IDs for compound components. */
-
 function composeId() {
@@ -132,3 +128,2 @@ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
   }
-
   return args.filter(function (val) {
@@ -142,9 +137,6 @@ return val != null;
   }
-
   var validIds = ids.filter(Boolean);
-
   if (validIds.length === 0) {
     return undefined;
   }
-
   return validIds.join(' ');
@@ -154,3 +146,2 @@ }
 var _excluded = ["as", "data"];
-
 /**
@@ -162,6 +153,5 @@ * Only display content to screen readers
   var _ref$as = _ref.as,
-      Tag = _ref$as === void 0 ? 'span' : _ref$as,
-      data = _ref.data,
-      consumerProps = _objectWithoutProperties(_ref, _excluded);
-
+    Tag = _ref$as === void 0 ? 'span' : _ref$as,
+    data = _ref.data,
+    consumerProps = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/jsx(Tag, _objectSpread(_objectSpread(_objectSpread({}, consumerProps), data ? buildDataAttributes(data) : undefined), {}, {
@@ -168,0 +158,0 @@ ref: forwardedRef,

package.json

 {
   "name": "@spark-web/a11y",
-  "version": "1.3.2",
+  "version": "1.4.0",
   "homepage": "https://github.com/brighte-labs/spark-web#readme",
@@ -21,9 +21,9 @@ "repository": {
     "@emotion/css": "^11.9.0",
-    "@spark-web/theme": "^3.1.0",
-    "@spark-web/utils": "^1.2.3",
+    "@spark-web/theme": "^3.2.0",
+    "@spark-web/utils": "^1.3.0",
     "polished": "^4.2.2"
   },
   "devDependencies": {
-    "@types/react": "^17.0.12",
-    "react": "^17.0.2"
+    "@types/react": "^18.2.0",
+    "react": "^18.2.0"
   },
@@ -34,4 +34,4 @@ "peerDependencies": {
   "engines": {
-    "node": ">=14"
+    "node": ">=18.17"
   }
 }

No alert changes

Improved metrics

Total package byte prevSize

35069

increased by1.18%

Lines of code

578

increased by1.05%

Dependency changes

• Updated@spark-web/theme@^3.2.0

• Updated@spark-web/utils@^1.3.0