Cherrypick a11y improvements

changelog/unreleased/bugfix-table-sort-a11y

@@ -0,0 +1,5 @@
+Bugfix: A11y for table sorting
+
+Table sorting now only happens with one button with native labelling for a11y, not with a span and a button anymore.
+
+https://github.com/owncloud/owncloud-design-system/pull/1533

changelog/unreleased/enhancement-oc-drop-remove-aria-describeby

@@ -0,0 +1,6 @@
+Enhancement: OcDrop remove aria-describedby
+
+The aria-describedby-Attribute which triggers the output should be removed, so 
+that screenreaders don't read out the whole content on focus.
+
+https://github.com/owncloud/web/issues/5398

src/components/OcBreadcrumb.vue

@@ -1,5 +1,8 @@
 <template>
-  <nav :class="`oc-breadcrumb oc-breadcrumb-${variation}`">
+  <nav
+    :class="`oc-breadcrumb oc-breadcrumb-${variation}`"
+    :aria-label="$gettext('Breadcrumb navigation')"
+  >
     <ol class="oc-breadcrumb-list">
       <li v-for="(item, index) in items" :key="index" class="oc-breadcrumb-list-item">
         <router-link v-if="item.to" :aria-current="getAriaCurrent(index)" :to="item.to">{{

src/components/OcDrop.vue

@@ -106,9 +106,6 @@ export default {
       interactive: true,
       plugins: [hideOnEsc],
       theme: "none",
-      aria: {
-        content: "describedby",
-      },
       onShow(instance) {
         hideAll({ exclude: instance })
       },

src/components/__snapshots__/OcBreadcrumb.spec.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`OcBreadcrumb displays all items 1`] = `
-<nav class="oc-breadcrumb oc-breadcrumb-default">
+<nav aria-label="Breadcrumb navigation" class="oc-breadcrumb oc-breadcrumb-default">
   <ol class="oc-breadcrumb-list">
     <li class="oc-breadcrumb-list-item">
       <router-link-stub tag="a" to="[object Object]">First folder</router-link-stub>
@@ -37,7 +37,7 @@ exports[`OcBreadcrumb displays all items 1`] = `
 `;
 
 exports[`OcBreadcrumb sets correct variation 1`] = `
-<nav class="oc-breadcrumb oc-breadcrumb-lead">
+<nav aria-label="Breadcrumb navigation" class="oc-breadcrumb oc-breadcrumb-lead">
   <ol class="oc-breadcrumb-list">
     <li class="oc-breadcrumb-list-item">
       <router-link-stub tag="a" to="[object Object]">First folder</router-link-stub>

src/components/__snapshots__/OcDrop.spec.js.snap

@@ -3,7 +3,6 @@
 exports[`OcDrop renders tippy 1`] = `
 <div>
   <p
-    aria-describedby="tippy-3"
     aria-expanded="true"
     id="trigger"
   >
@@ -96,7 +95,6 @@ exports[`OcDrop renders tippy 2`] = `
 exports[`OcDrop renders tippy 3`] = `
 <div>
   <p
-    aria-describedby="tippy-3"
     aria-expanded="true"
     id="trigger"
   >

src/components/table/OcTable.sort.spec.js

@@ -63,28 +63,31 @@ describe("OcTable.sort", () => {
       },
     })
     const headers = wrapper.findAll("thead th")
+    const headerButtons = wrapper.findAll("thead th button")
     const th1 = headers.at(0)
     const th2 = headers.at(1)
+    const th1Button = headerButtons.at(0)
+    const th2Button = headerButtons.at(1)
 
-    await th1.trigger("click")
+    await th1Button.trigger("click")
     expect(th1.attributes("aria-sort")).toBe(DESC)
     expect(th2.attributes("aria-sort")).toBe(NONE)
     expect(wrapper.findAll("tbody tr td").at(0).text()).toBe("1245")
     expect(wrapper.findAll("tbody tr td").at(1).text()).toBe("id-3")
 
-    await th1.trigger("click")
+    await th1Button.trigger("click")
     expect(th1.attributes("aria-sort")).toBe(ASC)
     expect(th2.attributes("aria-sort")).toBe(NONE)
     expect(wrapper.findAll("tbody tr td").at(0).text()).toBe("111000234")
     expect(wrapper.findAll("tbody tr td").at(1).text()).toBe("id-1")
 
-    await th2.trigger("click")
+    await th2Button.trigger("click")
     expect(th1.attributes("aria-sort")).toBe(NONE)
     expect(th2.attributes("aria-sort")).toBe(ASC)
     expect(wrapper.findAll("tbody tr td").at(0).text()).toBe("1245")
     expect(wrapper.findAll("tbody tr td").at(1).text()).toBe("id-3")
 
-    await th2.trigger("click")
+    await th2Button.trigger("click")
     expect(th1.attributes("aria-sort")).toBe(NONE)
     expect(th2.attributes("aria-sort")).toBe(DESC)
     expect(wrapper.findAll("tbody tr td").at(0).text()).toBe("111000234")

src/components/table/OcTable.vue

@@ -6,7 +6,6 @@
           v-for="(field, index) in fields"
           :key="`oc-thead-${field.name}`"
           v-bind="extractThProps(field, index)"
-          @click.native="$emit(constants.EVENT_THEAD_CLICKED, field)"
         >
           <span
             v-if="field.headerType === 'slot'"

src/components/table/_OcTableCellHead.vue

@@ -46,9 +46,5 @@ export default {
 .oc-th {
   color: var(--oc-color-text-muted);
   font-weight: inherit;
-
-  &[aria-sort] {
-    cursor: pointer;
-  }
 }
 </style>

src/directives/OcTooltip.js

@@ -60,6 +60,7 @@ const initOrUpdate = (el, { value = {} }, { elm }) => {
   const props = merge.all([
     {
       ignoreAttributes: true,
+      interactive: true,
       aria: {
         content: null,
         expanded: false,