[DO NOT MERGE BEFORE Q1 RELEASED] [Remove Vuetify from Studio] Main navigation in Channels

contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/PublishSidePanel.vue

@@ -12,7 +12,7 @@
       </template>
 
       <template #default>
-        <div>
+        <div style="padding: 24px 32px 16px">
           <KRadioButtonGroup>
             <KRadioButton
               :label="modeLive$()"

contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/index.vue

@@ -632,6 +632,7 @@
     display: flex;
     flex-direction: column;
     gap: 16px;
+    padding: 24px 32px 16px;
     margin-top: -24px;
     line-height: 140%;
   }

contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue

@@ -21,7 +21,7 @@
       alignment="left"
       @closePanel="closeSidePanel"
     >
-      <CatalogFilterPanelContent />
+      <CatalogFilterPanelContent :style="{ padding: '24px 32px 16px' }" />
     </SidePanelModal>
   </div>
 

contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue

@@ -27,47 +27,21 @@
         {{ isFAQPage ? $tr('frequentlyAskedQuestions') : $tr('libraryTitle') }}
       </VToolbarTitle>
     </VToolbar>
-    <AppBar v-else>
-      <template
-        v-if="loggedIn"
-        #tabs
-      >
-        <VTab
-          v-for="listType in lists"
-          :key="listType.id"
-          :to="getChannelLink(listType)"
-          @click="trackTabClick(listType)"
-        >
-          <VBadge
-            :value="invitationsByListCounts[listType]"
-            color="black"
-          >
-            <template #badge>
-              <span>{{ $formatNumber(invitationsByListCounts[listType]) }}</span>
-            </template>
-            <span>{{ translateConstant(listType) }}</span>
-          </VBadge>
-        </VTab>
-        <VTab
-          :to="catalogLink"
-          @click="publicTabClick"
-        >
-          {{ $tr('catalog') }}
-        </VTab>
-        <VTab
-          :to="channelSetLink"
-          @click="channelSetsTabClick"
-        >
-          {{ $tr('channelSets') }}
-        </VTab>
-      </template>
-    </AppBar>
+
+    <StudioNavigation
+      v-else
+      :tabs="navigationTabs"
+    />
+
     <VContent>
       <StudioOfflineAlert
         v-if="!isCatalogPage"
         :offset="toolbarHeight"
       />
       <VContainer
+        id="main"
+        role="main"
+        tabindex="-1"
         fluid
         class="main-container pa-0"
         :style="`height: calc(100vh - ${contentOffset}px); margin-top: ${offline ? 48 : 0}px;`"
@@ -137,7 +111,7 @@
   import { ChannelListTypes } from 'shared/constants';
   import { constantsTranslationMixin, routerMixin } from 'shared/mixins';
   import GlobalSnackbar from 'shared/views/GlobalSnackbar';
-  import AppBar from 'shared/views/AppBar';
+  import StudioNavigation from 'shared/views/StudioNavigation/StudioNavigation.vue';
   import StudioOfflineAlert from 'shared/views/StudioOfflineAlert.vue';
   import PolicyModals from 'shared/views/policies/PolicyModals';
 
@@ -159,7 +133,7 @@
   export default {
     name: 'ChannelListIndex',
     components: {
-      AppBar,
+      StudioNavigation,
       ChannelInvitation,
       ChannelListAppError,
       GlobalSnackbar,
@@ -174,6 +148,41 @@
       }),
       ...mapGetters(['loggedIn']),
       ...mapGetters('channelList', ['invitations']),
+
+      navigationTabs() {
+        if (!this.loggedIn) return [];
+
+        const tabs = [];
+
+        this.lists.forEach(listType => {
+          tabs.push({
+            id: listType,
+            label: this.translateConstant(listType),
+            to: this.getChannelLink(listType),
+            badgeValue: this.invitationsByListCounts[listType] || 0,
+            analyticsLabel: ListTypeToAnalyticsLabel[listType],
+          });
+        });
+
+        tabs.push({
+          id: 'catalog',
+          label: this.$tr('catalog'),
+          to: this.catalogLink,
+          badgeValue: 0,
+          analyticsLabel: ChannelListTypes.PUBLIC,
+        });
+
+        tabs.push({
+          id: CHANNEL_SETS,
+          label: this.$tr('channelSets'),
+          to: this.channelSetLink,
+          badgeValue: 0,
+          analyticsLabel: CHANNEL_SETS,
+        });
+
+        return tabs;
+      },
+
       fullPageError() {
         return this.$store.state.errors.fullPageError;
       },
@@ -227,12 +236,6 @@
       homeLink() {
         return this.libraryMode ? window.Urls.base() : window.Urls.channels();
       },
