@spark-web/a11y - npm Package Compare versions

Comparing version 1.0.5 to 1.1.0

dist/declarations/src/Emoji.d.ts

 /// <reference types="react" />
+import type { DataAttributeMap } from '@spark-web/utils/internal';
 export declare type EmojiProps = {
+    /** Map of data attributes. */
+    data?: DataAttributeMap;
     /** Label used to describe the symbol that will be announced to screen readers. */
@@ -8,2 +11,2 @@ label?: string;
 };
-export declare const Emoji: ({ label, symbol }: EmojiProps) => JSX.Element;
+export declare const Emoji: ({ data, label, symbol }: EmojiProps) => JSX.Element;

dist/declarations/src/VisuallyHidden.d.ts

@@ -0,4 +1,8 @@
+import type { DataAttributeMap } from '@spark-web/utils/internal';
 import type { ReactNode } from 'react';
 export declare type VisuallyHiddenProps = {
+    /** Children element to be rendered inside the component. */
     children?: ReactNode;
+    /** Map of data attributes. */
+    data?: DataAttributeMap;
 };
@@ -11,3 +15,3 @@ /**
     as?: Comp | undefined;
-    ref?: import("react").Ref<Comp extends "symbol" | "text" | "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" | "textPath" | "tspan" | "use" | "view" | keyof HTMLElementTagNameMap | "set" ? (HTMLElementTagNameMap & Pick<SVGElementTagNameMap, "symbol" | "text" | "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" | "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>>;
@@ -14,0 +18,0 @@ export declare const visuallyHiddenStyles: {

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

@@ -5,5 +5,6 @@ 'use strict';
 
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var internal = require('@spark-web/utils/internal');
 var jsxRuntime = require('react/jsx-runtime');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var theme = require('@spark-web/theme');
@@ -17,10 +18,12 @@ var polished = require('polished');
 var Emoji = function Emoji(_ref) {
-  var label = _ref.label,
+  var data = _ref.data,
+      label = _ref.label,
       symbol = _ref.symbol;
-  return /*#__PURE__*/jsxRuntime.jsx("span", {
+  return /*#__PURE__*/jsxRuntime.jsx("span", _objectSpread(_objectSpread({
     "aria-hidden": label ? undefined : true,
     "aria-label": label,
-    role: "img",
+    role: "img"
+  }, data ? internal.buildDataAttributes(data) : undefined), {}, {
     children: symbol
-  });
+  }));
 };
@@ -147,3 +150,3 @@
 
-var _excluded = ["as"];
+var _excluded = ["as", "data"];
 
@@ -154,11 +157,12 @@ /**
  */
