@rancher/shell 3.0.2-rc.5 → 3.0.2

package/components/nav/TopLevelMenu.vue

@@ -14,7 +14,6 @@ import { SETTING } from '@shell/config/settings';
 import { getProductFromRoute } from '@shell/utils/router';
 import { isRancherPrime } from '@shell/config/version';
 import Pinned from '@shell/components/nav/Pinned';
-import { getGlobalBannerFontSizes } from '@shell/utils/banners';
 import { TopLevelMenuHelperPagination, TopLevelMenuHelperLegacy } from '@shell/components/nav/TopLevelMenu.helper';
 import { debounce } from 'lodash';
 import { sameContents } from '@shell/utils/array';
@@ -82,15 +81,6 @@ export default {
       return this.$store.getters['prefs/get'](PINNED_CLUSTERS);
     },
 
-    sideMenuStyle() {
-      const globalBannerSettings = getGlobalBannerFontSizes(this.$store);
-
-      return {
-        marginBottom: globalBannerSettings?.footerFont,
-        marginTop:    globalBannerSettings?.headerFont
-      };
-    },
-
     showClusterSearch() {
       return this.allClustersCount > this.maxClustersToShow;
     },
@@ -483,7 +473,6 @@ export default {
         data-testid="side-menu"
         class="side-menu"
         :class="{'menu-open': shown, 'menu-close':!shown}"
-        :style="sideMenuStyle"
         tabindex="-1"
         role="navigation"
         :aria-label="t('nav.ariaLabel.topLevelMenu')"
@@ -1002,7 +991,7 @@ export default {
       }
     }
 
-    position: fixed;
+    position: absolute;
     top: 0;
     left: 0px;
     bottom: 0;

package/components/nav/WindowManager/ContainerLogs.vue

