@jobber/components 6.111.2 → 6.111.4

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, "aria-hidden": "true" }));
+    return React.createElement(Icon.Icon, Object.assign({}, props, { size: size }));
 }
 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, "aria-hidden": "true" }));
+    return React__default.createElement(Icon, Object.assign({}, props, { size: size }));
 }
 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 { AriaAttributes, CSSProperties } from "react";
+import type { CSSProperties } from "react";
 import React from "react";
 import type { IconColorNames, IconNames, IconSizes } from "@jobber/design";
 export type { IconColorNames, IconNames } from "@jobber/design";
@@ -24,11 +24,6 @@ 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.
@@ -48,4 +43,4 @@ export interface IconProps {
         path?: CSSProperties;
     };
 }
-export declare function Icon({ name, color, customColor, size, testID, UNSAFE_className, UNSAFE_style, "aria-hidden": ariaHidden, }: IconProps): React.JSX.Element;
+export declare function Icon({ name, color, customColor, size, testID, UNSAFE_className, UNSAFE_style, }: 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, "aria-hidden": ariaHidden, }) {
+function Icon({ name, color, customColor, size = "base", testID, UNSAFE_className, UNSAFE_style, }) {
     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", { "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));
+    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));
 }
 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, "aria-hidden": ariaHidden, }) {
+function Icon({ name, color, customColor, size = "base", testID, UNSAFE_className, UNSAFE_style, }) {
     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", { "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));
+    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));
 }
 function getIconColor(name, color) {
     if (name === "truck") {

package/dist/Tooltip-cjs.js

@@ -72,7 +72,6 @@ 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,
@@ -82,7 +81,7 @@ function Tooltip({ message, children, preferredPlacement = "top", setTabIndex =
                     duration: 0.15,
                     delay: 0.3,
                 } },
-                React.createElement("p", { className: styles.tooltipMessage, id: tooltipId }, message),
+                React.createElement("p", { className: styles.tooltipMessage }, message),
                 React.createElement("div", { ref: setArrowRef, style: arrowStyles, className: styles.arrow })))))));
     function initializeListeners() {
         const showTooltip = () => {
@@ -95,14 +94,11 @@ 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-labelledby" and "tabindex" to let the screen
+                // Manually inject "aria-description" 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.
-                // 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);
+                activator.setAttribute("aria-description", message);
                 if (setTabIndex) {
                     activator.setAttribute("tabindex", "0"); // enable focus
                 }

package/dist/Tooltip-es.js

@@ -1,4 +1,4 @@
-import React__default, { useRef, useState, useId } from 'react';
+import React__default, { useRef, useState } 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,7 +70,6 @@ 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,
@@ -80,7 +79,7 @@ function Tooltip({ message, children, preferredPlacement = "top", setTabIndex =
                     duration: 0.15,
                     delay: 0.3,
                 } },
-                React__default.createElement("p", { className: styles.tooltipMessage, id: tooltipId }, message),
+                React__default.createElement("p", { className: styles.tooltipMessage }, message),
                 React__default.createElement("div", { ref: setArrowRef, style: arrowStyles, className: styles.arrow })))))));
     function initializeListeners() {
         const showTooltip = () => {
@@ -93,14 +92,11 @@ 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-labelledby" and "tabindex" to let the screen
+                // Manually inject "aria-description" 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.
-                // 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);
+                activator.setAttribute("aria-description", message);
                 if (setTabIndex) {
                     activator.setAttribute("tabindex", "0"); // enable focus
                 }

package/dist/styles.css

@@ -9419,12 +9419,26 @@ input.oOrjwubmsVA- {
 }
 
 ._8oxipSwiMJQ- {
+  outline: transparent;
   color: hsl(107, 58%, 33%);
   color: var(--color-interactive);
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
+._8oxipSwiMJQ-:hover,
+._8oxipSwiMJQ-:focus {
+  color: hsl(107, 65%, 24%);
+  color: var(--color-interactive--hover);
+  text-decoration-color: hsl(107, 65%, 24%);
+          text-decoration-color: var(--color-interactive--hover);
+}
+
+._8oxipSwiMJQ-:focus-visible {
+  box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px hsl(198, 12%, 57%);
+  box-shadow: var(--shadow-focus);
+}
+
 .rJffaV10x20- {
   width: 100%;
   padding: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.111.2",
+  "version": "6.111.4",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -538,5 +538,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "1baaa9f24017f50d12130e779b621a7c971723ef"
+  "gitHead": "7f1df502111c69f3371131ca2e2d3ff2ee5cb1af"
 }