@jobber/components 6.110.4 → 6.111.0

package/dist/Button-cjs.js

@@ -59,7 +59,7 @@ function ButtonIcon(_a) {
     var { size: sizeProp } = _a, props = tslib_es6.__rest(_a, ["size"]);
     const { size: contextSize } = useButtonContext();
     const size = sizeProp || contextSize;
-    return React.createElement(Icon.Icon, Object.assign({}, props, { size: size }));
+    return React.createElement(Icon.Icon, Object.assign({}, props, { size: size, "aria-hidden": "true" }));
 }
 function ButtonLabel(_a) {
     var { element = "span", fontWeight = "semiBold", fontFamily = "base", size: sizeProp } = _a, props = tslib_es6.__rest(_a, ["element", "fontWeight", "fontFamily", "size"]);

package/dist/Button-es.js

@@ -57,7 +57,7 @@ function ButtonIcon(_a) {
     var { size: sizeProp } = _a, props = __rest(_a, ["size"]);
     const { size: contextSize } = useButtonContext();
     const size = sizeProp || contextSize;
-    return React__default.createElement(Icon, Object.assign({}, props, { size: size }));
+    return React__default.createElement(Icon, Object.assign({}, props, { size: size, "aria-hidden": "true" }));
 }
 function ButtonLabel(_a) {
     var { element = "span", fontWeight = "semiBold", fontFamily = "base", size: sizeProp } = _a, props = __rest(_a, ["element", "fontWeight", "fontFamily", "size"]);

package/dist/Icon/Icon.d.ts

@@ -1,4 +1,4 @@
-import type { CSSProperties } from "react";
+import type { AriaAttributes, CSSProperties } from "react";
 import React from "react";
 import type { IconColorNames, IconNames, IconSizes } from "@jobber/design";
 export type { IconColorNames, IconNames } from "@jobber/design";
@@ -24,6 +24,11 @@ export interface IconProps {
      * Used to locate this view in end-to-end tests
      */
     readonly testID?: string;
+    /**
+     * Indicates whether the element is exposed to an accessibility API.
+     * @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-hidden}
+     */
+    readonly "aria-hidden"?: AriaAttributes["aria-hidden"];
     /**
      * **Use at your own risk:** Custom classnames for specific elements. This should only be used as a
      * **last resort**. Using this may result in unexpected side effects.
@@ -43,4 +48,4 @@ export interface IconProps {
         path?: CSSProperties;
     };
 }
-export declare function Icon({ name, color, customColor, size, testID, UNSAFE_className, UNSAFE_style, }: IconProps): React.JSX.Element;
+export declare function Icon({ name, color, customColor, size, testID, UNSAFE_className, UNSAFE_style, "aria-hidden": ariaHidden, }: IconProps): React.JSX.Element;

package/dist/Icon-cjs.js

@@ -3,7 +3,7 @@
 var React = require('react');
 var design = require('@jobber/design');
 
-function Icon({ name, color, customColor, size = "base", testID, UNSAFE_className, UNSAFE_style, }) {
+function Icon({ name, color, customColor, size = "base", testID, UNSAFE_className, UNSAFE_style, "aria-hidden": ariaHidden, }) {
     let icon;
     const { svgStyle, pathStyle, paths, viewBox } = design.getIcon({
         name,
@@ -17,7 +17,7 @@ function Icon({ name, color, customColor, size = "base", testID, UNSAFE_classNam
     else {
         icon = paths.map((path) => (React.createElement("path", { key: path, style: Object.assign(Object.assign({}, pathStyle), UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.path), className: UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.path, d: path, fill: customColor })));
     }
-    return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: viewBox, style: Object.assign(Object.assign({}, svgStyle), UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.svg), className: UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.svg, "data-testid": testID || name }, icon));
+    return (React.createElement("svg", { "aria-hidden": ariaHidden, xmlns: "http://www.w3.org/2000/svg", viewBox: viewBox, style: Object.assign(Object.assign({}, svgStyle), UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.svg), className: UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.svg, "data-testid": testID || name }, icon));
 }
 function getIconColor(name, color) {
     if (name === "truck") {

package/dist/Icon-es.js

@@ -1,7 +1,7 @@
 import React__default from 'react';
 import { getIcon } from '@jobber/design';
 
-function Icon({ name, color, customColor, size = "base", testID, UNSAFE_className, UNSAFE_style, }) {
+function Icon({ name, color, customColor, size = "base", testID, UNSAFE_className, UNSAFE_style, "aria-hidden": ariaHidden, }) {
     let icon;
     const { svgStyle, pathStyle, paths, viewBox } = getIcon({
         name,
@@ -15,7 +15,7 @@ function Icon({ name, color, customColor, size = "base", testID, UNSAFE_classNam
     else {
         icon = paths.map((path) => (React__default.createElement("path", { key: path, style: Object.assign(Object.assign({}, pathStyle), UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.path), className: UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.path, d: path, fill: customColor })));
     }
-    return (React__default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: viewBox, style: Object.assign(Object.assign({}, svgStyle), UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.svg), className: UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.svg, "data-testid": testID || name }, icon));
+    return (React__default.createElement("svg", { "aria-hidden": ariaHidden, xmlns: "http://www.w3.org/2000/svg", viewBox: viewBox, style: Object.assign(Object.assign({}, svgStyle), UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.svg), className: UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.svg, "data-testid": testID || name }, icon));
 }
 function getIconColor(name, color) {
     if (name === "truck") {

package/dist/Tooltip-cjs.js

@@ -72,6 +72,7 @@ function Tooltip({ message, children, preferredPlacement = "top", setTabIndex =
             ? `${(_d = floatingStyles.arrow) === null || _d === void 0 ? void 0 : _d.y}px`
             : "",
     };
+    const tooltipId = React.useId();
     return (React.createElement(React.Fragment, null,
         React.createElement("span", { className: styles.shadowActivator, ref: shadowRef }),
         children,
@@ -81,7 +82,7 @@ function Tooltip({ message, children, preferredPlacement = "top", setTabIndex =
                     duration: 0.15,
                     delay: 0.3,
                 } },
-                React.createElement("p", { className: styles.tooltipMessage }, message),
+                React.createElement("p", { className: styles.tooltipMessage, id: tooltipId }, message),
                 React.createElement("div", { ref: setArrowRef, style: arrowStyles, className: styles.arrow })))))));
     function initializeListeners() {
         const showTooltip = () => {
@@ -94,11 +95,14 @@ function Tooltip({ message, children, preferredPlacement = "top", setTabIndex =
             var _a;
             if ((_a = shadowRef === null || shadowRef === void 0 ? void 0 : shadowRef.current) === null || _a === void 0 ? void 0 : _a.nextElementSibling) {
                 const activator = shadowRef.current.nextElementSibling;
-                // Manually inject "aria-description" and "tabindex" to let the screen
+                // Manually inject "aria-labelledby" and "tabindex" to let the screen
                 // readers read the tooltip message.
                 // This is to avoid having to add those attribute as a prop on every
                 // component we have.
-                activator.setAttribute("aria-description", message);
+                // WARNING: This is an anti pattern that should be removed in the future.
+                // for now, we will leverage the fact that aria-labelledby overrides aria-label, avoiding
+                // double announcements of the same element assuming it uses "aria-label" as its mechanism.
+                activator.setAttribute("aria-labelledby", tooltipId);
                 if (setTabIndex) {
                     activator.setAttribute("tabindex", "0"); // enable focus
                 }

package/dist/Tooltip-es.js

@@ -1,4 +1,4 @@
-import React__default, { useRef, useState } from 'react';
+import React__default, { useRef, useState, useId } from 'react';
 import classnames from 'classnames';
 import { u as useFloating, s as shift, f as flip, a as arrow, h as hide, b as autoUpdate, l as limitShift, F as FloatingPortal } from './floating-ui.react-es.js';
 import { motion } from 'framer-motion';
@@ -70,6 +70,7 @@ function Tooltip({ message, children, preferredPlacement = "top", setTabIndex =
             ? `${(_d = floatingStyles.arrow) === null || _d === void 0 ? void 0 : _d.y}px`
             : "",
     };
+    const tooltipId = useId();
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement("span", { className: styles.shadowActivator, ref: shadowRef }),
         children,
@@ -79,7 +80,7 @@ function Tooltip({ message, children, preferredPlacement = "top", setTabIndex =
                     duration: 0.15,
                     delay: 0.3,
                 } },
-                React__default.createElement("p", { className: styles.tooltipMessage }, message),
+                React__default.createElement("p", { className: styles.tooltipMessage, id: tooltipId }, message),
                 React__default.createElement("div", { ref: setArrowRef, style: arrowStyles, className: styles.arrow })))))));
     function initializeListeners() {
         const showTooltip = () => {
@@ -92,11 +93,14 @@ function Tooltip({ message, children, preferredPlacement = "top", setTabIndex =
             var _a;
             if ((_a = shadowRef === null || shadowRef === void 0 ? void 0 : shadowRef.current) === null || _a === void 0 ? void 0 : _a.nextElementSibling) {
                 const activator = shadowRef.current.nextElementSibling;
-                // Manually inject "aria-description" and "tabindex" to let the screen
+                // Manually inject "aria-labelledby" and "tabindex" to let the screen
                 // readers read the tooltip message.
                 // This is to avoid having to add those attribute as a prop on every
                 // component we have.
-                activator.setAttribute("aria-description", message);
+                // WARNING: This is an anti pattern that should be removed in the future.
+                // for now, we will leverage the fact that aria-labelledby overrides aria-label, avoiding
+                // double announcements of the same element assuming it uses "aria-label" as its mechanism.
+                activator.setAttribute("aria-labelledby", tooltipId);
                 if (setTabIndex) {
                     activator.setAttribute("tabindex", "0"); // enable focus
                 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.110.4",
+  "version": "6.111.0",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -538,5 +538,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "da1c6df6c8957db8c84633605ea433e42172dcfc"
+  "gitHead": "2ead4b3048867c3ba81d72a130480f5a79e1c521"
 }