@rancher/shell 3.0.2 → 3.0.4

package/assets/styles/themes/_light.scss

@@ -26,7 +26,6 @@ $disabled  : $medium;
 $primary         : #3D98D3;
 $secondary       : $darker;
 $link            : #3D98D3;
-$keyboard-focus  : #{darken($primary, 10%)};
 
 // Status colors
 $success         : #5D995D;
@@ -54,7 +53,7 @@ BODY, .theme-light {
   --primary-border             : #{$primary};
   --primary-banner-bg          : #{rgba($primary, 0.15)};
   --primary-light-bg           : #{rgba($primary, 0.05)};
-  --primary-keyboard-focus     : #{$keyboard-focus};
+  --primary-keyboard-focus     : hsl(from var(--primary) h s calc(l - 10));
 
 
   .text-primary {

package/assets/styles/themes/_suse.scss

@@ -12,6 +12,7 @@
   --primary-border             : #{$primary};
   --primary-banner-bg          : #{rgba($primary, 0.15)};
   --primary-light-bg           : #{rgba($primary, 0.05)};
+  --primary-keyboard-focus     : hsl(from var(--primary) h s calc(l - 10));
 
   --info                    : #{$info};
   --info-text               : #{contrast-color($info)};

package/assets/translations/en-us.yaml

@@ -239,6 +239,7 @@ nav:
     label: Resource Search
     toolTip: Resource Search {key}
     placeholder: Type to search for a resource...
+    filteringDescription: Using this input will immediately filter the results in the list below
   header:
     setLoginPage: Set as login page
     restoreCards: Restore hidden cards
@@ -545,9 +546,6 @@ authConfig:
     starttls:
       label: Start TLS
       tip: Upgrades non-encrypted connections by wrapping with TLS during the connection process. Can not be used in conjunction with TLS.
-    searchUsingServiceAccount: 
-      label: Enable Service Account Search
-      tip: When enabled, Rancher will use the service account instead of the user account to search for users and groups.
     tls: TLS
     userEnabledAttribute: User Enabled Attribute
     userMemberAttribute: User Member Attribute
@@ -2523,6 +2521,7 @@ fleet:
       placeholder: "Paste in one or more certificates, starting with -----BEGIN CERTIFICATE----"
     paths:
       label: Paths
+      ariaLabel: Enter path for Git Repo
       placeholder: e.g. /directory/in/your/repo
       addLabel: Add Path
       empty: The root of the repo is used by default. Multiple different directories can be provided.
@@ -2779,6 +2778,7 @@ hpa:
       label: Metric Name
       placeholder: e.g. packets-per-second
     selector:
+      header: Metric Selector
       label: Add Selector
   metricTarget:
     averageVal:
@@ -5138,6 +5138,9 @@ resourceDetail:
     stage: "Stage from {subtype} {name}"
     view: "{subtype} {name}"
   masthead:
+    ariaLabel:
+      favoriteAction: Add {resource} to your starred/favorites list
+      unfavoriteAction: Remove {resource} from your starred/favorites list
     age: Age
     createdBy: Created by
     restartCount: Pod Restarts
@@ -5490,6 +5493,18 @@ setup:
   welcome: Welcome to {vendor}!
 
 sortableTable:
+  ariaLabel:
+    firstPageBtn: First page of results
+    prevPageBtn: Previous page of results
+    nextPageBtn: Next page of results
+    lastPageBtn: Last page of results
+  alt:
+    firstPageBtn: First page of results icon
+    prevPageBtn: Previous page of results icon
+    nextPageBtn: Next page of results icon
+    lastPageBtn: Last page of results icon
+    sortingIconDesc: Table header descending sort icon
+    sortingIconAsc: Table header ascending sort icon
   genericGroupCheckbox: Table group selection checkbox
   genericRowCheckbox: Table row selection checkbox for item {item}
   tableActionsLabel: More actions - { resource }
@@ -5518,6 +5533,7 @@ sortableTable:
   searchLabel: Filter table results
   in: in
   addFilter: Add Filter
+  filteringDescription: Using this input will immediately filter the results in the table below
   filterFor: Filter for...
   selectCol: Select a column
   resetFilters: Reset

package/chart/monitoring/prometheus/index.vue

@@ -341,22 +341,25 @@ export default {
         </div>
         <div class="row">
           <div class="col span-12">
-            <div class="mb-5 mt-5">
-              <h4 class=" mb-10">
-                {{ t('monitoring.prometheus.storage.selector') }}
-              </h4>
-            </div>
-            <Banner
-              color="warning"
-              :label="t('monitoring.prometheus.storage.selectorWarning', {}, true)"
-            />
             <MatchExpressions
               :initial-empty-row="false"
               :mode="mode"
               :value="matchExpressions"
               :show-remove="false"
               @update:value="matchChanged($event)"
-            />
+            >
+              <template #header>
+                <div class="mb-5 mt-5">
+                  <h4 class=" mb-10">
+                    {{ t('monitoring.prometheus.storage.selector') }}
+                  </h4>
+                </div>
+                <Banner
+                  color="warning"
+                  :label="t('monitoring.prometheus.storage.selectorWarning', {}, true)"
+                />
+              </template>
+            </MatchExpressions>
           </div>
         </div>
       </template>

package/components/ButtonGroup.vue

@@ -77,6 +77,9 @@ export default {
       const tooltip = opt.tooltipKey ? this.t(opt.tooltipKey) : opt.tooltip;
 
       return ariaLabel || tooltip || label || undefined;
+    },
+    isPressed(opt) {
+      return this.value === opt.value;
     }
   }
 };
@@ -97,6 +100,7 @@ export default {
       :disabled="disabled || opt.disabled"
       role="button"
       :aria-label="actionAriaLabel(opt)"
+      :aria-pressed="isPressed(opt)"
       @click="change(opt.value)"
     >
       <slot

package/components/LocaleSelector.vue

@@ -119,6 +119,7 @@ export default {
                 tabindex="0"
                 role="menuitem"
                 class="hand"
+                :lang="name"
                 @click.stop="switchLocale(name)"
                 @keyup.enter.stop="switchLocale(name)"
                 @keyup.space.stop="switchLocale(name)"
@@ -134,6 +135,7 @@ export default {
       <Select
         :value="selectedOption"
         :options="localesOptions"
+        :is-lang-select="true"
         @update:value="switchLocale($event)"
       />
     </div>

package/components/PromptRemove.vue

@@ -354,7 +354,7 @@ export default {
         <div class="mb-10">
           <template v-if="!hasCustomRemove">
             {{ t('promptRemove.attemptingToRemove', { type }) }} <span
-              v-clean-html="resourceNames(names, t)"
+              v-clean-html="resourceNames(names, null, t)"
             />
           </template>
 

package/components/SortableTable/THead.vue

@@ -282,10 +282,12 @@ export default {
               <i
                 v-if="isCurrent(col) && !descending"
                 class="icon icon-sort-down icon-stack-1x"
+                :alt="t('sortableTable.alt.sortingIconDesc')"
               />
               <i
                 v-if="isCurrent(col) && descending"
                 class="icon icon-sort-up icon-stack-1x"
+                :alt="t('sortableTable.alt.sortingIconAsc')"
               />
             </span>
           </div>

package/components/SortableTable/index.vue

@@ -1,7 +1,8 @@
 <script>
 import { mapGetters } from 'vuex';
-import { defineAsyncComponent, useTemplateRef, onMounted, onBeforeUnmount } from 'vue';
+import { defineAsyncComponent, ref, onMounted, onBeforeUnmount } from 'vue';
 import day from 'dayjs';
+import semver from 'semver';
 import isEmpty from 'lodash/isEmpty';
 import { dasherize, ucFirst } from '@shell/utils/string';
 import { get, clone } from '@shell/utils/object';
@@ -24,6 +25,7 @@ import { getParent } from '@shell/utils/dom';
 import { FORMATTERS } from '@shell/components/SortableTable/sortable-config';
 import ButtonMultiAction from '@shell/components/ButtonMultiAction.vue';
 import ActionMenu from '@shell/components/ActionMenuShell.vue';
+import { getVersionInfo } from '@shell/utils/version';
 
 // Uncomment for table performance debugging
 // import tableDebug from './debug';
@@ -528,7 +530,7 @@ export default {
     },
   },
   setup(_props, { emit }) {
-    const table = useTemplateRef('table');
+    const table = ref(null);
 
     const handleEnterKey = (event) => {
       if (event.key === 'Enter' && !event.target?.classList?.contains('checkbox-custom')) {
@@ -543,6 +545,8 @@ export default {
     onBeforeUnmount(() => {
       table.value.removeEventListener('keyup', handleEnterKey);
     });
+
+    return { table };
   },
 
   created() {
@@ -763,6 +767,12 @@ export default {
       });
 
       return rows;
+    },
+
+    featureDropdownMenu() {
+      const { fullVersion } = getVersionInfo(this.$store);
+
+      return semver.gte(semver.coerce(fullVersion).version, '2.11.0');
     }
   },
 
@@ -1081,6 +1091,8 @@ export default {
                 :class="{[bulkActionClass]:true}"
                 :disabled="!act.enabled"
                 :data-testid="componentTestid + '-' + act.action"
+                role="button"
+                :aria-label="act.label"
                 @click="applyTableAction(act, null, $event)"
                 @keydown.enter.stop
                 @mouseover="setBulkActionOfInterest(act)"
@@ -1234,13 +1246,21 @@ export default {
               </div>
             </div>
           </div>
-          <input
+          <p
             v-else-if="search"
+            id="describe-filter-sortable-table"
+            hidden
+          >
+            {{ t('sortableTable.filteringDescription') }}
+          </p>
+          <input
+            v-if="search"
             ref="searchQuery"
             v-model="eventualSearchQuery"
             type="search"
             class="input-sm search-box"
             :aria-label="t('sortableTable.searchLabel')"
+            aria-describedby="describe-filter-sortable-table"
             :placeholder="t('sortableTable.search')"
           >
           <slot name="header-button" />
@@ -1477,11 +1497,27 @@ export default {
                     :row="row.row"
                     :index="i"
                   >
-                    <ActionMenu
-                      :resource="row.row"
-                      :data-testid="componentTestid + '-' + i + '-action-button'"
-                      :button-aria-label="t('sortableTable.tableActionsLabel', { resource: row?.row?.id || '' })"
-                    />
+                    <template v-if="featureDropdownMenu">
+                      <ActionMenu
+                        :resource="row.row"
+                        :data-testid="componentTestid + '-' + i + '-action-button'"
+                        :button-aria-label="t('sortableTable.tableActionsLabel', { resource: row?.row?.id || '' })"
+                      />
+                    </template>
+                    <template v-else>
+                      <ButtonMultiAction
+                        :id="`actionButton+${i}+${(row.row && row.row.name) ? row.row.name : ''}`"
+                        :ref="`actionButton${i}`"
+                        aria-haspopup="true"
+                        aria-expanded="false"
+                        :aria-label="t('sortableTable.tableActionsLabel', { resource: row?.row?.id || '' })"
+                        :data-testid="componentTestid + '-' + i + '-action-button'"
+                        :borderless="true"
+                        @click="handleActionButtonClick(i, $event)"
+                        @keyup.enter="handleActionButtonClick(i, $event)"
+                        @keyup.space="handleActionButtonClick(i, $event)"
+                      />
+                    </template>
                   </slot>
                 </td>
               </tr>
@@ -1532,18 +1568,28 @@ export default {
         class="btn btn-sm role-multi-action"
         data-testid="pagination-first"
         :disabled="page == 1 || loading"
+        role="button"
+        :aria-label="t('sortableTable.ariaLabel.firstPageBtn')"
         @click="goToPage('first')"
       >
-        <i class="icon icon-chevron-beginning" />
+        <i
+          class="icon icon-chevron-beginning"
+          :alt="t('sortableTable.alt.firstPageBtn')"
+        />
       </button>
       <button
         type="button"
         class="btn btn-sm role-multi-action"
         data-testid="pagination-prev"
         :disabled="page == 1 || loading"
+        role="button"
+        :aria-label="t('sortableTable.ariaLabel.prevPageBtn')"
         @click="goToPage('prev')"
       >
-        <i class="icon icon-chevron-left" />
+        <i
+          class="icon icon-chevron-left"
+          :alt="t('sortableTable.alt.prevPageBtn')"
+        />
       </button>
       <span>
         {{ pagingDisplay }}
@@ -1553,18 +1599,28 @@ export default {
         class="btn btn-sm role-multi-action"
         data-testid="pagination-next"
         :disabled="page == totalPages || loading"
+        role="button"
+        :aria-label="t('sortableTable.ariaLabel.nextPageBtn')"
         @click="goToPage('next')"
       >
-        <i class="icon icon-chevron-right" />
+        <i
+          class="icon icon-chevron-right"
+          :alt="t('sortableTable.alt.nextPageBtn')"
+        />
       </button>
       <button
         type="button"
         class="btn btn-sm role-multi-action"
         data-testid="pagination-last"
         :disabled="page == totalPages || loading"
+        role="button"
+        :aria-label="t('sortableTable.ariaLabel.lastPageBtn')"
         @click="goToPage('last')"
       >
-        <i class="icon icon-chevron-end" />
+        <i
+          class="icon icon-chevron-end"
+          :alt="t('sortableTable.alt.lastPageBtn')"
+        />
       </button>
     </div>
     <button

package/components/StatusBadge.vue

@@ -19,10 +19,16 @@ const STATUS = {
   }
 };
 
-const { status = 'success', label } = defineProps<{
-  status?: 'success' | 'warning' | 'info' | 'error',
-  label?: string
-}>();
+withDefaults(
+  defineProps<{
+    status?: 'success' | 'warning' | 'info' | 'error',
+    label?: string
+  }>(),
+  {
+    status: 'success',
+    label:  '',
+  }
+);
 
 </script>
 <template>

package/components/auth/Principal.vue

@@ -98,9 +98,9 @@ export default {
       >
         <table>
           <tbody>
-            <tr><td>{{ t('principal.name') }}: </td><td>{{ principal.name || principal.loginName }}</td></tr>
-            <tr><td>{{ t('principal.loginName') }}: </td><td>{{ principal.loginName }}</td></tr>
-            <tr><td>{{ t('principal.type') }}: </td><td>{{ principal.displayType }}</td></tr>
+            <tr><th>{{ t('principal.name') }}: </th><td>{{ principal.name || principal.loginName }}</td></tr>
+            <tr><th>{{ t('principal.loginName') }}: </th><td>{{ principal.loginName }}</td></tr>
+            <tr><th>{{ t('principal.type') }}: </th><td>{{ principal.displayType }}</td></tr>
           </tbody>
         </table>
       </div>
@@ -164,6 +164,12 @@ export default {
     grid-template-rows: auto math.div($size, 2);
     column-gap: 10px;
 
+    th {
+      text-align: left;
+      font-weight: normal;
+      padding-right: 10px;
+    }
+
     &.showLabels {
       grid-template-areas:
         "avatar name";

package/components/form/ArrayList.vue

@@ -94,6 +94,10 @@ export default {
       // we only want functions in the rules array
       validator: (rules) => rules.every((rule) => ['function'].includes(typeof rule))
     },
+    a11yLabel: {
+      type:    String,
+      default: '',
+    },
   },
   data() {
     const input = (Array.isArray(this.value) ? this.value : []).slice();
@@ -316,6 +320,7 @@ export default {
                 :data-testid="`input-${idx}`"
                 :placeholder="valuePlaceholder"
                 :disabled="isView || disabled"
+                :aria-label="a11yLabel ? a11yLabel : undefined"
                 @paste="onPaste(idx, $event)"
               >
             </slot>
@@ -336,6 +341,8 @@ export default {
               :disabled="isView"
               class="btn role-link"
               :data-testid="`remove-item-${idx}`"
+              :aria-label="`${_removeLabel} ${idx + 1}`"
+              role="button"
               @click="remove(row, idx)"
             >
               {{ _removeLabel }}
@@ -368,6 +375,8 @@ export default {
           class="btn role-tertiary add"
           :disabled="loading || disableAdd"
           data-testid="array-list-button"
+          :aria-label="_addLabel"
+          role="button"
           @click="add()"
         >
           <i

package/components/form/KeyValue.vue

@@ -823,7 +823,7 @@ export default {
                   type="button"
                   role="button"
                   :disabled="isView || isProtected(row.key) || disabled"
-                  :aria-label="removeLabel || t('generic.remove')"
+                  :aria-label="`${removeLabel || t('generic.remove')} ${ i+1 }`"
                   class="btn role-link"
                   @click="remove(i)"
                 >

package/components/form/MatchExpressions.vue

@@ -242,6 +242,10 @@ export default {
 
 <template>
   <div>
+    <slot
+      v-if="rules.length"
+      name="header"
+    />
     <button
       v-if="showRemove && !isView"
       type="button"

package/components/form/Select.vue

@@ -87,6 +87,10 @@ export default {
       type:    Boolean,
       default: null
     },
+    isLangSelect: {
+      type:    Boolean,
+      default: false
+    },
   },
 
   methods: {
@@ -289,8 +293,13 @@ export default {
       @open="resizeHandler"
       @option:created="(e) => $emit('createdListItem', e)"
     >
-      <template #option="option">
-        <div @mousedown="(e) => onClickOption(option, e)">
+      <template
+        #option="option"
+      >
+        <div
+          :lang="isLangSelect ? option.value : undefined"
+          @mousedown="(e) => onClickOption(option, e)"
+        >
           {{ getOptionLabel(option.label) }}
         </div>
       </template>

package/components/nav/Favorite.vue

@@ -10,6 +10,9 @@ export default {
   computed: {
     isFavorite() {
       return this.$store.getters['type-map/isFavorite'](this.resource);
+    },
+    ariaLabel() {
+      return this.t(`resourceDetail.masthead.ariaLabel.${ this.isFavorite ? 'unfavoriteAction' : 'favoriteAction' }`, { resource: this.resource });
     }
   },
 
@@ -28,10 +31,11 @@ export default {
 <template>
   <i
     :tabindex="0"
-    :aria-checked="!!isFavorite"
+    :aria-pressed="!!isFavorite"
     class="favorite icon"
     :class="{'icon-star-open': !isFavorite, 'icon-star': isFavorite}"
     aria-role="button"
+    :aria-label="ariaLabel"
     @click.stop.prevent="toggle"
     @keydown.enter.prevent="toggle"
     @keydown.space.prevent="toggle"

package/components/nav/Group.vue

@@ -403,6 +403,10 @@ export default {
           padding: 10px 7px 9px 7px !important;
         }
       }
+
+      &:deep() .type-link > .label {
+        padding-left: 10px;
+      }
     }
 
     &:not(.depth-0) {

package/components/nav/Jump.vue

@@ -71,6 +71,12 @@ export default {
 
 <template>
   <div>
+    <p
+      id="describe-filter-resource-search"
+      hidden
+    >
+      {{ t('nav.resourceSearch.filteringDescription') }}
+    </p>
     <input
       ref="input"
       v-model="value"
@@ -78,6 +84,7 @@ export default {
       class="search"
       role="textbox"
       :aria-label="t('nav.resourceSearch.label')"
+      aria-describedby="describe-filter-resource-search"
       @keyup.esc="$emit('closeSearch')"
     >
     <div class="results">

package/components/nav/Pinned.vue

@@ -36,7 +36,7 @@ export default {
     :aria-checked="!!pinned"
     class="pin icon"
     :class="{'icon-pin-outlined': !pinned, 'icon-pin': pinned}"
-    aria-role="button"
+    role="button"
     :aria-label="t('nav.ariaLabel.pinCluster', { cluster: cluster.label })"
     @click.stop.prevent="toggle"
     @keydown.enter.prevent="toggle"

package/components/nav/Type.vue

@@ -122,6 +122,7 @@ export default {
         :aria-label="type.labelKey ? t(type.labelKey) : (type.labelDisplay || type.label)"
         :href="href"
         class="type-link"
+        :aria-current="isActive ? 'page' : undefined"
         @click="selectType(); navigate($event);"
         @mouseenter="setNear(true)"
         @mouseleave="setNear(false)"

package/config/router/routes.js

@@ -23,6 +23,7 @@ const interopDefault = (promise) => promise.then((page) => page.default || page)
  */
 export default [
   {
+    name:      'root',
     path:      '/',
     component: () => interopDefault(import('@shell/pages/index.vue')),
     meta:      { requiresAuthentication: true },