From 15041833effd7b7666eb62ee541956afd221ddc6 Mon Sep 17 00:00:00 2001 From: Benedikt Kulmann Date: Thu, 22 Jul 2021 10:18:22 +0200 Subject: [PATCH 01/26] Fix a11y for table sorting --- src/components/OcButton.vue | 2 +- src/components/table/OcTable.vue | 57 ++++++++++++++++----------- src/components/table/mixins/sort.scss | 10 ++--- 3 files changed, 41 insertions(+), 28 deletions(-) diff --git a/src/components/OcButton.vue b/src/components/OcButton.vue index e1c38f151..6d61ecdb1 100644 --- a/src/components/OcButton.vue +++ b/src/components/OcButton.vue @@ -280,7 +280,7 @@ export default { border-radius: 3px; box-sizing: border-box; color: var(--oc-color-text-inverse); - display: flex; + display: inline-flex; font-weight: 600; padding: 0.5rem 0.75rem; text-align: center; diff --git a/src/components/table/OcTable.vue b/src/components/table/OcTable.vue index ccc3e4d54..1f5634840 100644 --- a/src/components/table/OcTable.vue +++ b/src/components/table/OcTable.vue @@ -8,27 +8,17 @@ v-bind="extractThProps(field, index)" @click.native="$emit(constants.EVENT_THEAD_CLICKED, field)" > - - - - - + + + @@ -254,6 +244,28 @@ export default { return props }, + extractThValueComponent(field) { + if (!field.sortable) { + return "span" + } + return "oc-button" + }, + extractThValueProps(field) { + if (!field.sortable) { + return {} + } + return { + appearance: "raw", + } + }, + extractThValueListeners(field) { + if (!field.sortable) { + return {} + } + return { + click: () => this.emitSort(field), + } + }, extractTbodyTrProps(item, index) { return { class: [ @@ -336,10 +348,11 @@ export default { return [...prefix, item[field.name]].join("-") }, - getSortLabel(name) { - const label = this.$gettext("Sort by %{ name }") - - return this.$gettextInterpolate(label, { name }) + emitSort(field) { + if (!field.sortable) { + return + } + this.$emit(EVENT_THEAD_CLICKED, field) }, }, } diff --git a/src/components/table/mixins/sort.scss b/src/components/table/mixins/sort.scss index b02ee9869..8c27b11e8 100644 --- a/src/components/table/mixins/sort.scss +++ b/src/components/table/mixins/sort.scss @@ -1,27 +1,27 @@ .oc-thead { th { - &[aria-sort] .oc-button-sort { + &[aria-sort] .oc-table-sort::after { + content: ' '; background-position: center; background-repeat: no-repeat; background-size: 0.65em 1em; cursor: pointer; display: inline; height: 1em; - margin-left: var(--oc-space-xsmall); padding: 0; vertical-align: middle; width: 0.65em; } - &[aria-sort='none'] .oc-button-sort { + &[aria-sort='none'] .oc-table-sort::after { background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="101" height="101" preserveAspectRatio="none"%3E%3Cpath opacity=".3" d="M51 1l25 23 24 22H1l25-22zm0 100l25-23 24-22H1l25 22z"/%3E%3C/svg%3E'); } - &[aria-sort='descending'] .oc-button-sort { + &[aria-sort='descending'] .oc-table-sort::after { background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="101" height="101" preserveAspectRatio="none"%3E%3Cpath opacity=".3" d="M51 1l25 23 24 22H1l25-22z"/%3E%3Cpath d="M51 101l25-23 24-22H1l25 22z"/%3E%3C/svg%3E'); } - &[aria-sort='ascending'] .oc-button-sort { + &[aria-sort='ascending'] .oc-table-sort::after { background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="101" height="101" preserveAspectRatio="none"%3E%3Cpath d="M51 1l25 23 24 22H1l25-22z"/%3E%3Cpath opacity=".3" d="M51 101l25-23 24-22H1l25 22z"/%3E%3C/svg%3E'); } } From d84a41c986b53405e5fdb1962877ca6c0f69149e Mon Sep 17 00:00:00 2001 From: Paul Neubauer Date: Fri, 23 Jul 2021 14:38:23 +0200 Subject: [PATCH 02/26] Remove aria-describ-by in tippy for a11y reasons --- .../unreleased/enhancement-oc-drop-remove-aria-describeby | 6 ++++++ src/components/OcDrop.vue | 3 --- 2 files changed, 6 insertions(+), 3 deletions(-) create mode 100644 changelog/unreleased/enhancement-oc-drop-remove-aria-describeby diff --git a/changelog/unreleased/enhancement-oc-drop-remove-aria-describeby b/changelog/unreleased/enhancement-oc-drop-remove-aria-describeby new file mode 100644 index 000000000..845fc6fcd --- /dev/null +++ b/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 diff --git a/src/components/OcDrop.vue b/src/components/OcDrop.vue index 13a380543..259f73f03 100644 --- a/src/components/OcDrop.vue +++ b/src/components/OcDrop.vue @@ -106,9 +106,6 @@ export default { interactive: true, plugins: [hideOnEsc], theme: "none", - aria: { - content: "describedby", - }, onShow(instance) { hideAll({ exclude: instance }) }, From 68a1efd57f14bbf7d55e06da94d9bf10968e1ba9 Mon Sep 17 00:00:00 2001 From: Paul Neubauer Date: Fri, 23 Jul 2021 14:49:47 +0200 Subject: [PATCH 03/26] adjusted snapshots --- src/components/__snapshots__/OcDrop.spec.js.snap | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/__snapshots__/OcDrop.spec.js.snap b/src/components/__snapshots__/OcDrop.spec.js.snap index 870d5ce94..19e7f5cb0 100644 --- a/src/components/__snapshots__/OcDrop.spec.js.snap +++ b/src/components/__snapshots__/OcDrop.spec.js.snap @@ -3,7 +3,6 @@ exports[`OcDrop renders tippy 1`] = `

@@ -96,7 +95,6 @@ exports[`OcDrop renders tippy 2`] = ` exports[`OcDrop renders tippy 3`] = `

From 58d2cb06952844e2c37a8b1db3c1ae6263782fa3 Mon Sep 17 00:00:00 2001 From: Benedikt Kulmann Date: Fri, 23 Jul 2021 14:20:10 +0200 Subject: [PATCH 04/26] Remove click handler from th for sorting --- changelog/unreleased/bugfix-table-sort-a11y | 5 +++++ src/components/table/OcTable.vue | 1 - src/components/table/_OcTableCellHead.vue | 4 ---- 3 files changed, 5 insertions(+), 5 deletions(-) create mode 100644 changelog/unreleased/bugfix-table-sort-a11y diff --git a/changelog/unreleased/bugfix-table-sort-a11y b/changelog/unreleased/bugfix-table-sort-a11y new file mode 100644 index 000000000..11d369d6c --- /dev/null +++ b/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 diff --git a/src/components/table/OcTable.vue b/src/components/table/OcTable.vue index 1f5634840..94f578cde 100644 --- a/src/components/table/OcTable.vue +++ b/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)" > From 99446451440a45e93a44804ba3ec8cfb5b7499ef Mon Sep 17 00:00:00 2001 From: Pascal Wengerter Date: Fri, 23 Jul 2021 16:51:15 +0200 Subject: [PATCH 05/26] Fix refactored table sorting tests --- src/components/table/OcTable.sort.spec.js | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/components/table/OcTable.sort.spec.js b/src/components/table/OcTable.sort.spec.js index 91165a5d6..78f70ffd0 100644 --- a/src/components/table/OcTable.sort.spec.js +++ b/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") From 2ef8eaa69d85f54144e4c2a566b088e8588c7066 Mon Sep 17 00:00:00 2001 From: Paul Neubauer Date: Mon, 26 Jul 2021 17:07:57 +0200 Subject: [PATCH 06/26] removed role from tippy --- src/components/OcDrop.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/OcDrop.vue b/src/components/OcDrop.vue index 13a380543..4da9103f7 100644 --- a/src/components/OcDrop.vue +++ b/src/components/OcDrop.vue @@ -106,6 +106,7 @@ export default { interactive: true, plugins: [hideOnEsc], theme: "none", + role: "", aria: { content: "describedby", }, From c79a6745b53a4b74536baa8242624ff8557cc363 Mon Sep 17 00:00:00 2001 From: Pascal Wengerter Date: Tue, 3 Aug 2021 12:42:07 +0200 Subject: [PATCH 07/26] Add aria-label to breadcrumb nav --- src/components/OcBreadcrumb.vue | 5 ++++- src/components/__snapshots__/OcBreadcrumb.spec.js.snap | 4 ++-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/components/OcBreadcrumb.vue b/src/components/OcBreadcrumb.vue index 0a5307668..f80946efc 100644 --- a/src/components/OcBreadcrumb.vue +++ b/src/components/OcBreadcrumb.vue @@ -1,5 +1,8 @@