Remove click handler from th for sorting

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

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)"
         >
           <component
             :is="extractThValueComponent(field)"

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>