@bolttech/atoms-button 0.28.2 → 0.29.2

package/index.cjs.js

@@ -1114,7 +1114,7 @@ var SizeVariant;
 const Container = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "atoms-buttonstyles__Container",
   componentId: "sc-i4bzba-0"
-})(["display:flex;align-items:center;gap:", ";white-space:nowrap;cursor:pointer;.left-img-btn,.right-img-btn{display:flex;label{font-size:", ";}}*{cursor:pointer;}"], ({
+})(["display:flex;align-items:center;gap:", ";white-space:nowrap;cursor:pointer;.left-img-btn,.right-img-btn{display:flex;span,label{font-size:", ";}}*{cursor:pointer;}"], ({
   theme,
   $size
 }) => theme.components.button[$size].generic.gap, ({
@@ -1124,7 +1124,7 @@ const Container = /*#__PURE__*/styled__default.default.div.withConfig({
 const Button$1 = /*#__PURE__*/styled__default.default.button.withConfig({
   displayName: "atoms-buttonstyles__Button",
   componentId: "sc-i4bzba-1"
-})(["height:fit-content;background-color:", ";border-radius:", ";border:", " solid ", ";box-shadow:", ";color:", ";padding:", ";label.material-symbols-sharp{color:", ";}&:disabled{background-color:", ";border:", ";color:", ";label.material-symbols-sharp{color:", ";}}&:active:enabled{background-color:", ";border:", ";color:", ";label.material-symbols-sharp{color:", ";}}&:hover:enabled{background-color:", ";border:", ";color:", ";label.material-symbols-sharp{color:", ";}}", ""], ({
+})(["height:fit-content;background-color:", ";border-radius:", ";border:", " solid ", ";box-shadow:", ";color:", ";padding:", ";&:focus-visible{outline:2px solid #000;outline-offset:2px;}label.material-symbols-sharp,span.material-symbols-sharp{color:", ";}&:disabled{background-color:", ";border:", ";color:", ";label.material-symbols-sharp,span.material-symbols-sharp{color:", ";}}&:active:enabled{background-color:", ";border:", ";color:", ";label.material-symbols-sharp,span.material-symbols-sharp{color:", ";}}&:hover:enabled{background-color:", ";border:", ";color:", ";label.material-symbols-sharp,span.material-symbols-sharp{color:", ";}}", ""], ({
   theme,
   $variant
 }) => theme.components.button[$variant].container.color.default, ({
@@ -1239,9 +1239,11 @@ const Button = /*#__PURE__*/react.forwardRef((_a, ref) => {
       iconLeft,
       fullWidth = false,
       type = 'button',
+      ariaLabel = "",
       onClick
     } = _a,
-    props = __rest(_a, ["id", "dataTestId", "disabled", "title", "variant", "size", "iconRight", "iconLeft", "fullWidth", "type", "onClick"]);
+    props = __rest(_a, ["id", "dataTestId", "disabled", "title", "variant", "size", "iconRight", "iconLeft", "fullWidth", "type", "ariaLabel", "onClick"]);
+  const iconId = react.useId();
   return jsxRuntime.jsx(Button$1, Object.assign({
     id: id,
     "data-testid": dataTestId,
@@ -1254,14 +1256,20 @@ const Button = /*#__PURE__*/react.forwardRef((_a, ref) => {
     "$fullWidth": fullWidth,
     onClick: event => !disabled && onClick && onClick(event),
     ref: ref
-  }, uiUtils.applyDataAttributes(props), {
+  }, disabled ? {
+    'aria-disabled': disabled
+  } : {}, ariaLabel ? {
+    'aria-label': ariaLabel
+  } : {}, uiUtils.applyDataAttributes(props), {
     children: jsxRuntime.jsxs(Container, {
       "$size": size,
       children: [iconLeft && jsxRuntime.jsx("div", {
         className: "left-img-btn",
         "data-testid": `left-img-btn-${iconLeft}`,
         children: jsxRuntime.jsx(atomsIcon.Icon, Object.assign({
+          id: `buttonIcon-${iconId}-${iconLeft}`,
           dataTestId: `buttonIcon-${iconLeft}`,
+          ariaHidden: title || ariaLabel ? true : undefined,
           icon: iconLeft
         }, uiUtils.applyDataAttributes(props, 'icon-left')))
       }), title && jsxRuntime.jsx(ButtonTitle, Object.assign({
@@ -1273,7 +1281,9 @@ const Button = /*#__PURE__*/react.forwardRef((_a, ref) => {
         className: "right-img-btn",
         "data-testid": `left-img-btn-${iconRight}`,
         children: jsxRuntime.jsx(atomsIcon.Icon, Object.assign({
+          id: `buttonIcon-${iconId}-${iconRight}`,
           dataTestId: `buttonIcon-${iconRight}`,
+          ariaHidden: title || ariaLabel ? true : undefined,
           icon: iconRight
         }, uiUtils.applyDataAttributes(props, 'icon-right')))
       })]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bolttech/atoms-button",
-  "version": "0.28.2",
+  "version": "0.29.2",
   "dependencies": {
     "styled-components": "6.1.1",
     "react": "19.1.2",

package/src/lib/atoms-button.d.ts

@@ -10,6 +10,7 @@ export declare const Button: React.ForwardRefExoticComponent<import("@bolttech/u
     iconLeft?: string;
     type?: import("./atoms-button.type").ButtonTypes;
     fullWidth?: boolean;
+    ariaLabel?: string;
     onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
 } & React.RefAttributes<HTMLButtonElement>>;
 export default Button;

package/src/lib/atoms-button.type.d.ts

@@ -23,5 +23,6 @@ export type ButtonProps = DefaultProps & {
     iconLeft?: string;
     type?: ButtonTypes;
     fullWidth?: boolean;
+    ariaLabel?: string;
     onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
 };