From 255a27deb79878fac220e93474125bf90c2b7ae9 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Mon, 22 Apr 2024 15:26:31 +0700
Subject: [PATCH] fix: accessibility (test-case cannot press)

---
 src/pages/01_branch-management/MainPage.vue | 105 +++++++++++---------
 1 file changed, 58 insertions(+), 47 deletions(-)

diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index c30921f7..7701513f 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -410,61 +410,72 @@ watch(locale, () => {
         <div class="row" style="flex-grow: 1; flex-wrap: nowrap">
           <div class="tree-container q-pa-md bordered-r surface-2">
             <div class="row">
-              <Icon
-                icon="ep:arrow-left-bold"
-                width="21px"
-                class="q-mr-sm"
-                :class="{
-                  'color-icon-arrow ': !currentHq.id,
-                  'cursor-pointer': currentHq.id,
-                }"
-                @click="
-                  () => {
-                    if (currentHq.id) {
-                      beforeBranch = currentHq;
-                      currentHq = { id: '', code: '' };
-                      fieldSelectedBranch = {
-                        label: $t('branchHQLabel'),
-                        value: 'branchHQLabel',
-                      };
+              <button
+                style="border: none; background: transparent"
+                :class="{ 'cursor-pointer': !!currentHq.id }"
+                id="br-prev"
+              >
+                <Icon
+                  icon="ep:arrow-left-bold"
+                  width="21px"
+                  :class="{ 'app-text-muted': !currentHq.id }"
+                  @click="
+                    () => {
+                      if (currentHq.id) {
+                        beforeBranch = currentHq;
+                        currentHq = { id: '', code: '' };
+                        fieldSelectedBranch = {
+                          label: $t('branchHQLabel'),
+                          value: 'branchHQLabel',
+                        };
+                      }
                     }
-                  }
-                "
-              />
+                  "
+                />
+              </button>
 
-              <Icon
-                icon="ep:arrow-right-bold"
-                width="21px"
-                class="q-mr-md"
-                :class="{
-                  'color-icon-arrow ': !beforeBranch.id,
-                  'cursor-pointer': beforeBranch.id,
-                }"
-                @click="
-                  () => {
-                    if (beforeBranch.id) {
-                      currentHq = beforeBranch;
-                      beforeBranch = { id: '', code: '' };
-                      fieldSelectedBranch = {
-                        label: '',
-                        value: '',
-                      };
+              <button
+                style="border: none; background: transparent; padding: 0"
+                :class="{ 'cursor-pointer': !!beforeBranch.id }"
+                id="br-next"
+              >
+                <Icon
+                  icon="ep:arrow-right-bold"
+                  width="21px"
+                  :class="{
+                    'app-text-muted': !beforeBranch.id,
+                  }"
+                  @click="
+                    () => {
+                      if (beforeBranch.id) {
+                        currentHq = beforeBranch;
+                        beforeBranch = { id: '', code: '' };
+                        fieldSelectedBranch = {
+                          label: '',
+                          value: '',
+                        };
+                      }
                     }
-                  }
-                "
-              />
+                  "
+                />
+              </button>
 
               <q-space />
 
-              <Icon
-                icon="pixelarticons:plus"
-                height="26"
-                class="color-icon-plus cursor-pointer"
-                @click="triggerCreate('headOffice')"
-              />
+              <button
+                id="hq-add-btn"
+                style="border: none; background: transparent"
+              >
+                <Icon
+                  icon="pixelarticons:plus"
+                  height="26"
+                  class="color-icon-plus cursor-pointer"
+                  @click="triggerCreate('headOffice')"
+                />
+              </button>
             </div>
 
-            <div class="bordered rounded q-mt-md surface-1">
+            <div class="bordered rounded q-mt-sm surface-1">
               <div
                 class="bordered-b q-pl-sm text-weight-bold surface-3"
                 style="height: 50px; display: flex; align-items: center"