@zohodesk/components 1.0.0-temp-259.3 → 1.0.0-temp-259.5

package/es/v1/Button/__tests__/__snapshots__/Button.spec.js.snap

@@ -4,6 +4,7 @@ exports[`Button Presets Should render preset BLACK_TEXT_BRAND_ONHOVER 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="false"
     aria-pressed="false"
     class="buttonReset button text-black hover:text-brand-80 focus:text-brand-80 active:text-brand-80 border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
@@ -27,6 +28,7 @@ exports[`Button Presets Should render preset BLACK_TEXT_BRAND_ONHOVER in selecte
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="false"
     aria-pressed="true"
     class="buttonReset button selected:text-brand-80 border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
@@ -50,6 +52,7 @@ exports[`Button Presets Should render preset BRAND_BG_ONSELECT 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="false"
     aria-pressed="false"
     class="buttonReset button text-brand-80 hover:text-brand-100 focus:text-brand-100 active:text-brand-100 border-brand-80 hover:border-brand-100 focus:border-brand-100 active:border-brand-100 sizeMedium shapeRoundedRectangle variantText"
     type="button"
@@ -73,6 +76,7 @@ exports[`Button Presets Should render preset BRAND_BG_ONSELECT in selected state
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="false"
     aria-pressed="true"
     class="buttonReset button selected:bg-brand-80 selected:text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle variantText"
     type="button"
@@ -96,6 +100,7 @@ exports[`Button Presets Should render preset BRAND_GHOST 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="false"
     aria-pressed="false"
     class="buttonReset button text-brand-80 hover:text-brand-100 focus:text-brand-100 active:text-brand-100 border-brand-80 hover:border-brand-100 focus:border-brand-100 active:border-brand-100 sizeMedium shapeRoundedRectangle variantText"
     type="button"
@@ -119,6 +124,7 @@ exports[`Button Presets Should render preset BRAND_GHOST in selected state 1`] =
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="false"
     aria-pressed="true"
     class="buttonReset button selected:text-brand-80 selected:border-brand-80 sizeMedium shapeRoundedRectangle variantText"
     type="button"
@@ -142,6 +148,7 @@ exports[`Button Presets Should render preset BRAND_TEXT_ONLY 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="false"
     aria-pressed="false"
     class="buttonReset button text-brand-80 hover:text-brand-100 focus:text-brand-100 active:text-brand-100 border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
@@ -165,6 +172,7 @@ exports[`Button Presets Should render preset BRAND_TEXT_ONLY in selected state 1
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="false"
     aria-pressed="true"
     class="buttonReset button selected:text-brand-80 border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
@@ -188,6 +196,7 @@ exports[`Button Presets Should render preset BRAND_TEXT_TINTED_DANGER_HOVER 1`]
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="false"
     aria-pressed="false"
     class="buttonReset button hover:bg-red-10 focus:bg-red-10 active:bg-red-10 text-brand-80 hover:text-red-70 focus:text-red-70 active:text-red-70 border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
@@ -211,6 +220,7 @@ exports[`Button Presets Should render preset BRAND_TEXT_TINTED_DANGER_HOVER in s
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="false"
     aria-pressed="true"
     class="buttonReset button selected:bg-red-10 selected:text-red-70 selected:border-red-30 sizeMedium shapeRoundedRectangle variantText"
     type="button"
@@ -234,6 +244,7 @@ exports[`Button Presets Should render preset BRAND_TEXT_TINTED_HOVER 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="false"
     aria-pressed="false"
     class="buttonReset button hover:bg-brand-10 focus:bg-brand-10 active:bg-brand-10 text-brand-80 hover:text-brand-100 focus:text-brand-100 active:text-brand-100 border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
@@ -257,6 +268,7 @@ exports[`Button Presets Should render preset BRAND_TEXT_TINTED_HOVER in selected
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="false"
     aria-pressed="true"
     class="buttonReset button selected:bg-brand-10 selected:text-brand-80 selected:border-brand-10 sizeMedium shapeRoundedRectangle variantText"
     type="button"
@@ -280,6 +292,7 @@ exports[`Button Presets Should render preset BRAND_TINTED_OUTLINE 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="false"
     aria-pressed="false"
     class="buttonReset button bg-brand-10 hover:bg-brand-20 focus:bg-brand-20 active:bg-brand-20 text-brand-80 hover:text-brand-100 focus:text-brand-100 active:text-brand-100 border-brand-10 hover:border-brand-100 focus:border-brand-100 active:border-brand-100 sizeMedium shapeRoundedRectangle variantText"
     type="button"
@@ -303,6 +316,7 @@ exports[`Button Presets Should render preset BRAND_TINTED_OUTLINE in selected st
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="false"
     aria-pressed="true"
     class="buttonReset button selected:bg-brand-10 selected:text-brand-80 selected:border-brand-10 sizeMedium shapeRoundedRectangle variantText"
     type="button"
@@ -326,6 +340,7 @@ exports[`Button Presets Should render preset SECONDARY_GHOST_BRAND_TINTED_ONSELE
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="false"
     aria-pressed="false"
     class="buttonReset button text-black hover:text-black focus:text-black active:text-black border-grey-65 hover:border-grey-55 focus:border-grey-55 active:border-grey-55 sizeMedium shapeRoundedRectangle variantText"
     type="button"
@@ -349,6 +364,7 @@ exports[`Button Presets Should render preset SECONDARY_GHOST_BRAND_TINTED_ONSELE
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="false"
     aria-pressed="true"
     class="buttonReset button selected:bg-brand-10 selected:text-black selected:border-brand-10 sizeMedium shapeRoundedRectangle variantText"
     type="button"
@@ -368,10 +384,59 @@ exports[`Button Presets Should render preset SECONDARY_GHOST_BRAND_TINTED_ONSELE
 </DocumentFragment>
 `;
 
+exports[`Button Presets Should render preset SECONDARY_GHOST_CANCEL 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="false"
+    aria-pressed="false"
+    class="buttonReset button text-grey-65 hover:text-grey-100 focus:text-grey-100 active:text-grey-100 border-grey-65 hover:border-grey-55 focus:border-grey-55 active:border-grey-55 sizeMedium shapeRoundedRectangle variantText"
+    type="button"
+  >
+    <div
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    >
+      <div
+        class="dotted size13"
+      >
+        Button
+      </div>
+    </div>
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button Presets Should render preset SECONDARY_GHOST_CANCEL in selected state 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="false"
+    aria-pressed="true"
+    class="buttonReset button selected:bg-grey-65 selected:text-white border-grey-65 sizeMedium shapeRoundedRectangle variantText"
+    type="button"
+  >
+    <div
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    >
+      <div
+        class="dotted size13"
+      >
+        Button
+      </div>
+    </div>
+  </button>
+</DocumentFragment>
+`;
+
 exports[`Button Presets Should render preset SUCCESS_GHOST 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="false"
     aria-pressed="false"
     class="buttonReset button text-green-80 hover:text-green-100 focus:text-green-100 active:text-green-100 border-green-80 hover:border-green-100 focus:border-green-100 active:border-green-100 sizeMedium shapeRoundedRectangle variantText"
     type="button"
@@ -395,6 +460,7 @@ exports[`Button Presets Should render preset SUCCESS_GHOST in selected state 1`]
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="false"
     aria-pressed="true"
     class="buttonReset button selected:text-green-80 selected:border-green-80 sizeMedium shapeRoundedRectangle variantText"
     type="button"
@@ -418,6 +484,7 @@ exports[`Button Presets Should render preset SUCCESS_TEXT_ONLY 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="false"
     aria-pressed="false"
     class="buttonReset button text-green-80 hover:text-green-100 focus:text-green-100 active:text-green-100 border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
@@ -441,6 +508,7 @@ exports[`Button Presets Should render preset SUCCESS_TEXT_ONLY in selected state
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="false"
     aria-pressed="true"
     class="buttonReset button selected:text-green-80 border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
@@ -464,6 +532,7 @@ exports[`Button Presets Should render preset SUCCESS_TINTED_OUTLINE 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="false"
     aria-pressed="false"
     class="buttonReset button bg-green-10 hover:bg-green-30 focus:bg-green-30 active:bg-green-30 text-green-80 hover:text-green-100 focus:text-green-100 active:text-green-100 border-green-30 hover:border-green-100 focus:border-green-100 active:border-green-100 sizeMedium shapeRoundedRectangle variantText"
     type="button"
@@ -487,6 +556,7 @@ exports[`Button Presets Should render preset SUCCESS_TINTED_OUTLINE in selected
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="false"
     aria-pressed="true"
     class="buttonReset button selected:bg-green-10 selected:text-green-80 selected:border-green-30 sizeMedium shapeRoundedRectangle variantText"
     type="button"
@@ -511,6 +581,7 @@ exports[`Button Should apply a11yAttributes to the button 1`] = `
   <button
     aria-busy="false"
     aria-describedby="button-description"
+    aria-disabled="false"
     aria-label="Smart Button"
     aria-pressed="false"
     class="buttonReset button border-transparent sizeMedium shapeRoundedRectangle variantText"
@@ -535,6 +606,7 @@ exports[`Button Should apply customAttributes to button elements 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="false"
     aria-pressed="false"
     class="buttonReset button border-transparent sizeMedium shapeRoundedRectangle variantText"
     data-wrapper="wrapperAttr"
@@ -560,6 +632,7 @@ exports[`Button Should apply customClass to wrapper, text and icon 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="false"
     aria-pressed="false"
     class="buttonReset button border-transparent sizeMedium shapeRoundedRectangle variantIconWithText customButtonClass"
     type="button"
@@ -571,9 +644,10 @@ exports[`Button Should apply customClass to wrapper, text and icon 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus customIconClass"
+        class="zd_font_icons ff icon-plus basic d-inline-block d-align-middle customIconClass"
         data-id="fontIcon"
         data-selector-id="fontIcon"
+        data-test-id="fontIcon"
         style="--zd-iconfont-size: var(--zd_font_size16);"
       />
       <div
@@ -590,6 +664,7 @@ exports[`Button Should apply customProps to wrapper, text and icon 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="false"
     aria-pressed="false"
     class="buttonReset button border-transparent sizeMedium shapeRoundedRectangle variantIconWithText"
     type="button"
@@ -613,11 +688,9 @@ exports[`Button Should be disabled when isDisabled prop is true 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="true"
     aria-pressed="false"
     class="buttonReset button border-transparent sizeMedium shapeRoundedRectangle variantText disabledOpac disabledPointer"
-    data-id="undefined_disabled"
-    data-test-id="undefined_disabled"
-    disabled=""
     type="button"
   >
     <div
@@ -633,6 +706,7 @@ exports[`Button Should render Sizes of buttons - full 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="false"
     aria-pressed="false"
     class="buttonReset button border-transparent sizeFull shapeRoundedRectangle variantText"
     type="button"
@@ -650,6 +724,7 @@ exports[`Button Should render Sizes of buttons - large 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="false"
     aria-pressed="false"
     class="buttonReset button border-transparent sizeLarge shapeRoundedRectangle variantText"
     type="button"
@@ -667,6 +742,7 @@ exports[`Button Should render Sizes of buttons - medium 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="false"
     aria-pressed="false"
     class="buttonReset button border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
@@ -684,6 +760,7 @@ exports[`Button Should render Sizes of buttons - small 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="false"
     aria-pressed="false"
     class="buttonReset button border-transparent sizeSmall shapeRoundedRectangle variantText"
     type="button"
@@ -701,6 +778,7 @@ exports[`Button Should render Status of buttons - default 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="false"
     aria-pressed="false"
     class="buttonReset button border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
@@ -718,9 +796,9 @@ exports[`Button Should render Status of buttons - loading 1`] = `
 <DocumentFragment>
   <button
     aria-busy="true"
+    aria-disabled="true"
     aria-pressed="false"
     class="buttonReset button border-transparent sizeMedium shapeRoundedRectangle variantText loading"
-    disabled=""
     type="button"
   >
     <div
@@ -761,6 +839,7 @@ exports[`Button Should render Status of buttons - success 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="false"
     aria-pressed="false"
     class="buttonReset button border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
@@ -794,6 +873,7 @@ exports[`Button Should render appearance of buttons - { bg: false, border: true
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="false"
     aria-pressed="false"
     class="buttonReset button hover:bg-brand-80 focus:bg-brand-80 active:bg-brand-80 text-brand-80 hover:text-brand-filled focus:text-brand-filled active:text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle variantText"
     type="button"
@@ -811,6 +891,7 @@ exports[`Button Should render appearance of buttons - { bg: true, text: 'black'
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="false"
     aria-pressed="false"
     class="buttonReset button bg-brand-80 hover:bg-brand-100 focus:bg-brand-100 active:bg-brand-100 text-black hover:text-brand-filled focus:text-brand-filled active:text-brand-filled border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
@@ -828,6 +909,7 @@ exports[`Button Should render appearance of buttons - { border: true } 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="false"
     aria-pressed="false"
     class="buttonReset button bg-brand-80 hover:bg-brand-100 focus:bg-brand-100 active:bg-brand-100 text-brand-filled hover:text-brand-filled focus:text-brand-filled active:text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle variantText"
     type="button"
@@ -845,6 +927,7 @@ exports[`Button Should render appearance of buttons - { text: true } 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="false"
     aria-pressed="false"
     class="buttonReset button bg-brand-80 hover:bg-brand-100 focus:bg-brand-100 active:bg-brand-100 text-brand-filled hover:text-brand-filled focus:text-brand-filled active:text-brand-filled border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
@@ -862,6 +945,7 @@ exports[`Button Should render appearance of buttons - {} 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="false"
     aria-pressed="false"
     class="buttonReset button bg-brand-80 hover:bg-brand-100 focus:bg-brand-100 active:bg-brand-100 text-brand-filled hover:text-brand-filled focus:text-brand-filled active:text-brand-filled border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
@@ -879,11 +963,9 @@ exports[`Button Should render disabledAppearance of buttons - dull 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="true"
     aria-pressed="false"
     class="buttonReset button border-transparent sizeMedium shapeRoundedRectangle variantText disabledOpac disabledPointer"
-    data-id="undefined_disabled"
-    data-test-id="undefined_disabled"
-    disabled=""
     type="button"
   >
     <div
@@ -899,11 +981,9 @@ exports[`Button Should render disabledAppearance of buttons - none 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="true"
     aria-pressed="false"
     class="buttonReset button border-transparent sizeMedium shapeRoundedRectangle variantText disabledPointer"
-    data-id="undefined_disabled"
-    data-test-id="undefined_disabled"
-    disabled=""
     type="button"
   >
     <div
@@ -919,11 +999,9 @@ exports[`Button Should render disabledAppearance of buttons - strike 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="true"
     aria-pressed="false"
     class="buttonReset button border-transparent sizeMedium shapeRoundedRectangle variantText disabledPointer strike"
-    data-id="undefined_disabled"
-    data-test-id="undefined_disabled"
-    disabled=""
     type="button"
   >
     <div
@@ -939,6 +1017,7 @@ exports[`Button Should render hoverAppearance of buttons - { bg: false, border:
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="false"
     aria-pressed="false"
     class="buttonReset button bg-brand-80 text-brand-filled hover:text-brand-filled focus:text-brand-filled active:text-brand-filled border-transparent hover:border-brand-80 focus:border-brand-80 active:border-brand-80 sizeMedium shapeRoundedRectangle variantText"
     type="button"
@@ -956,6 +1035,7 @@ exports[`Button Should render hoverAppearance of buttons - { bg: true, text: 'bl
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="false"
     aria-pressed="false"
     class="buttonReset button bg-brand-80 hover:bg-brand-100 focus:bg-brand-100 active:bg-brand-100 text-brand-filled hover:text-black focus:text-black active:text-black border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
@@ -973,6 +1053,7 @@ exports[`Button Should render hoverAppearance of buttons - { border: true } 1`]
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="false"
     aria-pressed="false"
     class="buttonReset button bg-brand-80 hover:bg-brand-100 focus:bg-brand-100 active:bg-brand-100 text-brand-filled hover:text-brand-filled focus:text-brand-filled active:text-brand-filled border-transparent hover:border-brand-80 focus:border-brand-80 active:border-brand-80 sizeMedium shapeRoundedRectangle variantText"
     type="button"
@@ -990,6 +1071,7 @@ exports[`Button Should render hoverAppearance of buttons - { text: true } 1`] =
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="false"
     aria-pressed="false"
     class="buttonReset button bg-brand-80 hover:bg-brand-100 focus:bg-brand-100 active:bg-brand-100 text-brand-filled hover:text-brand-filled focus:text-brand-filled active:text-brand-filled border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
@@ -1007,6 +1089,7 @@ exports[`Button Should render hoverAppearance of buttons - {} 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="false"
     aria-pressed="false"
     class="buttonReset button bg-brand-80 hover:bg-brand-100 focus:bg-brand-100 active:bg-brand-100 text-brand-filled hover:text-brand-filled focus:text-brand-filled active:text-brand-filled border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
@@ -1024,9 +1107,9 @@ exports[`Button Should render loader overlay when status is loading and loaderPl
 <DocumentFragment>
   <button
     aria-busy="true"
+    aria-disabled="true"
     aria-pressed="false"
     class="buttonReset button border-transparent sizeMedium shapeRoundedRectangle variantText loading"
-    disabled=""
     type="button"
   >
     <div
@@ -1067,9 +1150,9 @@ exports[`Button Should render loaderPlacement of buttons - end 1`] = `
 <DocumentFragment>
   <button
     aria-busy="true"
+    aria-disabled="true"
     aria-pressed="false"
     class="buttonReset button border-transparent sizeMedium shapeRoundedRectangle variantText loading"
-    disabled=""
     type="button"
   >
     <div
@@ -1111,9 +1194,9 @@ exports[`Button Should render loaderPlacement of buttons - overlay 1`] = `
 <DocumentFragment>
   <button
     aria-busy="true"
+    aria-disabled="true"
     aria-pressed="false"
     class="buttonReset button border-transparent sizeMedium shapeRoundedRectangle variantText loading"
-    disabled=""
     type="button"
   >
     <div
@@ -1154,9 +1237,9 @@ exports[`Button Should render loaderPlacement of buttons - start 1`] = `
 <DocumentFragment>
   <button
     aria-busy="true"
+    aria-disabled="true"
     aria-pressed="false"
     class="buttonReset button border-transparent sizeMedium shapeRoundedRectangle variantText loading"
-    disabled=""
     type="button"
   >
     <div
@@ -1198,6 +1281,7 @@ exports[`Button Should render palette of buttons - brand 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="false"
     aria-pressed="false"
     class="buttonReset button bg-brand-80 hover:bg-brand-100 focus:bg-brand-100 active:bg-brand-100 text-brand-filled hover:text-brand-filled focus:text-brand-filled active:text-brand-filled border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
@@ -1215,6 +1299,7 @@ exports[`Button Should render palette of buttons - brandLighter 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="false"
     aria-pressed="false"
     class="buttonReset button bg-brand-10 hover:bg-brand-20 focus:bg-brand-20 active:bg-brand-20 text-brand-80 hover:text-brand-100 focus:text-brand-100 active:text-brand-100 border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
@@ -1232,6 +1317,7 @@ exports[`Button Should render palette of buttons - danger 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="false"
     aria-pressed="false"
     class="buttonReset button bg-red-70 hover:bg-red-100 focus:bg-red-100 active:bg-red-100 text-white hover:text-white focus:text-white active:text-white border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
@@ -1249,6 +1335,7 @@ exports[`Button Should render palette of buttons - dangerLighter 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="false"
     aria-pressed="false"
     class="buttonReset button bg-red-10 hover:bg-red-30 focus:bg-red-30 active:bg-red-30 text-red-70 hover:text-red-100 focus:text-red-100 active:text-red-100 border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
@@ -1266,6 +1353,7 @@ exports[`Button Should render palette of buttons - info 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="false"
     aria-pressed="false"
     class="buttonReset button bg-blue-80 hover:bg-blue-100 focus:bg-blue-100 active:bg-blue-100 text-white hover:text-white focus:text-white active:text-white border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
@@ -1283,6 +1371,7 @@ exports[`Button Should render palette of buttons - infoLighter 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="false"
     aria-pressed="false"
     class="buttonReset button bg-blue-10 hover:bg-blue-20 focus:bg-blue-20 active:bg-blue-20 text-blue-80 hover:text-blue-100 focus:text-blue-100 active:text-blue-100 border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
@@ -1300,6 +1389,7 @@ exports[`Button Should render palette of buttons - secondary 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="false"
     aria-pressed="false"
     class="buttonReset button bg-grey-65 hover:bg-grey-55 focus:bg-grey-55 active:bg-grey-55 text-white hover:text-white focus:text-white active:text-white border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
@@ -1317,6 +1407,7 @@ exports[`Button Should render palette of buttons - secondaryLighter 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="false"
     aria-pressed="false"
     class="buttonReset button bg-grey-10 hover:bg-grey-20 focus:bg-grey-20 active:bg-grey-20 text-grey-65 hover:text-grey-100 focus:text-grey-100 active:text-grey-100 border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
@@ -1334,6 +1425,7 @@ exports[`Button Should render palette of buttons - success 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="false"
     aria-pressed="false"
     class="buttonReset button bg-green-80 hover:bg-green-100 focus:bg-green-100 active:bg-green-100 text-white hover:text-white focus:text-white active:text-white border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
@@ -1351,6 +1443,7 @@ exports[`Button Should render palette of buttons - successLighter 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="false"
     aria-pressed="false"
     class="buttonReset button bg-green-10 hover:bg-green-30 focus:bg-green-30 active:bg-green-30 text-green-80 hover:text-green-100 focus:text-green-100 active:text-green-100 border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
@@ -1368,6 +1461,7 @@ exports[`Button Should render palette of buttons - warning 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="false"
     aria-pressed="false"
     class="buttonReset button bg-orange-80 hover:bg-orange-100 focus:bg-orange-100 active:bg-orange-100 text-white hover:text-white focus:text-white active:text-white border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
@@ -1385,6 +1479,7 @@ exports[`Button Should render palette of buttons - warningLighter 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="false"
     aria-pressed="false"
     class="buttonReset button bg-orange-10 hover:bg-orange-15 focus:bg-orange-15 active:bg-orange-15 text-orange-80 hover:text-orange-100 focus:text-orange-100 active:text-orange-100 border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
@@ -1402,6 +1497,7 @@ exports[`Button Should render selectedAppearance of buttons - { bg: false, borde
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="false"
     aria-pressed="true"
     class="buttonReset button bg-brand-80 selected:text-brand-filled selected:border-brand-80 sizeMedium shapeRoundedRectangle variantText"
     type="button"
@@ -1419,6 +1515,7 @@ exports[`Button Should render selectedAppearance of buttons - { bg: true, text:
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="false"
     aria-pressed="true"
     class="buttonReset button selected:bg-brand-80 selected:text-black border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
@@ -1436,6 +1533,7 @@ exports[`Button Should render selectedAppearance of buttons - { border: true } 1
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="false"
     aria-pressed="true"
     class="buttonReset button selected:bg-brand-80 selected:text-brand-filled selected:border-brand-80 sizeMedium shapeRoundedRectangle variantText"
     type="button"
@@ -1453,6 +1551,7 @@ exports[`Button Should render selectedAppearance of buttons - { text: true } 1`]
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="false"
     aria-pressed="true"
     class="buttonReset button selected:bg-brand-80 selected:text-brand-filled border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
@@ -1470,6 +1569,7 @@ exports[`Button Should render selectedAppearance of buttons - {} 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="false"
     aria-pressed="true"
     class="buttonReset button selected:bg-brand-80 selected:text-brand-filled border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
@@ -1487,6 +1587,7 @@ exports[`Button Should render shape of buttons - pill 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="false"
     aria-pressed="false"
     class="buttonReset button border-transparent sizeMedium shapePill variantText"
     type="button"
@@ -1504,6 +1605,7 @@ exports[`Button Should render shape of buttons - rectangle 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="false"
     aria-pressed="false"
     class="buttonReset button border-transparent sizeMedium shapeRectangle variantText"
     type="button"
@@ -1521,6 +1623,7 @@ exports[`Button Should render shape of buttons - roundedRectangle 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="false"
     aria-pressed="false"
     class="buttonReset button border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
@@ -1538,6 +1641,7 @@ exports[`Button Should render success overlay when status is success and loaderP
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="false"
     aria-pressed="false"
     class="buttonReset button border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
@@ -1571,6 +1675,7 @@ exports[`Button Should render type of buttons - button 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="false"
     aria-pressed="false"
     class="buttonReset button border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
@@ -1588,6 +1693,7 @@ exports[`Button Should render type of buttons - reset 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="false"
     aria-pressed="false"
     class="buttonReset button border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="reset"
@@ -1605,6 +1711,7 @@ exports[`Button Should render type of buttons - submit 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="false"
     aria-pressed="false"
     class="buttonReset button border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="submit"
@@ -1622,6 +1729,7 @@ exports[`Button Should render variant of buttons - icon 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="false"
     aria-pressed="false"
     class="buttonReset button border-transparent sizeMedium shapeRoundedRectangle variantIcon"
     type="button"
@@ -1639,6 +1747,7 @@ exports[`Button Should render variant of buttons - iconWithText 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="false"
     aria-pressed="false"
     class="buttonReset button border-transparent sizeMedium shapeRoundedRectangle variantIconWithText"
     type="button"
@@ -1656,6 +1765,7 @@ exports[`Button Should render variant of buttons - text 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="false"
     aria-pressed="false"
     class="buttonReset button border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
@@ -1673,6 +1783,7 @@ exports[`Button Should render with children 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="false"
     aria-pressed="false"
     class="buttonReset button border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
@@ -1696,6 +1807,7 @@ exports[`Button Should render with customId and testId 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="false"
     aria-pressed="false"
     class="buttonReset button border-transparent sizeMedium shapeRoundedRectangle variantText"
     data-id="customIdValue"
@@ -1715,6 +1827,7 @@ exports[`Button Should render with dataSelectorId 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="false"
     aria-pressed="false"
     class="buttonReset button border-transparent sizeMedium shapeRoundedRectangle variantText"
     data-selector-id="selectorId"
@@ -1733,6 +1846,7 @@ exports[`Button Should render with iconName and iconSize 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="false"
     aria-pressed="false"
     class="buttonReset button border-transparent sizeMedium shapeRoundedRectangle variantIcon"
     type="button"
@@ -1744,9 +1858,10 @@ exports[`Button Should render with iconName and iconSize 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus"
+        class="zd_font_icons ff icon-plus basic d-inline-block d-align-middle"
         data-id="fontIcon"
         data-selector-id="fontIcon"
+        data-test-id="fontIcon"
         style="--zd-iconfont-size: var(--zd_font_size20);"
       />
     </div>
@@ -1758,6 +1873,7 @@ exports[`Button Should render with iconPlacement 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="false"
     aria-pressed="false"
     class="buttonReset button border-transparent sizeMedium shapeRoundedRectangle variantIconWithText"
     type="button"
@@ -1774,9 +1890,10 @@ exports[`Button Should render with iconPlacement 1`] = `
       </div>
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus"
+        class="zd_font_icons ff icon-plus basic d-inline-block d-align-middle"
         data-id="fontIcon"
         data-selector-id="fontIcon"
+        data-test-id="fontIcon"
         style="--zd-iconfont-size: var(--zd_font_size16);"
       />
     </div>
@@ -1788,6 +1905,7 @@ exports[`Button Should render with renderBefore and renderAfter 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="false"
     aria-pressed="false"
     class="buttonReset button border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
@@ -1817,6 +1935,7 @@ exports[`Button Should render with renderIcon 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="false"
     aria-pressed="false"
     class="buttonReset button border-transparent sizeMedium shapeRoundedRectangle variantIcon"
     type="button"
@@ -1838,9 +1957,9 @@ exports[`Button Should render with renderLoader 1`] = `
 <DocumentFragment>
   <button
     aria-busy="true"
+    aria-disabled="true"
     aria-pressed="false"
     class="buttonReset button border-transparent sizeMedium shapeRoundedRectangle variantText loading"
-    disabled=""
     type="button"
   >
     <div
@@ -1865,6 +1984,7 @@ exports[`Button Should render with renderSuccess 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="false"
     aria-pressed="false"
     class="buttonReset button border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
@@ -1891,6 +2011,7 @@ exports[`Button Should render with selected style when isSelected prop is true 1
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="false"
     aria-pressed="true"
     class="buttonReset button border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
@@ -1908,6 +2029,7 @@ exports[`Button Should render with the basic set of default props 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="false"
     aria-pressed="false"
     class="buttonReset button border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
@@ -1925,6 +2047,7 @@ exports[`Button Should render with title attribute 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
+    aria-disabled="false"
     aria-pressed="false"
     class="buttonReset button border-transparent sizeMedium shapeRoundedRectangle variantText"
     data-title="Button test title"