fix keyboard nav on settings list page + settings edit page (#13123)

rancher · Jan 23, 2025 · c6db1b7 · c6db1b7
1 parent 6e35eca
commit c6db1b7
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 23 deletions.
diff --git a/shell/assets/translations/en-us.yaml b/shell/assets/translations/en-us.yaml
@@ -7432,6 +7432,8 @@ registryConfig:
 ##############################
 
 advancedSettings:
+  setEnv: Set by Environment Variable
+  hideShow: Hide/show setting
   label: Settings
   subtext: Typical users will not need to change these. Proceed with caution, incorrect values can break your {appName} installation. Settings which have been customized from default settings are tagged 'Modified'.
   show: Show

diff --git a/shell/components/ResourceDetail/Masthead.vue b/shell/components/ResourceDetail/Masthead.vue
@@ -443,6 +443,9 @@ export default {
             <router-link
               v-if="location"
               :to="location"
+              role="link"
+              class="masthead-resource-list-link"
+              :aria-label="parent.displayName"
             >
               {{ parent.displayName }}:
             </router-link>
@@ -584,10 +587,10 @@ export default {
   }
 
   HEADER {
-    margin: 0;
+    margin: 0 0 0 -5px;
 
     .title {
-      overflow: hidden;
+      overflow-x: hidden;
     }
   }
 
@@ -598,17 +601,21 @@ export default {
 
     h1 {
       margin: 0;
-      overflow: hidden;
+      overflow-x: hidden;
       display: flex;
       flex-direction: row;
       align-items: center;
 
       .masthead-resource-title {
         padding: 0 8px;
         text-overflow: ellipsis;
-        overflow: hidden;
+        overflow-x: hidden;
         white-space: nowrap;
       }
+
+      .masthead-resource-list-link {
+        margin: 5px;
+      }
     }
   }
 

diff --git a/shell/list/management.cattle.io.setting.vue b/shell/list/management.cattle.io.setting.vue
@@ -62,16 +62,31 @@ export default {
     return { settings: null };
   },
 
-  computed: { ...mapGetters({ t: 'i18n/t' }) },
+  computed: {
+    ...mapGetters({ t: 'i18n/t' }),
+    ...mapGetters({
+      // Use either these Vuex getters
+      // OR the props to set the action menu state,
+      // but don't use both.
+      targetElem: 'action-menu/elem',
+      shouldShow: 'action-menu/showing',
+    }),
+  },
 
   methods: {
-    showActionMenu(e, setting) {
+    toggleActionMenu(e, setting) {
       const actionElement = e.srcElement;
 
-      this.$store.commit(`action-menu/show`, {
-        resources: setting.data,
-        elem:      actionElement
-      });
+      if (!this.targetElem && !this.shouldShow) {
+        this.$store.commit(`action-menu/show`, {
+          resources: setting.data,
+          elem:      actionElement
+        });
+      } else if (this.targetElem === actionElement && this.shouldShow) {
+        // this condition is needed so that we can "toggle" the action menu with
+        // the keyboard for accessibility (row action menu)
+        this.$store.commit('action-menu/hide');
+      }
     },
   }
 };
@@ -101,7 +116,7 @@ export default {
             <span
               v-if="setting.fromEnv"
               class="modified"
-            >Set by Environment Variable</span>
+            >{{ t('advancedSettings.setEnv') }}</span>
             <span
               v-else-if="setting.customized"
               class="modified"
@@ -118,23 +133,27 @@ export default {
             aria-expanded="false"
             type="button"
             class="btn btn-sm role-multi-action actions"
-            @click="showActionMenu($event, setting)"
+            role="button"
+            :aria-label="t('advancedSettings.edit.label')"
+            @click="toggleActionMenu($event, setting)"
           >
             <i class="icon icon-actions" />
           </button>
         </div>
       </div>
       <div value>
-        <div v-if="setting.hide">
+        <div v-if="setting.canHide">
           <button
             class="btn btn-sm role-primary"
+            role="button"
+            :aria-label="t('advancedSettings.hideShow')"
             @click="setting.hide = !setting.hide"
           >
-            {{ t('advancedSettings.show') }} {{ setting.id }}
+            {{ setting.hide ? t('advancedSettings.show') : t('advancedSettings.hide') }} {{ setting.id }}
           </button>
         </div>
         <div
-          v-else
+          v-show="!setting.canHide || (setting.canHide && !setting.hide)"
           class="settings-value"
         >
           <pre v-if="setting.kind === 'json'">{{ setting.json }}</pre>
@@ -146,14 +165,6 @@ export default {
             class="text-muted"
           >&lt;{{ t('advancedSettings.none') }}&gt;</pre>
         </div>
-        <div v-if="setting.canHide && !setting.hide">
-          <button
-            class="btn btn-sm role-primary"
-            @click="setting.hide = !setting.hide"
-          >
-            {{ t('advancedSettings.hide') }} {{ setting.id }}
-          </button>
-        </div>
       </div>
     </div>
   </div>