@spark-web/a11y - npm Package Compare versions

Comparing version 1.0.4 to 1.0.5

dist/declarations/src/focusRing.d.ts

@@ -19,6 +19,22 @@ import type { BrighteTheme } from '@spark-web/theme';
     boxShadow: string;
-    outline: number;
+    /**
+     * This removes the nested input outline visibility since
+     * the wrapper will be outlined, but still visibly focusable
+     * to windows high contrast mode users.
+     *
+     * @see https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors
+     */
+    outline: string;
+    outlineOffset: string;
 } | {
-    outline: number;
+    /**
+     * This removes the nested input outline visibility since
+     * the wrapper will be outlined, but still visibly focusable
+     * to windows high contrast mode users.
+     *
+     * @see https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors
+     */
+    outline: string;
+    outlineOffset: string;
 };
 export {};

dist/declarations/src/VisuallyHidden.d.ts

@@ -11,3 +11,3 @@ import type { ReactNode } from 'react';
     as?: Comp | undefined;
-    ref?: import("react").Ref<Comp extends "symbol" | "clipPath" | "filter" | "mask" | "marker" | "text" | "circle" | "svg" | "animate" | "animateMotion" | "animateTransform" | "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" | "textPath" | "tspan" | "use" | "view" | keyof HTMLElementTagNameMap | "set" ? (HTMLElementTagNameMap & Pick<SVGElementTagNameMap, "symbol" | "clipPath" | "filter" | "mask" | "marker" | "text" | "circle" | "svg" | "animate" | "animateMotion" | "animateTransform" | "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" | "textPath" | "tspan" | "use" | "view" | "set">)[Comp] : Comp extends new (...args: any) => any ? InstanceType<Comp> : undefined> | 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;
 } & Omit<import("react").PropsWithoutRef<import("react").ComponentProps<Comp>>, "as"> & VisuallyHiddenProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
@@ -14,0 +14,0 @@ export declare const visuallyHiddenStyles: {

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

@@ -68,3 +68,11 @@ 'use strict';
   return _objectSpread({
-    outline: 0
+    /**
+     * This removes the nested input outline visibility since
+     * the wrapper will be outlined, but still visibly focusable
+     * to windows high contrast mode users.
+     *
+     * @see https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors
+     */
+    outline: '2px solid transparent',
+    outlineOffset: '2px'
   }, always ? styles : _defineProperty({}, "[".concat(focusVisibleDataAttribute, "] &"), styles));
@@ -71,0 +79,0 @@ };

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

@@ -68,3 +68,11 @@ 'use strict';
   return _objectSpread({
-    outline: 0
+    /**
+     * This removes the nested input outline visibility since
+     * the wrapper will be outlined, but still visibly focusable
+     * to windows high contrast mode users.
+     *
+     * @see https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors
+     */
+    outline: '2px solid transparent',
+    outlineOffset: '2px'
   }, always ? styles : _defineProperty({}, "[".concat(focusVisibleDataAttribute, "] &"), styles));
@@ -71,0 +79,0 @@ };

dist/spark-web-a11y.esm.js

@@ -64,3 +64,11 @@ import { jsx } from 'react/jsx-runtime';
   return _objectSpread({
-    outline: 0
+    /**
+     * This removes the nested input outline visibility since
+     * the wrapper will be outlined, but still visibly focusable
+     * to windows high contrast mode users.
+     *
+     * @see https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors
+     */
+    outline: '2px solid transparent',
+    outlineOffset: '2px'
   }, always ? styles : _defineProperty({}, "[".concat(focusVisibleDataAttribute, "] &"), styles));
@@ -67,0 +75,0 @@ };

package.json

 {
   "name": "@spark-web/a11y",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "license": "MIT",
@@ -11,7 +11,7 @@ "main": "dist/spark-web-a11y.cjs.js",
   "dependencies": {
-    "@babel/runtime": "^7.14.6",
-    "@emotion/css": "^11.7.1",
-    "@spark-web/theme": "^3.0.0",
-    "@spark-web/utils": "^1.1.2",
-    "polished": "^4.1.3"
+    "@babel/runtime": "^7.18.0",
+    "@emotion/css": "^11.9.0",
+    "@spark-web/theme": "^3.0.1",
+    "@spark-web/utils": "^1.1.3",
+    "polished": "^4.2.2"
   },
@@ -18,0 +18,0 @@ "devDependencies": {

No alert changes

Improved metrics

Total package byte prevSize

25587

increased by7.65%

Lines of code

551

increased by7.83%

Dependency changes

• Updated@babel/runtime@^7.18.0

• Updated@emotion/css@^11.9.0

• Updated@spark-web/theme@^3.0.1

• Updated@spark-web/utils@^1.1.3

• Updatedpolished@^4.2.2