Extract tabs styles

src/components/ImageDetails/CopyLicense.vue

@@ -5,7 +5,7 @@
     <h5 class="b-header margin-bottom-small">
       {{ $t('photo-details.reuse.copy-license.title') }}
     </h5>
-    <section class="tabs-boxed">
+    <section class="search-tabs boxed">
       <div
         role="tablist"
         :aria-label="$t('photo-details.reuse.copy-license.title')"
@@ -217,52 +217,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import 'bulma/sass/utilities/_all.sass';
-
-.tabs-boxed {
-  display: flex;
-  flex-direction: column;
-}
-.tabs-boxed .tabs-panel {
-  display: none;
-  padding: 1rem;
-  background-color: white;
-  border: 0.125rem solid #d8d8d8;
-}
-.tabs-boxed .tabs-panel.is-active {
-  display: block;
-}
-[role='tablist'] {
-  display: flex;
-  align-self: flex-start;
-}
-.tab {
-  appearance: none;
-  border-image-source: unset;
-  border-image-outset: unset;
-  border-image-repeat: unset;
-  font-weight: 700;
-  font-size: 1rem;
-  background-color: whitesmoke;
-  margin: 0 0 -0.125rem;
-  border: 2px solid #d8d8d8;
-  border-right: 0;
-  padding: 0.5rem 1rem;
-  position: relative;
-
-  &.is-active,
-  &:hover {
-    background-color: white;
-    border-bottom-color: transparent;
-  }
-  &:focus-visible {
-    box-shadow: 0 0 0 0.125rem #d8d8d8;
-  }
-
-  &:last-child {
-    border-right: 0.125rem solid #d8d8d8;
-  }
-}
+@import '@creativecommons/vocabulary/scss/color';
+@import '@creativecommons/vocabulary/scss/typography';
+@import '~/styles/tabs.scss';
 
 textarea {
   border: none;

src/components/ImageDetails/PhotoDetails.vue

@@ -74,7 +74,7 @@
           <span v-else>{{ image.creator }}</span>
         </span>
       </div>
-      <section class="tabs-lined">
+      <section class="search-tabs">
         <div role="tablist" :aria-label="$t('photo-details.aria.details')">
           <button
             id="reuse"
@@ -281,50 +281,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import '@creativecommons/vocabulary/scss/color';
+@import '@creativecommons/vocabulary/scss/typography';
 @import '~/styles/photodetails.scss';
-@import 'bulma/sass/utilities/_all';
-
-.tabs-lined {
-  display: flex;
-  flex-direction: column;
-}
-.tabs-lined .tabs-panel {
-  display: none;
-  padding: 2rem 0 0;
-}
-.tabs-lined .tabs-panel.is-active {
-  display: block;
-}
-[role='tablist'] {
-  display: flex;
-  border-bottom: 0.125rem solid #d8d8d8;
-}
-.tab {
-  appearance: none;
-  border-image-source: unset;
-  border-image-outset: unset;
-  border-image-repeat: unset;
-  font-weight: 700;
-  font-size: 1.25rem;
-  margin: 0 2rem -0.125rem 0;
-  padding: 0.5rem 0 1rem;
-  position: relative;
-  border-width: 0;
-  background: transparent;
-  border-bottom: 0.25rem solid transparent;
-  color: #333;
-
-  &:first-child {
-    padding-left: 0;
-  }
-  &.is-active,
-  &:hover {
-    border-bottom-color: #333;
-  }
-  &:focus-visible {
-    box-shadow: 0 0 0 0.125rem #d8d8d8;
-  }
-}
+@import '~/styles/tabs.scss';
 
 @include touch {
   .image-info {

src/components/SearchTypeTabs.vue

@@ -1,23 +1,21 @@
 <template>
   <div>
-    <section class="tabs">
-      <ul role="tablist">
-        <li
+    <section class="search-tabs">
+      <div role="tablist">
+        <NuxtLink
           v-for="type in contentTypes"
+          :id="type"
           :key="type"
+          aria-live="polite"
+          :to="localePath({ path: `/search/${type}`, query: $route.query })"
           :aria-selected="activeTab == type"
+          :aria-controls="'tab-' + type"
           role="tab"
           :class="tabClass(type, 'tab')"
         >
-          <NuxtLink
-            aria-live="polite"
-            class="is-size-5"
-            :to="localePath({ path: `/search/${type}`, query: $route.query })"
-          >
-            {{ $t(`search-tab.${type}`) }}
-          </NuxtLink>
-        </li>
-      </ul>
+          {{ capitalize(type) }}
+        </NuxtLink>
+      </div>
     </section>
   </div>
 </template>
@@ -42,15 +40,19 @@ export default {
     tabClass(tabSlug, tabClass) {
       return {
         [tabClass]: true,
+        'is-size-5': true,
         'is-active': tabSlug === this.activeTab,
       }
     },
   },
 }
 </script>
 
-<style scoped>
-.tabs ul {
-  padding-left: 24px;
+<style lang="scss" scoped>
+@import '@creativecommons/vocabulary/scss/color';
+@import '@creativecommons/vocabulary/scss/typography';
+@import '~/styles/tabs.scss';
+.search-tabs {
+  margin-left: 1rem;
 }
 </style>

src/pages/search/audio.vue

@@ -1,3 +1,8 @@
 <template>
-  <MetaSearchForm type="audio" />
+  <MetaSearchForm
+    id="tab-audio"
+    type="audio"
+    role="tabpanel"
+    aria-labelledby="audio"
+  />
 </template>

src/pages/search/image.vue

@@ -1,5 +1,10 @@
 <template>
-  <SearchGrid @onLoadMoreImages="onLoadMoreImages" />
+  <SearchGrid
+    id="tab-image"
+    role="tabpanel"
+    aria-labelledby="image"
+    @onLoadMoreImages="onLoadMoreImages"
+  />
 </template>
 
 <script>

src/pages/search/index.vue

@@ -1,5 +1,10 @@
 <template>
-  <SearchGrid @onLoadMoreImages="onLoadMoreImages" />
+  <SearchGrid
+    id="tab-image"
+    role="tabpanel"
+    aria-labelledby="image"
+    @onLoadMoreImages="onLoadMoreImages"
+  />
 </template>
 
 <script>

src/pages/search/video.vue

@@ -1,3 +1,8 @@
 <template>
-  <MetaSearchForm type="video" />
+  <MetaSearchForm
+    id="type-video"
+    type="video"
+    role="tabpanel"
+    aria-labelledby="video"
+  />
 </template>

src/styles/tabs.scss

@@ -0,0 +1,97 @@
+$tabs-border-bottom-color: $color-light-gray;
+$tabs-border-bottom-width: 0.125rem;
+$tabs-font-size: 1rem;
+
+.search-tabs {
+  display: flex;
+  flex-direction: column;
+
+  font-size: $tabs-font-size;
+  justify-content: space-between;
+  overflow: hidden;
+  overflow-x: auto;
+  white-space: nowrap;
+  font-family: $family-source-sans-pro;
+  [role='tablist'] {
+    display: flex;
+    border-bottom: $tabs-border-bottom-width solid $tabs-border-bottom-color;
+  }
+  .tabs-panel {
+    display: none;
+    padding: 2rem 0 0;
+    &.is-active {
+      display: block;
+    }
+  }
+
+  .tab {
+    appearance: none;
+    border-image-source: unset;
+    border-image-outset: unset;
+    border-image-repeat: unset;
+    font-weight: 700;
+    font-size: 1.25rem;
+    margin: 0 1rem -0.125rem 1rem;
+    padding: 0.5rem 0 1rem;
+    position: relative;
+    border-width: 0;
+    background: transparent;
+    border-bottom: 0.25rem solid transparent;
+    color: #333;
+    cursor: pointer;
+    user-select: none;
+    text-decoration: none;
+    &:first-child {
+      margin-left: 0;
+    }
+
+    &.is-active,
+    &:hover {
+      border-bottom-color: #333;
+      text-decoration: none;
+    }
+    &:focus {
+      outline: none;
+    }
+    &:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 0.125rem #d8d8d8;
+    }
+  }
+}
+.boxed {
+  [role='tablist'] {
+    display: flex;
+    align-self: flex-start;
+    border-bottom: none;
+  }
+  .tabs-panel {
+    padding: 1rem;
+    background-color: white;
+    border: 0.125rem solid $color-light-gray;
+  }
+  .tab {
+    font-size: 1rem;
+    background-color: whitesmoke;
+    margin: 0 0 -0.125rem;
+    border: 2px solid $color-light-gray;
+    border-right: 0;
+    padding: 0.5rem 1rem;
+
+    &.is-active,
+    &:hover {
+      background-color: white;
+      border-bottom: 0;
+      padding-bottom: 0.625rem;
+    }
+    &:focus-visible {
+      box-shadow: 0 0 0 0.125rem #d8d8d8;
+    }
+    &:first-child {
+      padding-left: 1rem;
+    }
+    &:last-child {
+      border-right: 0.125rem solid #d8d8d8;
+    }
+  }
+}