-      publicTabClick() {
-        return this.trackTabClick.bind(this, ChannelListTypes.PUBLIC);
-      },
-      channelSetsTabClick() {
-        return this.trackTabClick.bind(this, CHANNEL_SETS);
-      },
     },
     watch: {
       $route(route) {
@@ -289,9 +292,6 @@
           this.updateTabTitle(title);
         }
       },
-      trackTabClick(list) {
-        this.$analytics.trackClick('channel_list', ListTypeToAnalyticsLabel[list]);
-      },
     },
     $trs: {
       channelSets: 'Collections',

contentcuration/contentcuration/frontend/shared/views/SidePanelModal/index.vue

@@ -26,7 +26,7 @@
             <div
               class="header-content"
               :style="{
-                flexDirection: closeButtonIconType === 'close' ? 'row' : 'row-reverse',
+                flexDirection: headerFlexDirection,
               }"
             >
               <div style="overflow: hidden">
@@ -104,6 +104,13 @@
           return ['close', 'back'].includes(value);
         },
       },
+      closeButtonPosition: {
+        type: String,
+        required: false,
+        default: null,
+        validator: value => ['left', 'right'].includes(value),
+      },
+
       /* Optionally override the default width of the side panel with valid CSS value */
       sidePanelWidth: {
         type: String,
@@ -118,6 +125,11 @@
           return ['right', 'left'].includes(value);
         },
       },
+      fixedWidth: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
       ariaLabel: {
         type: String,
         required: false,
@@ -151,7 +163,15 @@
           [this.rtlAlignment]: 0,
         };
       },
+      headerFlexDirection() {
+        if (this.closeButtonPosition === 'left') return 'row-reverse';
+        if (this.closeButtonPosition === 'right') return 'row';
+        return this.closeButtonIconType === 'close' ? 'row' : 'row-reverse';
+      },
       responsiveWidth() {
+        if (this.fixedWidth) {
+          return this.sidePanelWidth;
+        }
         return this.isMobile ? '100vw' : this.sidePanelWidth;
       },
       /** Styling Properties */
@@ -253,7 +273,6 @@
 
     .side-panel-content {
       flex-grow: 1;
-      padding: 24px 32px 16px;
       overflow-x: hidden;
       overflow-y: auto;
     }

contentcuration/contentcuration/frontend/shared/views/StudioNavigation/SkipNavigationLink.vue

@@ -0,0 +1,89 @@
+<template>
+
+  <div class="skip-nav-link">
+    <KButton
+      ref="button"
+      :style="linkStyles"
+      appearance="basic-link"
+      :text="$tr('skipToMainContentAction')"
+      @click="handleClickSkipLink"
+    />
+  </div>
+
+</template>
+
+
+<script>
+
+  export default {
+    name: 'SkipNavigationLink',
+    computed: {
+      linkStyles() {
+        return {
+          backgroundColor: this.$themeTokens.surface + ' !important',
+        };
+      },
+    },
+    methods: {
+      handleClickSkipLink() {
+        // Every page where this is supposed to work needs to have a top-level
+        // element with 'role' and 'id' attribute equal to 'main' and 'tabindex= -1'.
+        // If it doesn't have one, clicking this link is a noop, but will re-focus itself
+        // as a convenience (in case main div is still loading).
+        const mainEl = document.getElementById('main');
+        if (mainEl) {
+          // If it exists, actually target and focus on the main header
+          const header = mainEl.querySelector('h1');
+          if (header) {
+            // HACK: Need to set its tabindex attribute on the fly to get tab behavior
+            header.setAttribute('tabindex', -1);
+            header.focus();
+          } else {
+            mainEl.focus();
+          }
+        } else {
+          // NOTE: the button retains focus, but loses :focus styling after hitting "Enter"
+          // TODO: look into theme input modality to see if we can get consistent
+          // styling when in keyboard modality
+          this.$refs.button.$el.focus();
+        }
+      },
+    },
+    $trs: {
+      skipToMainContentAction: {
+        message: 'Skip to main content',
+        context:
+          'Button label for the hamburger menu in the top left corner. Accessible only to those who use screen readers and other assistive technology (AT).',
+      },
+    },
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  @import '~kolibri-design-system/lib/styles/definitions';
+
+  .skip-nav-link {
+    position: relative;
+    z-index: 2;
+  }
+
+  .skip-nav-link a {
+    @extend %dropshadow-2dp;
+
+    position: absolute;
+    left: -1000px;
+    padding: 8px 16px;
+    font-size: 14px;
+    outline-offset: 0 !important;
+
+    &:focus {
+      top: 8px;
+      left: 8px;
+      z-index: 2;
+    }
+  }
+
+</style>