Some a11y fixes

packages/design-system/src/components/OcInfoDrop/OcInfoDrop.vue

@@ -9,7 +9,7 @@
   >
     <div class="info-drop-content">
       <div v-if="title" class="oc-flex oc-flex-between info-header oc-border-b oc-pb-s">
-        <span class="oc-m-rm info-title" v-text="$gettext(title)" />
+        <h4 class="oc-m-rm info-title" v-text="$gettext(title)" />
         <oc-button appearance="raw">
           <oc-icon name="close" fill-type="line" size="medium" variation="inherit" />
         </oc-button>

packages/web-app-files/src/components/AppBar/AppBar.vue

@@ -87,9 +87,10 @@ import {
   useFileActionsMove,
   useFileActionsRestore
 } from 'web-app-files/src/composables/actions'
-import { useStore } from 'web-pkg/src'
+import { useRouteMeta, useStore } from 'web-pkg/src'
 import { BreadcrumbItem } from 'design-system/src/components/OcBreadcrumb/types'
 import { useActiveLocation } from 'web-app-files/src/composables'
+import { useGettext } from 'vue3-gettext'
 
 export default defineComponent({
   components: {
@@ -129,6 +130,7 @@ export default defineComponent({
   },
   setup(props) {
     const store = useStore()
+    const { $gettext } = useGettext()
 
     const { actions: acceptShareActions } = useFileActionsAcceptShare({ store })
     const { actions: clearSelectionActions } = useFileActionsClearSelection({ store })
@@ -182,10 +184,19 @@ export default defineComponent({
       return props.breadcrumbs.length <= 1
     })
 
+    const routeMetaTitle = useRouteMeta('title')
+    const pageTitle = computed(() => {
+      if (unref(routeMetaTitle)) {
+        return $gettext(unref(routeMetaTitle))
+      }
+      return props.space?.name || ''
+    })
+
     return {
       batchActions,
       showBreadcrumb,
-      showMobileNav
+      showMobileNav,
+      pageTitle
     }
   },
   data: function () {
@@ -198,10 +209,6 @@ export default defineComponent({
     ...mapGetters('Files', ['files', 'selectedFiles']),
     ...mapState('Files', ['areHiddenFilesShown', 'areFileExtensionsShown']),
 
-    pageTitle() {
-      const title = this.$route.meta.title || ''
-      return this.$gettext(title)
-    },
     showContextActions() {
       return last<BreadcrumbItem>(this.breadcrumbs).allowContextActions
     },

packages/web-app-files/src/components/AppBar/ViewOptions.vue

@@ -73,11 +73,11 @@
         >
           <label for="tiles-size-slider" v-text="$gettext('Tile size')" />
           <input
+            id="tiles-size-slider"
             v-model="viewSizeCurrent"
             type="range"
             min="1"
             max="6"
-            name="tiles-size-slider"
             class="oc-range"
             data-testid="files-tiles-size-slider"
             @input="setTilesViewSize"

packages/web-app-files/src/components/Spaces/SpaceHeader.vue

@@ -21,7 +21,7 @@
     <div class="space-header-infos">
       <div class="oc-flex oc-mb-s oc-flex-middle oc-flex-between">
         <div class="oc-flex oc-flex-middle space-header-infos-heading">
-          <h1 class="space-header-name">{{ space.name }}</h1>
+          <h2 class="space-header-name">{{ space.name }}</h2>
           <oc-button
             :id="`space-context-btn`"
             v-oc-tooltip="$gettext('Show context menu')"

packages/web-app-files/tests/unit/components/SideBar/Shares/__snapshots__/SpaceMembers.spec.ts.snap

@@ -14,7 +14,7 @@ exports[`SpaceMembers filter toggles the filter on click 1`] = `
           <div class="oc-card oc-card-body oc-background-secondary oc-p-m">
             <div class="info-drop-content">
               <div class="oc-flex oc-flex-between info-header oc-border-b oc-pb-s">
-                <span class="oc-m-rm info-title">Add members to this Space</span>
+                <h4 class="oc-m-rm info-title">Add members to this Space</h4>
                 <button class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw" type="button">
                   <!-- @slot Content of the button -->
                   <oc-icon-stub accessiblelabel="" color="" filltype="line" name="close" size="medium" type="span" variation="inherit"></oc-icon-stub>

packages/web-app-files/tests/unit/components/Spaces/__snapshots__/SpaceHeader.spec.ts.snap

@@ -12,7 +12,7 @@ exports[`SpaceHeader should add the "squashed"-class when the sidebar is opened
   <div class="space-header-infos">
     <div class="oc-flex oc-mb-s oc-flex-middle oc-flex-between">
       <div class="oc-flex oc-flex-middle space-header-infos-heading">
-        <h1 class="space-header-name"></h1>
+        <h2 class="space-header-name"></h2>
         <button aria-label="Show context menu" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-ml-s" id="space-context-btn" type="button">
           <!-- @slot Content of the button -->
           <span class="oc-icon oc-icon-m oc-icon-passive">
@@ -49,7 +49,7 @@ exports[`SpaceHeader space image should show the default image if no other image
   <div class="space-header-infos">
     <div class="oc-flex oc-mb-s oc-flex-middle oc-flex-between">
       <div class="oc-flex oc-flex-middle space-header-infos-heading">
-        <h1 class="space-header-name"></h1>
+        <h2 class="space-header-name"></h2>
         <button aria-label="Show context menu" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-ml-s" id="space-context-btn" type="button">
           <!-- @slot Content of the button -->
           <span class="oc-icon oc-icon-m oc-icon-passive">
@@ -82,7 +82,7 @@ exports[`SpaceHeader space image should show the set image 1`] = `
   <div class="space-header-infos">
     <div class="oc-flex oc-mb-s oc-flex-middle oc-flex-between">
       <div class="oc-flex oc-flex-middle space-header-infos-heading">
-        <h1 class="space-header-name"></h1>
+        <h2 class="space-header-name"></h2>
         <button aria-label="Show context menu" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-ml-s" id="space-context-btn" type="button">
           <!-- @slot Content of the button -->
           <span class="oc-icon oc-icon-m oc-icon-passive">

packages/web-runtime/src/components/SidebarNav/SidebarNav.vue

@@ -19,13 +19,14 @@
       class="oc-sidebar-nav oc-mb-m oc-mt-s oc-px-xs"
       :aria-label="$gettext('Sidebar navigation menu')"
     >
+      <div
+        v-show="isAnyNavItemActive"
+        id="nav-highlighter"
+        class="oc-ml-s oc-background-primary-gradient"
+        v-bind="highlighterAttrs"
+        :aria-hidden="true"
+      />
       <oc-list>
-        <div
-          v-show="isAnyNavItemActive"
-          id="nav-highlighter"
-          class="oc-ml-s oc-background-primary-gradient"
-          v-bind="highlighterAttrs"
-        />
         <sidebar-nav-item
           v-for="(link, index) in navItems"
           :ref="(el: ComponentPublicInstance) => (navItemRefs[index] = el)"

packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNav.spec.ts.snap

@@ -9,8 +9,8 @@ exports[`OcSidebarNav renders navItems into a list 1`] = `
     </span>
   </button>
   <nav aria-label="Sidebar navigation menu" class="oc-sidebar-nav oc-mb-m oc-mt-s oc-px-xs">
+    <div aria-hidden="true" class="oc-ml-s oc-background-primary-gradient" id="nav-highlighter"></div>
     <ul class="oc-list oc-my-rm oc-mx-rm">
-      <div class="oc-ml-s oc-background-primary-gradient" id="nav-highlighter"></div>
       <sidebar-nav-item-stub active="true" collapsed="false" filltype="fill" icon="folder" index="00000000000000000000000000000000" name="Personal" target="[object Object]"></sidebar-nav-item-stub>
       <sidebar-nav-item-stub active="false" collapsed="false" filltype="fill" icon="share-forward" index="00000000000000000000000000000000" name="Shares" target="[object Object]"></sidebar-nav-item-stub>
       <sidebar-nav-item-stub active="false" collapsed="false" filltype="fill" icon="delete" index="00000000000000000000000000000000" name="Deleted files" target="[object Object]"></sidebar-nav-item-stub>