-var VisuallyHidden = ts.forwardRefWithAs(function (_ref, ref) {
+var VisuallyHidden = ts.forwardRefWithAs(function (_ref, forwardedRef) {
   var _ref$as = _ref.as,
       Tag = _ref$as === void 0 ? 'span' : _ref$as,
-      props = _objectWithoutProperties(_ref, _excluded);
+      data = _ref.data,
+      consumerProps = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/jsxRuntime.jsx(Tag, _objectSpread({
-    ref: ref,
+  return /*#__PURE__*/jsxRuntime.jsx(Tag, _objectSpread(_objectSpread(_objectSpread({}, consumerProps), data ? internal.buildDataAttributes(data) : undefined), {}, {
+    ref: forwardedRef,
     className: css.css(visuallyHiddenStyles)
-  }, props));
+  }));
 });
@@ -165,0 +169,0 @@ var visuallyHiddenStyles = {

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

@@ -5,5 +5,6 @@ 'use strict';
 
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var internal = require('@spark-web/utils/internal');
 var jsxRuntime = require('react/jsx-runtime');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var theme = require('@spark-web/theme');
@@ -17,10 +18,12 @@ var polished = require('polished');
 var Emoji = function Emoji(_ref) {
-  var label = _ref.label,
+  var data = _ref.data,
+      label = _ref.label,
       symbol = _ref.symbol;
-  return /*#__PURE__*/jsxRuntime.jsx("span", {
+  return /*#__PURE__*/jsxRuntime.jsx("span", _objectSpread(_objectSpread({
     "aria-hidden": label ? undefined : true,
     "aria-label": label,
-    role: "img",
+    role: "img"
+  }, data ? internal.buildDataAttributes(data) : undefined), {}, {
     children: symbol
-  });
+  }));
 };
@@ -147,3 +150,3 @@
 
-var _excluded = ["as"];
+var _excluded = ["as", "data"];
 
@@ -154,11 +157,12 @@ /**
  */
-var VisuallyHidden = ts.forwardRefWithAs(function (_ref, ref) {
+var VisuallyHidden = ts.forwardRefWithAs(function (_ref, forwardedRef) {
   var _ref$as = _ref.as,
       Tag = _ref$as === void 0 ? 'span' : _ref$as,
-      props = _objectWithoutProperties(_ref, _excluded);
+      data = _ref.data,
+      consumerProps = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/jsxRuntime.jsx(Tag, _objectSpread({
-    ref: ref,
+  return /*#__PURE__*/jsxRuntime.jsx(Tag, _objectSpread(_objectSpread(_objectSpread({}, consumerProps), data ? internal.buildDataAttributes(data) : undefined), {}, {
+    ref: forwardedRef,
     className: css.css(visuallyHiddenStyles)
-  }, props));
+  }));
 });
@@ -165,0 +169,0 @@ var visuallyHiddenStyles = {

dist/spark-web-a11y.esm.js

@@ -0,4 +1,5 @@
+import _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';
+import { buildDataAttributes } from '@spark-web/utils/internal';
 import { jsx } from 'react/jsx-runtime';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';
 import { useTheme } from '@spark-web/theme';
@@ -12,10 +13,12 @@ import { rgba } from 'polished';
 var Emoji = function Emoji(_ref) {
-  var label = _ref.label,
+  var data = _ref.data,
+      label = _ref.label,
       symbol = _ref.symbol;
-  return /*#__PURE__*/jsx("span", {
+  return /*#__PURE__*/jsx("span", _objectSpread(_objectSpread({
     "aria-hidden": label ? undefined : true,
     "aria-label": label,
-    role: "img",
+    role: "img"
+  }, data ? buildDataAttributes(data) : undefined), {}, {
     children: symbol
-  });
+  }));
 };
@@ -142,3 +145,3 @@
 
-var _excluded = ["as"];
+var _excluded = ["as", "data"];
 
@@ -149,11 +152,12 @@ /**
  */
-var VisuallyHidden = forwardRefWithAs(function (_ref, ref) {
+var VisuallyHidden = forwardRefWithAs(function (_ref, forwardedRef) {
   var _ref$as = _ref.as,
       Tag = _ref$as === void 0 ? 'span' : _ref$as,
-      props = _objectWithoutProperties(_ref, _excluded);
+      data = _ref.data,
+      consumerProps = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/jsx(Tag, _objectSpread({
-    ref: ref,
+  return /*#__PURE__*/jsx(Tag, _objectSpread(_objectSpread(_objectSpread({}, consumerProps), data ? buildDataAttributes(data) : undefined), {}, {
+    ref: forwardedRef,
     className: css(visuallyHiddenStyles)
-  }, props));
+  }));
 });
@@ -160,0 +164,0 @@ var visuallyHiddenStyles = {

package.json

 {
   "name": "@spark-web/a11y",
-  "version": "1.0.5",
+  "version": "1.1.0",
   "license": "MIT",
@@ -11,6 +11,6 @@ "main": "dist/spark-web-a11y.cjs.js",
   "dependencies": {
-    "@babel/runtime": "^7.18.0",
+    "@babel/runtime": "^7.18.3",
     "@emotion/css": "^11.9.0",
-    "@spark-web/theme": "^3.0.1",
-    "@spark-web/utils": "^1.1.3",
+    "@spark-web/theme": "^3.0.2",
+    "@spark-web/utils": "^1.1.5",
     "polished": "^4.2.2"
@@ -17,0 +17,0 @@ },

README.md

@@ -26,11 +26,4 @@ ---
 
-### Props
+## VisuallyHidden
 
-| Prop   | Type   | Default | Description                                                                 |
-| ------ | ------ | ------- | --------------------------------------------------------------------------- |
-| label? | string |         | Label used to describe the symbol that will be announced to screen readers. |
-| symbol | string |         | Emoji symbol.                                                               |
-
-## Visually hidden
-
 Content which should be visually hidden, but remain accessible to assistive
@@ -56,6 +49,20 @@ technologies such as screen readers, can be implemented using the
 
-| Prop     | Type            | Default | Description                                           |
-| -------- | --------------- | ------- | ----------------------------------------------------- |
-| children | React.ReactNode |         | Children elements to be hidden within this component. |
+### Emoji Props
 
+| Prop   | Type                                   | Default | Description                                                                 |
+| ------ | -------------------------------------- | ------- | --------------------------------------------------------------------------- |
+| data?  | [DataAttributeMap][data-attribute-map] |         | Sets data attributes on the component.                                      |
+| label? | string                                 |         | Label used to describe the symbol that will be announced to screen readers. |
+| symbol | string                                 |         | Emoji symbol.                                                               |
+
+### VisuallyHidden Props
+
+| Prop     | Type                                   | Default | Description                                           |
+| -------- | -------------------------------------- | ------- | ----------------------------------------------------- |
+| data?    | [DataAttributeMap][data-attribute-map] |         | Sets data attributes on the component.                |
+| children | React.ReactNode                        |         | Children elements to be hidden within this component. |
+
 Additional props are passed to the `span` element and are not listed.
+
+[data-attribute-map]:
+  https://github.com/brighte-labs/spark-web/blob/e7f6f4285b4cfd876312cc89fbdd094039aa239a/packages/utils/src/internal/buildDataAttributes.ts#L1

No alert changes

Improved metrics

Total package byte prevSize

27562

increased by7.72%

Lines of code

570

increased by3.45%

Number of lines in readme file

67

increased by11.67%

Dependency changes

• Updated@babel/runtime@^7.18.3

• Updated@spark-web/theme@^3.0.2

• Updated@spark-web/utils@^1.1.5