@@ -132,19 +132,20 @@ export default {
 
   data() {
     return {
-      container:       this.initialContainer || this.pod?.defaultContainerName,
-      socket:          null,
-      isOpen:          false,
-      isFollowing:     true,
-      scrollThreshold: 80,
-      timestamps:      this.$store.getters['prefs/get'](LOGS_TIME),
-      wrap:            this.$store.getters['prefs/get'](LOGS_WRAP),
-      previous:        false,
-      search:          '',
-      backlog:         [],
-      lines:           [],
-      now:             new Date(),
-      logItem:         shallowRef(LogItem),
+      container:           this.initialContainer || this.pod?.defaultContainerName,
+      socket:              null,
+      isOpen:              false,
+      isFollowing:         true,
+      scrollThreshold:     80,
+      timestamps:          this.$store.getters['prefs/get'](LOGS_TIME),
+      wrap:                this.$store.getters['prefs/get'](LOGS_WRAP),
+      previous:            false,
+      search:              '',
+      backlog:             [],
+      lines:               [],
+      now:                 new Date(),
+      logItem:             shallowRef(LogItem),
+      isContainerMenuOpen: false
     };
   },
 
@@ -302,6 +303,14 @@ export default {
   },
 
   methods: {
+    openContainerMenu() {
+      this.isContainerMenuOpen = true;
+    },
+
+    closeContainerMenu() {
+      this.isContainerMenuOpen = false;
+    },
+
     async connect() {
       if ( this.socket ) {
         await this.socket.disconnect();
@@ -581,7 +590,10 @@ export default {
         </Select>
         <div class="log-action log-action-group ml-5">
           <button
-            class="btn bg-primary wm-btn"
+            class="btn role-primary wm-btn"
+            role="button"
+            :aria-label="t('wm.containerLogs.follow')"
+            :aria-disabled="isFollowing"
             :disabled="isFollowing"
             @click="follow"
           >
@@ -592,7 +604,9 @@ export default {
             <i class="wm-btn-small icon icon-chevron-end" />
           </button>
           <button
-            class="btn bg-primary wm-btn"
+            class="btn role-primary wm-btn"
+            role="button"
+            :aria-label="t('wm.containerLogs.clear')"
             @click="clear"
           >
             <t
@@ -603,6 +617,8 @@ export default {
           </button>
           <AsyncButton
             mode="download"
+            role="button"
+            :aria-label="t('asyncButton.download.action')"
             @click="download"
           />
         </div>
@@ -620,54 +636,72 @@ export default {
         </div>
 
         <div class="log-action log-action-group ml-5">
-          <v-dropdown
-            :triggers="['click']"
-            placement="top"
-            popperClass="containerLogsDropdown"
+          <div
+            role="menu"
+            tabindex="0"
+            :aria-label="t('wm.containerLogs.logActionMenu')"
+            @click="openContainerMenu"
+            @blur.capture="closeContainerMenu"
+            @keyup.enter="openContainerMenu"
+            @keyup.space="openContainerMenu"
           >
-            <button
-              class="btn bg-primary btn-cog"
-              role="button"
-              :aria-label="t('wm.containerLogs.options')"
+            <v-dropdown
+              :triggers="[]"
+              :shown="isContainerMenuOpen"
+              placement="top"
+              popperClass="containerLogsDropdown"
+              :autoHide="false"
+              :flip="false"
+              :container="false"
+              @focus.capture="openContainerMenu"
             >
-              <i
-                class="icon icon-gear"
-                :alt="t('wm.containerLogs.options')"
-              />
-              <i
-                class="icon icon-chevron-up"
-                :alt="t('wm.containerLogs.expand')"
-              />
-            </button>
-
-            <template #popper>
-              <div class="filter-popup">
-                <LabeledSelect
-                  v-model:value="range"
-                  class="range"
-                  :label="t('wm.containerLogs.range.label')"
-                  :options="rangeOptions"
-                  :clearable="false"
-                  placement="top"
-                  @update:value="toggleRange($event)"
+              <button
+                class="btn role-primary btn-cog"
+                role="button"
+                :aria-label="t('wm.containerLogs.options')"
+              >
+                <i
+                  class="icon icon-gear"
+                  :alt="t('wm.containerLogs.options')"
                 />
-                <div>
-                  <Checkbox
-                    :label="t('wm.containerLogs.wrap')"
-                    :value="wrap"
-                    @update:value="toggleWrap "
-                  />
-                </div>
-                <div>
-                  <Checkbox
-                    :label="t('wm.containerLogs.timestamps')"
-                    :value="timestamps"
-                    @update:value="toggleTimestamps"
+                <i
+                  class="icon icon-chevron-up"
+                  :alt="t('wm.containerLogs.expand')"
+                />
+              </button>
+
+              <template #popper>
+                <div class="filter-popup">
+                  <LabeledSelect
+                    v-model:value="range"
+                    class="range"
+                    :label="t('wm.containerLogs.range.label')"
+                    :options="rangeOptions"
+                    :clearable="false"
+                    placement="top"
+                    role="menuitem"
+                    @update:value="toggleRange($event)"
                   />
+                  <div>
+                    <Checkbox
+                      :label="t('wm.containerLogs.wrap')"
+                      :value="wrap"
+                      role="menuitem"
+                      @update:value="toggleWrap"
+                    />
+                  </div>
+                  <div>
+                    <Checkbox
+                      :label="t('wm.containerLogs.timestamps')"
+                      :value="timestamps"
+                      role="menuitem"
+                      @update:value="toggleTimestamps"
+                    />
+                  </div>
                 </div>
-              </div>
-            </template>
-          </v-dropdown>
+              </template>
+            </v-dropdown>
+          </div>
         </div>
 
         <div class="log-action log-action-group ml-5">
@@ -675,6 +709,8 @@ export default {
             v-model="search"
             class="input-sm"
             type="search"
+            role="textbox"
+            :aria-label="t('wm.containerLogs.searchLogs')"
             :placeholder="t('wm.containerLogs.search')"
           >
         </div>
@@ -768,6 +804,7 @@ export default {
       border: 0 !important;
       min-height: 30px;
       line-height: 30px;
+      margin: 0 2px;
     }
 
     > input {
@@ -799,6 +836,7 @@ export default {
     text-overflow : ellipsis;
     overflow      : hidden;
     white-space   : nowrap;
+    padding-left: 4px;
   }
 
   .status {

package/components/nav/WindowManager/ContainerShell.vue

@@ -74,22 +74,24 @@ export default {
 
   data() {
     return {
-      container:      this.initialContainer || this.pod?.defaultContainerName,
-      socket:         null,
-      terminal:       null,
-      fitAddon:       null,
-      searchAddon:    null,
-      webglAddon:     null,
-      canvasAddon:    null,
-      isOpen:         false,
-      isOpening:      false,
-      backlog:        [],
-      node:           null,
-      keepAliveTimer: null,
-      errorMsg:       '',
-      backupShells:   ['linux', 'windows'],
-      os:             undefined,
-      retries:        0
+      container:         this.initialContainer || this.pod?.defaultContainerName,
+      socket:            null,
+      terminal:          null,
+      fitAddon:          null,
+      searchAddon:       null,
+      webglAddon:        null,
+      canvasAddon:       null,
+      isOpen:            false,
+      isOpening:         false,
+      backlog:           [],
+      node:              null,
+      keepAliveTimer:    null,
+      errorMsg:          '',
+      backupShells:      ['linux', 'windows'],
+      os:                undefined,
+      retries:           0,
+      currFocusedElem:   undefined,
+      xtermContainerRef: undefined
     };
   },
 
@@ -106,7 +108,20 @@ export default {
     containerChoices() {
       return this.pod?.spec?.containers?.map((x) => x.name) || [];
     },
-    ...mapGetters({ t: 'i18n/t' })
+
+    ...mapGetters({ t: 'i18n/t' }),
+
+    isXtermFocused() {
+      return this.currFocusedElem === this.terminal?.textarea;
+    },
+
+    isXtermContainerFocused() {
+      return this.currFocusedElem === this.xtermContainerRef;
+    },
+
+    xTermContainerTabIndex() {
+      return this.isXtermFocused ? 0 : -1;
+    }
   },
 
   watch: {
@@ -121,14 +136,33 @@ export default {
     width() {
       this.fit();
     },
+
+    isXtermContainerFocused: {
+      handler(neu) {
+        const shellEl = this.terminal?.textarea;
+
+        if (shellEl) {
+          shellEl.tabIndex = neu ? -1 : 0;
+        }
+      },
+      immediate: true
+    }
   },
 
   beforeUnmount() {
+    document.removeEventListener('keyup', this.handleKeyPress);
+    this.$refs?.containerShell?.$el?.removeEventListener('focusin', this.focusInHandler);
+    this.$refs?.xterm.removeEventListener('focusout', this.focusOutHandler);
+
     clearInterval(this.keepAliveTimer);
     this.cleanup();
   },
 
   async mounted() {
+    document.addEventListener('keyup', this.handleKeyPress);
+    this.$refs?.containerShell?.$el?.addEventListener('focusin', this.focusInHandler);
+    this.$refs?.xterm.addEventListener('focusout', this.focusOutHandler);
+
     const nodeId = this.pod.spec?.nodeName;
 
     try {
@@ -146,9 +180,36 @@ export default {
     this.keepAliveTimer = setInterval(() => {
       this.fit();
     }, 60 * 1000);
+
+    this.xtermContainerRef = this.$refs?.xterm;
   },
 
   methods: {
+    focusInHandler(ev) {
+      this.currFocusedElem = ev.target;
+    },
+
+    focusOutHandler(ev) {
+      this.currFocusedElem = undefined;
+    },
+
+    handleKeyPress(ev) {
+      ev.preventDefault();
+      ev.stopPropagation();
+
+      // make focus leave the shell for it's parent container so that we can tab
+      const didPressEscapeSequence = ev.shiftKey && ev.code === 'Escape';
+
+      if (this.isXtermFocused && didPressEscapeSequence) {
+        this.$refs.xterm.focus();
+      }
+
+      // if parent container is focused and we press a trigger, focus goes to the shell inside
+      if (this.isXtermContainerFocused && (ev.code === 'Enter' || ev.code === 'Space')) {
+        this.terminal?.textarea?.focus();
+      }
+    },
+
     async setupTerminal() {
       const docStyle = getComputedStyle(document.querySelector('body'));
       const xterm = await import(/* webpackChunkName: "xterm" */ 'xterm');
@@ -388,6 +449,7 @@ export default {
 
 <template>
   <Window
+    ref="containerShell"
     :active="active"
     :before-close="cleanup"
     class="container-shell"
@@ -412,7 +474,9 @@ export default {
       </Select>
       <div class="pull-left ml-5">
         <button
-          class="btn btn-sm bg-primary"
+          class="btn btn-sm role-primary"
+          role="button"
+          :aria-label="t('wm.containerShell.clear')"
           @click="clear"
         >
           <t
@@ -439,6 +503,12 @@ export default {
           class="text-error"
           data-testid="shell-status-disconnected"
         />
+        <span
+          v-show="isXtermFocused"
+          class="escape-text"
+          role="alert"
+          :aria-describedby="t('wm.containerShell.escapeText')"
+        >{{ t('wm.containerShell.escapeText') }}</span>
       </div>
     </template>
     <template #body>
@@ -448,6 +518,7 @@ export default {
       >
         <div
           ref="xterm"
+          :tabindex="xTermContainerTabIndex"
           class="shell-body"
         />
         <resize-observer @notify="fit" />
@@ -466,6 +537,11 @@ export default {
     animation: flasher 2.5s linear infinite;
   }
 
+  .escape-text {
+    font-size: 12px;
+    margin-left: 20px;
+  }
+
   @keyframes flasher {
     50% {
       opacity: 0;
@@ -483,6 +559,11 @@ export default {
   .shell-body {
     padding: calc(2 * var(--outline-width));
     height: 100%;
+
+    &:focus-visible, &:focus {
+      @include focus-outline;
+      outline-offset: -2px;
+    }
   }
 
   .containerPicker.unlabeled-select {

package/components/nav/WindowManager/index.vue

@@ -261,15 +261,15 @@ export default {
       this.reportedWidth = this.width;
     },
 
-    setWmDimensions() {
+    setWmDimensions(forceValue) {
       switch (this.userPin) {
       case RIGHT:
       case LEFT:
         document.documentElement.style.setProperty('--wm-height', `${ window.innerHeight - 55 }px`);
-        document.documentElement.style.setProperty('--wm-width', `${ this.width }px`);
+        document.documentElement.style.setProperty('--wm-width', `${ forceValue || this.width }px`);
         break;
       case BOTTOM:
-        document.documentElement.style.setProperty('--wm-height', `${ this.height }px`);
+        document.documentElement.style.setProperty('--wm-height', `${ forceValue || this.height }px`);
         break;
       }
     },
@@ -293,6 +293,32 @@ export default {
 
     emitDraggable(event) {
       this.$emit('draggable', event);
+    },
+
+    resizeVertical(arrowUp) {
+      const resizeStep = 20;
+      const height = arrowUp ? this.height + resizeStep : this.height - resizeStep;
+
+      this.height = height;
+
+      this.setWmDimensions(height);
+      this.setReportedHeight(height);
+    },
+
+    resizeHorizontal(arrowLeft) {
+      const resizeStep = 20;
+      let width;
+
+      if (this.userPin === 'left') {
+        width = arrowLeft ? this.width - resizeStep : this.width + resizeStep;
+      } else {
+        width = arrowLeft ? this.width + resizeStep : this.width - resizeStep;
+      }
+
+      this.width = width;
+
+      this.setWmDimensions(width);
+      this.setReportedWidth(width);
     }
   }
 };
@@ -311,18 +337,27 @@ export default {
       :class="{
         'resizer-left': userPin == 'left',
       }"
+      role="tablist"
+      @keyup.right.prevent="selectNext(1)"
+      @keyup.left.prevent="selectNext(-1)"
       @mousedown="emitDraggable(true)"
       @mouseup="emitDraggable(false)"
     >
       <div
         v-if="userPin == 'right'"
         class="resizer resizer-x"
+        role="button"
+        tabindex="0"
+        :aria-label="t('wm.containerShell.resizeShellWindow', {arrow1: 'left', arrow2: 'right'})"
+        aria-expanded="true"
         @mousedown.prevent.stop="dragXStart($event)"
         @touchstart.prevent.stop="dragXStart($event)"
+        @keyup.left.prevent.stop="resizeHorizontal(true)"
+        @keyup.right.prevent.stop="resizeHorizontal(false)"
       >
         <i
           class="icon icon-code"
-          :alt="t('wm.containerShell.resizeShellWindow')"
+          :alt="t('wm.containerShell.resizeShellWindow', {arrow1: 'left', arrow2: 'right'})"
         />
       </div>
       <div
@@ -330,7 +365,13 @@ export default {
         :key="i"
         class="tab"
         :class="{'active': tab.id === active}"
+        role="tab"
+        :aria-selected="tab.id === active"
+        :aria-label="tab.label"
+        :aria-controls="`panel-${tab.id}`"
+        tabindex="0"
         @click="switchTo(tab.id)"
+        @keyup.enter.space="switchTo(tab.id)"
       >
         <i
           v-if="tab.icon"
@@ -343,39 +384,56 @@ export default {
           data-testid="wm-tab-close-button"
           class="closer icon icon-fw icon-x wm-closer-button"
           :alt="t('wm.containerShell.closeShellTab', { tab: tab.label })"
+          tabindex="0"
+          :aria-label="t('windowmanager.closeTab', { tabId: tab.id })"
           @click.stop="close(tab.id)"
+          @keyup.enter.space.stop="close(tab.id)"
         />
       </div>
       <div
         v-if="userPin == 'bottom'"
         class="resizer resizer-y"
+        role="button"
+        tabindex="0"
+        :aria-label="t('wm.containerShell.resizeShellWindow', {arrow1: 'up', arrow2: 'down'})"
+        aria-expanded="true"
         @mousedown.prevent.stop="dragYStart($event)"
         @touchstart.prevent.stop="dragYStart($event)"
         @click="toggle"
+        @keyup.up.prevent.stop="resizeVertical(true)"
+        @keyup.down.prevent.stop="resizeVertical(false)"
       >
         <i
           class="icon icon-sort"
-          :alt="t('wm.containerShell.resizeShellWindow')"
+          :alt="t('wm.containerShell.resizeShellWindow', {arrow1: 'up', arrow2: 'down'})"
         />
       </div>
       <div
         v-if="userPin == 'left'"
         class="resizer resizer-x resizer-align-right"
+        role="button"
+        tabindex="0"
+        :aria-label="t('wm.containerShell.resizeShellWindow', {arrow1: 'left', arrow2: 'right'})"
+        aria-expanded="true"
         @mousedown.prevent.stop="dragXStart($event)"
         @touchstart.prevent.stop="dragXStart($event)"
+        @keyup.left.prevent.stop="resizeHorizontal(true)"
+        @keyup.right.prevent.stop="resizeHorizontal(false)"
       >
         <i
           class="icon icon-code"
-          :alt="t('wm.containerShell.resizeShellWindow')"
+          :alt="t('wm.containerShell.resizeShellWindow', {arrow1: 'left', arrow2: 'right'})"
         />
       </div>
     </div>
     <div
       v-for="(tab, i) in tabs"
+      :id="`panel-${tab.id}`"
       :key="i"
       class="body"
       :class="{'active': tab.id === active}"
       draggable="false"
+      role="tabpanel"
       @dragstart.prevent.stop
       @dragend.prevent.stop
       @mouseover="emitDraggable(false)"
@@ -442,6 +500,11 @@ export default {
           z-index: 1;
         }
 
+        &:focus-visible {
+          @include focus-outline;
+          outline-offset: -3px;
+        }
+
         .closer {
           margin-left: 5px;
           border: 1px solid var(--body-text);
@@ -457,6 +520,11 @@ export default {
             border-color: var(--link-border);
             color: var(--link-border);
           }
+
+          &:focus-visible {
+            @include focus-outline;
+            outline-offset: 1px;
+          }
         }
       }
 

package/components/nav/__tests__/TopLevelMenu.test.ts

@@ -1,5 +1,4 @@
 import TopLevelMenu from '@shell/components/nav/TopLevelMenu.vue';
-import { SETTING } from '@shell/config/settings';
 import { mount, Wrapper } from '@vue/test-utils';
 import { CAPI, COUNT, MANAGEMENT } from '@shell/config/types';
 import { PINNED_CLUSTERS } from '@shell/store/prefs';
@@ -429,45 +428,6 @@ describe('topLevelMenu', () => {
     expect(description4.text()).toStrictEqual('some-description4');
   });
 
-  it('should not "crash" the component if the structure of banner settings is in an old format', async() => {
-    const wrapper: Wrapper<InstanceType<typeof TopLevelMenu>> = mount(TopLevelMenu, {
-      global: {
-        mocks: {
-          $route: {},
-          $store: {
-            ...generateStore(
-              [{ name: 'whatever' }],
-              [
-                // object based on https://github.com/rancher/dashboard/issues/10140#issuecomment-1883252402
-                {
-                  id:    SETTING.BANNERS,
-                  value: JSON.stringify({
-                    banner: {
-                      color:      '#78c9cf',
-                      background: '#27292e',
-                      text:       'Hello World!'
-                    },
-                    showHeader: 'true',
-                    showFooter: 'true'
-                  })
-                }
-              ]
-            ),
-          }
-        },
-
-        stubs: ['BrandImage', 'router-link'],
-      },
-    });
-
-    await waitForIt();
-
-    expect(wrapper.vm.sideMenuStyle).toStrictEqual({
-      marginBottom: '2em',
-      marginTop:    '2em'
-    });
-  });
-
   describe('searching a term', () => {
     describe('should displays a no results message if have clusters but', () => {
       it('given no matching clusters', async() => {