Merge pull request #2589 from intersective/2.4.y/CORE-8091/restore-btn-size-b4-wcag

[CORE-8091]  restore button size for WCAG compliance

Author: shawnm0705

projects/v3/src/app/components/bottom-action-bar/bottom-action-bar.component.scss

@@ -7,8 +7,29 @@
   border-top: 1px solid var(--practera-grey-25);
   background: white;
 
-  ion-button.ion-focused {
-    border: 1px solid black;
-    border-radius: 8px;
+  ion-button {
+    min-width: 200px;
+    flex: 0 1 auto;
+
+    // restore padding that was removed by global button reset
+    --padding-top: 13px;
+    --padding-bottom: 13px;
+    min-height: 44px; // WCAG 2.5.8 target size minimum
+
+    &.ion-focused {
+      border: 1px solid black;
+      border-radius: 8px;
+    }
+
+    // target shadow DOM button to restore padding
+    &::part(native) {
+      padding-top: 13px;
+      padding-bottom: 13px;
+    }
+
+    // ensure proper sizing on desktop
+    @media (min-width: 768px) {
+      min-width: 240px;
+    }
   }
 }

projects/v3/src/global.scss

@@ -84,12 +84,12 @@ ion-item-divider {
     // Use darker background for WCAG contrast compliance (4.5:1 for normal text)
     // color-mix creates darker shade: 60% primary + 40% dark green
     background-color: color-mix(in srgb, var(--ion-color-primary) 60%, #1a4d2a);
-    
+
     // Fallback for browsers without color-mix support
     @supports not (color-mix(in srgb, white, black)) {
       background-color: var(--ion-color-primary-shade, #2a6d3f);
     }
-    
+
     color: white;
     text-decoration: none;
     z-index: 9999;
@@ -173,7 +173,7 @@ p, span, div, ion-label, ion-text {
 .icon-button {
   background: none;
   border: none;
-  padding: 0;
+  padding: 0; // WCAG 2.5.8 target size compliance
   cursor: pointer;
   display: inline-flex;
   align-items: center;