From 0a89af15d824c13e763b1aa6215132b1cdc57793 Mon Sep 17 00:00:00 2001
From: trtshen <cshen_581@hotmail.com>
Date: Fri, 21 Nov 2025 17:12:02 +0800
Subject: [PATCH] [CORE-8091]  restore button size for WCAG compliance - adjust
 padding for ion-button to meet WCAG 2.5.8 - ensure proper sizing on desktop
 for better usability

---
 .../bottom-action-bar.component.scss          | 27 ++++++++++++++++---
 projects/v3/src/global.scss                   |  6 ++---
 2 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/projects/v3/src/app/components/bottom-action-bar/bottom-action-bar.component.scss b/projects/v3/src/app/components/bottom-action-bar/bottom-action-bar.component.scss
index d5e1ae954..23175f4bd 100644
--- a/projects/v3/src/app/components/bottom-action-bar/bottom-action-bar.component.scss
+++ b/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;
+    }
   }
 }
diff --git a/projects/v3/src/global.scss b/projects/v3/src/global.scss
index 49b1aa0ca..b73bd8659 100644
--- a/projects/v3/src/global.scss
+++ b/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;