Fix textual descriptions for cluster appearance in multiple places (#…

…13416) * Fix textual descriptions for cluster appearance in multiple places * address pr comments * address pr comments
rancher · Feb 24, 2025 · 84c2343 · 84c2343
1 parent 8a0e784
commit 84c2343
Show file tree

Hide file tree

Showing 17 changed files with 89 additions and 20 deletions.
diff --git a/jest.setup.js b/jest.setup.js
@@ -7,6 +7,7 @@ import { floatingVueOptions } from '@shell/plugins/floating-vue';
 import vSelect from 'vue-select';
 import cleanTooltipDirective from '@shell/directives/clean-tooltip';
 import cleanHtmlDirective from '@shell/directives/clean-html';
+import htmlStrippedAriaLabelDirective from '@shell/directives/strip-html-aria-label';
 import '@shell/plugins/replaceall';
 import { TextEncoder, TextDecoder } from 'util';
 
@@ -41,8 +42,9 @@ config.global.directives = {
       el.textContent = `%${ binding.value }%`;
     }
   },
-  'clean-tooltip': cleanTooltipDirective,
-  'clean-html':    cleanHtmlDirective,
+  'clean-tooltip':       cleanTooltipDirective,
+  'clean-html':          cleanHtmlDirective,
+  'stripped-aria-label': htmlStrippedAriaLabelDirective,
 };
 
 config.global.stubs['t'] = { template: '<span><slot /></span>' };

diff --git a/pkg/rancher-components/src/components/Form/Checkbox/Checkbox.vue b/pkg/rancher-components/src/components/Form/Checkbox/Checkbox.vue
@@ -291,12 +291,14 @@ export default defineComponent({
           <i
             v-if="tooltipKey"
             v-clean-tooltip="{content: t(tooltipKey), triggers: ['hover', 'touch', 'focus']}"
+            v-stripped-aria-label="t(tooltipKey)"
             class="checkbox-info icon icon-info icon-lg"
             :tabindex="isDisabled ? -1 : 0"
           />
           <i
             v-else-if="tooltip"
             v-clean-tooltip="{content: tooltip, triggers: ['hover', 'touch', 'focus']}"
+            v-stripped-aria-label="tooltip"
             class="checkbox-info icon icon-info icon-lg"
             :tabindex="isDisabled ? -1 : 0"
           />

diff --git a/pkg/rancher-components/src/components/Form/LabeledInput/LabeledInput.vue b/pkg/rancher-components/src/components/Form/LabeledInput/LabeledInput.vue
@@ -397,12 +397,14 @@ export default defineComponent({
     </slot>
 
     <slot name="suffix" />
+    <!-- informational tooltip about field -->
     <LabeledTooltip
-      v-if="hasTooltip && !focused"
+      v-if="hasTooltip"
       :hover="hoverTooltip"
       :value="tooltipValue"
       :status="status"
     />
+    <!-- validation tooltip -->
     <LabeledTooltip
       v-if="!!validationMessage"
       :hover="hoverTooltip"

diff --git a/pkg/rancher-components/src/components/LabeledTooltip/LabeledTooltip.vue b/pkg/rancher-components/src/components/LabeledTooltip/LabeledTooltip.vue
@@ -31,6 +31,16 @@ export default defineComponent({
   computed: {
     iconClass(): string {
       return this.status === 'error' ? 'icon-warning' : 'icon-info';
+    },
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    tooltipContent(): {[key: string]: any} | string {
+      if (this.isObject(this.value)) {
+        return {
+          ...{ content: this.value.content, popperClass: [`tooltip-${ status }`] }, ...this.value, triggers: ['hover', 'touch', 'focus']
+        };
+      }
+
+      return this.value ? { content: this.value, triggers: ['hover', 'touch', 'focus'] } : '';
     }
   },
   methods: {
@@ -49,9 +59,11 @@ export default defineComponent({
   >
     <template v-if="hover">
       <i
-        v-clean-tooltip="isObject(value) ? { ...{content: value.content, popperClass: [`tooltip-${status}`]}, ...value } : value"
+        v-clean-tooltip="tooltipContent"
+        v-stripped-aria-label="isObject(value) ? value.content : value"
         :class="{'hover':!value, [iconClass]: true}"
         class="icon status-icon"
+        tabindex="0"
       />
     </template>
     <template v-else>

diff --git a/shell/assets/translations/en-us.yaml b/shell/assets/translations/en-us.yaml
@@ -137,6 +137,9 @@ locale:
 
 nav:
   ariaLabel:
+    clusterIconKeyCombo: Cluster keyboard shortcut combination icon
+    localClusterIcon: Local Cluster icon
+    clusterProvIcon: Cluster {cluster} provider icon
     topLevelMenu: Main menu
     homePage: Home page navigation menu
     cluster: Cluster menu item
@@ -146,7 +149,7 @@ nav:
     configurationApps: Main menu configuration app menu item
     support: Support page link
     about: About page link
-    pinCluster: Pin/Unpin cluster
+    pinCluster: Pin/Unpin {cluster} cluster
     collapseExpand: Collapse/Expand menu group
     productAboutPage: Product about page link
   alt:
@@ -2645,6 +2648,8 @@ glance:
   secretsTable: Full secrets list
 
 clusterBadge:
+  badgeAppearance: Cluster Badge Appearance
+  clusterComment: "Cluster comment - {text}"
   customizeAppearance: Customize Appearance
   addLabel: Add Cluster Badge
   setClusterAppearance: Cluster Appearance

diff --git a/shell/components/ClusterBadge.vue b/shell/components/ClusterBadge.vue
@@ -23,6 +23,7 @@ export default {
     :style="{ backgroundColor: cluster.badge.color, color: cluster.badge.textColor }"
     class="cluster-badge"
     :class="{'cluster-badge-border': showBorders}"
+    :aria-label="t('clusterBadge.clusterComment', { text: cluster.badge?.text || '' })"
   >
     {{ cluster.badge.text }}
   </div>

diff --git a/shell/components/ClusterIconMenu.vue b/shell/components/ClusterIconMenu.vue
@@ -76,6 +76,7 @@ export default {
         style="enable-background:new 0 0 100 100;"
         xml:space="preserve"
       >
+        <title>{{ t('nav.ariaLabel.localClusterIcon') }}</title>
         <g>
           <g>
             <path
@@ -106,10 +107,12 @@ export default {
     <i
       v-if="!routeCombo && cluster.pinned"
       class="icon icon-pin cluster-pin-icon"
+      :alt="t('nav.ariaLabel.pinCluster', { cluster: cluster.nameDisplay })"
     />
     <i
       v-else-if="routeCombo"
       class="icon icon-keyboard_tab key-combo-icon"
+      :alt="t('nav.ariaLabel.clusterIconKeyCombo')"
     />
   </div>
 </template>

diff --git a/shell/components/ClusterProviderIcon.vue b/shell/components/ClusterProviderIcon.vue
@@ -37,7 +37,19 @@ export default {
       {{ cluster.badge.iconText }}
     </div>
     <!-- eslint-disable -->
-    <svg v-else-if="cluster.isLocal && !cluster.isHarvester" class="cluster-local-logo" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
+    <svg 
+      v-else-if="cluster.isLocal && !cluster.isHarvester" 
+      class="cluster-local-logo" 
+      version="1.1" 
+      id="Layer_1" 
+      xmlns="http://www.w3.org/2000/svg" 
+      xmlns:xlink="http://www.w3.org/1999/xlink" 
+      x="0px" 
+      y="0px" 
+      viewBox="0 0 100 100" 
+      style="enable-background:new 0 0 100 100;" 
+      xml:space="preserve">
+      <title>{{ t('nav.ariaLabel.clusterProvIcon', { cluster: 'local' }) }}</title>
       <g>
         <g>
           <path class="rancher-icon-fill" d="M26.0862026,44.4953918H8.6165142c-5.5818157,0-9.3979139-4.6252708-8.4802637-10.1311035l2.858391-17.210701
@@ -60,6 +72,7 @@ export default {
       v-else-if="cluster.providerNavLogo"
       class="cluster-os-logo"
       :src="cluster.providerNavLogo"
+      :alt="t('nav.ariaLabel.clusterProvIcon', { cluster: cluster.nameDisplay })"
     >
   </div>
 </template>

diff --git a/shell/components/form/KeyValue.vue b/shell/components/form/KeyValue.vue
@@ -618,8 +618,10 @@ export default {
               {{ _keyLabel }}
               <i
                 v-if="_protip && !isView && addAllowed"
-                v-clean-tooltip="_protip"
+                v-clean-tooltip="{content: _protip, triggers: ['hover', 'touch', 'focus'] }"
+                v-stripped-aria-label="_protip"
                 class="icon icon-info"
+                tabindex="0"
               />
             </label>
             <label

diff --git a/shell/components/formatter/LiveDate.vue b/shell/components/formatter/LiveDate.vue
@@ -151,7 +151,9 @@ export default {
   </span>
   <span
     v-else-if="showTooltip"
-    v-clean-tooltip="{content: title, placement: tooltipPlacement}"
+    v-clean-tooltip="{content: title, placement: tooltipPlacement, triggers: ['hover', 'touch', 'focus'] }"
+    v-stripped-aria-label="title"
+    tabindex="0"
     class="live-date"
   >
     {{ suffixedLabel }}

diff --git a/shell/components/nav/Pinned.vue b/shell/components/nav/Pinned.vue
@@ -37,7 +37,7 @@ export default {
     class="pin icon"
     :class="{'icon-pin-outlined': !pinned, 'icon-pin': pinned}"
     aria-role="button"
-    :aria-label="`${t('nav.ariaLabel.pinCluster')} ${ cluster.label }`"
+    :aria-label="t('nav.ariaLabel.pinCluster', { cluster: cluster.label })"
     @click.stop.prevent="toggle"
     @keydown.enter.prevent="toggle"
     @keydown.space.prevent="toggle"

diff --git a/shell/directives/strip-html-aria-label.js b/shell/directives/strip-html-aria-label.js
@@ -0,0 +1,19 @@
+/**
+ * Vue directive that strips HTML tags from a string and uses the output as an "aria-label" HTML attribute
+ */
+export default {
+  mounted(el, binding) {
+    if (typeof binding.value === 'string') {
+      const htmlStrippedAriaLabelString = binding.value.replace(/<\/?[^>]+(>|$)/g, '');
+
+      el.setAttribute('aria-label', htmlStrippedAriaLabelString);
+    }
+  },
+  updated(el, binding) {
+    if (typeof binding.value === 'string') {
+      const htmlStrippedAriaLabelString = binding.value.replace(/<\/?[^>]+(>|$)/g, '');
+
+      el.setAttribute('aria-label', htmlStrippedAriaLabelString);
+    }
+  }
+};
diff --git a/shell/edit/workload/index.vue b/shell/edit/workload/index.vue
@@ -262,8 +262,10 @@ export default {
                 <h3>
                   {{ t('workload.container.ports.expose') }}
                   <i
-                    v-clean-tooltip="t('workload.container.ports.toolTip')"
+                    v-clean-tooltip="{content: t('workload.container.ports.toolTip'), triggers: ['hover', 'touch', 'focus'] }"
+                    v-stripped-aria-label="t('workload.container.ports.toolTip')"
                     class="icon icon-info"
+                    tabindex="0"
                   />
                 </h3>
                 <p class="padded">

diff --git a/shell/initialize/install-directives.js b/shell/initialize/install-directives.js
@@ -10,6 +10,7 @@ import cleanTooltipDirective from '@shell/directives/clean-tooltip';
 import positiveIntNumberDirective from '@shell/directives/positive-int-number.js';
 import trimWhitespaceDirective from '@shell/directives/trim-whitespace';
 import intNumberDirective from '@shell/directives/int-number';
+import htmlStrippedAriaLabelDirective from '@shell/directives/strip-html-aria-label';
 
 /**
  * Prevent extensions from overriding existing directives
@@ -47,6 +48,7 @@ function addDirectives(vueApp) {
   vueApp.directive('focus', focusDirective);
   vueApp.directive('intNumber', intNumberDirective);
   vueApp.directive('positiveIntNumber', positiveIntNumberDirective);
+  vueApp.directive('stripped-aria-label', htmlStrippedAriaLabelDirective);
 }
 
 /**

diff --git a/shell/pages/c/_cluster/explorer/ConfigBadge.vue b/shell/pages/c/_cluster/explorer/ConfigBadge.vue
@@ -27,16 +27,14 @@ export default {
   <div class="config-badge">
     <div>
       <button
+        v-clean-tooltip="{content: tooltip, triggers: ['hover', 'touch', 'focus'] }"
+        v-stripped-aria-label="tooltip"
         class="badge-install btn btn-sm role-secondary"
         data-testid="add-custom-cluster-badge"
         role="button"
-        tabindex="0"
         @click="customBadgeDialog"
       >
-        <i
-          v-clean-tooltip="tooltip"
-          class="icon icon-brush-icon"
-        />
+        <i class="icon icon-brush-icon" />
       </button>
     </div>
   </div>

diff --git a/shell/pages/c/_cluster/explorer/index.vue b/shell/pages/c/_cluster/explorer/index.vue
@@ -673,11 +673,13 @@ export default {
       </div>
       <div data-testid="created__label">
         <label>{{ t('glance.created') }}: </label>
-        <span><LiveDate
-          :value="currentCluster.metadata.creationTimestamp"
-          :add-suffix="true"
-          :show-tooltip="true"
-        /></span>
+        <span>
+          <LiveDate
+            :value="currentCluster.metadata.creationTimestamp"
+            :add-suffix="true"
+            :show-tooltip="true"
+          />
+        </span>
       </div>
       <div :style="{'flex':1}" />
       <div v-if="showClusterTools">

diff --git a/storybook/.storybook/preview.ts b/storybook/.storybook/preview.ts
@@ -10,6 +10,7 @@ import cleanTooltipDirective  from '@shell/directives/clean-tooltip';
 import ShortKey from '@shell/plugins/shortkey';
 import cleanHtmlDirective from '@shell/directives/clean-html';
 import trimWhitespaceDirective from '@shell/directives/trim-whitespace';
+import htmlStrippedAriaLabelDirective from '@shell/directives/strip-html-aria-label';
 import store from './store'
 
 // i18n
@@ -21,6 +22,7 @@ setup((vueApp) => {
   vueApp.directive('clean-html', cleanHtmlDirective);
   vueApp.directive('clean-tooltip', cleanTooltipDirective);
   vueApp.directive('trim-whitespace', trimWhitespaceDirective);
+  vueApp.directive('stripped-aria-label', htmlStrippedAriaLabelDirective);
 
   vueApp.component('v-select', vSelect);
   vueApp.use(ShortKey, { prevent: ['input', 'textarea', 'select'] });