Fix a11y issues from release 7.1.3

.github/dependabot.yml

@@ -10,67 +10,6 @@ updates:
   - dependency-name: uikit
     versions:
     - ">= 0"
-  - dependency-name: eslint
+  - dependency-name: sass
     versions:
-    - 7.19.0
-    - 7.20.0
-    - 7.21.0
-    - 7.22.0
-    - 7.23.0
-    - 7.24.0
-  - dependency-name: mini-css-extract-plugin
-    versions:
-    - 1.3.5
-    - 1.3.6
-    - 1.3.7
-    - 1.3.8
-    - 1.3.9
-    - 1.4.0
-    - 1.4.1
-    - 1.5.0
-  - dependency-name: "@babel/cli"
-    versions:
-    - 7.12.13
-    - 7.12.16
-    - 7.12.17
-    - 7.13.0
-    - 7.13.10
-    - 7.13.14
-  - dependency-name: vue-styleguidist
-    versions:
-    - 4.35.0
-    - 4.36.0
-    - 4.36.1
-    - 4.37.0
-    - 4.37.1
-    - 4.38.0
-  - dependency-name: "@babel/plugin-transform-runtime"
-    versions:
-    - 7.12.13
-    - 7.12.15
-    - 7.12.17
-    - 7.13.0
-    - 7.13.1
-    - 7.13.10
-    - 7.13.2
-    - 7.13.4
-    - 7.13.5
-    - 7.13.6
-    - 7.13.7
-    - 7.13.8
-    - 7.13.9
-  - dependency-name: "@babel/register"
-    versions:
-    - 7.12.13
-    - 7.13.0
-    - 7.13.14
-    - 7.13.8
-  - dependency-name: vuex
-    versions:
-    - 3.6.2
-  - dependency-name: "@babel/plugin-proposal-class-properties"
-    versions:
-    - 7.12.13
-  - dependency-name: webpack-cli
-    versions:
-    - 4.5.0
+    - ">= 0"

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/change-ocselect-label

@@ -0,0 +1,9 @@
+Change: Label for OcSelect
+
+We've added a configurable `<label>` for OcSelect accessible via the `label` property.
+This shadows the `label` property of `vue-select`. Hence we introduced the `optionLabel`
+property on OcSelect which maps to the `label` property of `vue-select`.
+
+https://github.com/owncloud/owncloud-design-system/pull/1633
+https://github.com/owncloud/owncloud-design-system/pull/1570
+https://github.com/owncloud/owncloud-design-system/issues/1503

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

l10n/translations.json

@@ -1 +1 @@
-{"cs_CZ":{"Actions":"Činnosti","Deleted":"Smazáno","file":"soubor","folder":"adresář","Modified":"Upraveno","Name":"Název","Select file":"Vybrat soubor","Shared with":"Sdíleno s","Show details":"Zobrazit podrobnosti","Size":"Velikost","Status":"Stav"},"de":{"Actions":"Aktionen","Clear input":"Eingabe zurücksetzen","Clear search query":"Suchanfrage zurücksetzen","Close alert":"Warnung schließen","Deleted":"Gelöscht","Expand more":"Mehr anzeigen","file":"Datei","folder":"Ordner","Loading results":"Lade Ergebnisse","Modified":"Geändert","Name":"Name","No options available.":"Keine Optionen vorhanden.","Opens in a new window":"Öffnet in einem neuen Fenster","Search for option":"Nach Option suchen","Select all resources":"Alle Dateien auswählen","Select file":"Datei auswählen","Select folder":"Ordner auswählen","Share owner":"Freigabe durch","Shared on":"Geteilt am","Shared with":"Geteilt mit","Show details":"Details anzeigen","Size":"Größe","Sort by %{ name }":"Nach %{ name } sortieren","Status":"Status","This %{ resourceType } is owned by %{ ownerName }":"Diese(r) %{ resourceType } gehört %{ ownerName }","This %{ resourceType } is shared via %{ linkCount } link":["Diese(r) %{ resourceType } wurde durch %{ linkCount } Link geteilt","Diese(r) %{ resourceType } wurde durch %{ linkCount } Links geteilt"],"This %{ resourceType } is shared via %{ shareCount } invite":["Diese(r) %{ resourceType } wurde durch %{ shareCount } Einladung geteilt","Diese(r) %{ resourceType } wurde durch %{ shareCount } Einladungen geteilt"]},"es":{"Actions":"Acciones","Clear input":"Entrada clara","Clear search query":"Borrar consulta de búsqueda","Close alert":"Cerrar alerta","Deleted":"Eliminado","Expand more":"Expandir más","file":"fichero","folder":"carpeta","Loading results":"Cargando resultados","Modified":"Modificado","Name":"Nombre","No options available.":"No hay opciones disponibles.","Opens in a new window":"Se abre en una nueva ventana","Search for option":"Buscar opción","Select all resources":"Seleccionar todos los recursos","Select file":"Seleccionar archivo","Select folder":"Seleccione la carpeta","Share owner":"Compartir propietario","Shared on":"Compartido en","Shared with":"Compartido con","Show details":"Mostar detalles","Size":"Tamaño","Sort by %{ name }":"Ordenar por nombre %{ name }","Status":"Estado","This %{ resourceType } is owned by %{ ownerName }":"Este %{ resourceType } es propiedad de %{ ownerName }"},"fr":{"Actions":"Actions","Deleted":"Supprimé","file":"fichier","folder":"dossier","Modified":"Modifié","Name":"Nom","Select file":"Sélectionnez le fichier","Shared with":"Partagé avec","Show details":"Afficher les détails","Size":"Taille","Status":"Status"},"gl":{"Actions":"Accións","Deleted":"Eliminado","file":"ficheiro","folder":"cartafol","Loading results":"Cargando os resultados","Modified":"Modificado","Name":"Nome","Select all resources":"Selecciona todos os recursos","Select file":"Seleccionar ficheiro","Shared with":"Compartido con","Show details":"Amosar os detalles","Size":"Tamaño","Status":"Estado"},"it":{"Actions":"Azioni","Deleted":"Eliminato","file":"file","folder":"cartella","Modified":"Modificato","Name":"Nome","Select file":"Seleziona file","Shared with":"Condiviso con","Show details":"Mostra i dettagli","Size":"Dimensione","Status":"Stato"}}
+{"cs_CZ":{"Actions":"Činnosti","Deleted":"Smazáno","file":"soubor","folder":"adresář","Modified":"Upraveno","Name":"Název","Select file":"Vybrat soubor","Shared with":"Sdíleno s","Show details":"Zobrazit podrobnosti","Size":"Velikost","Status":"Stav"},"de":{"Actions":"Aktionen","Clear input":"Eingabe zurücksetzen","Clear search query":"Suchanfrage zurücksetzen","Breadcrumb navigation":"Brotkrümelnavigation","Close alert":"Warnung schließen","Deleted":"Gelöscht","Expand more":"Mehr anzeigen","file":"Datei","folder":"Ordner","Loading results":"Lade Ergebnisse","Modified":"Geändert","Name":"Name","No options available.":"Keine Optionen vorhanden.","Opens in a new window":"Öffnet in einem neuen Fenster","Search for option":"Nach Option suchen","Select all resources":"Alle Dateien auswählen","Select file":"Datei auswählen","Select folder":"Ordner auswählen","Share owner":"Freigabe durch","Shared on":"Geteilt am","Shared with":"Geteilt mit","Show details":"Details anzeigen","Size":"Größe","Sort by %{ name }":"Nach %{ name } sortieren","Status":"Status","This %{ resourceType } is owned by %{ ownerName }":"Diese(r) %{ resourceType } gehört %{ ownerName }","This %{ resourceType } is shared via %{ linkCount } link":["Diese(r) %{ resourceType } wurde durch %{ linkCount } Link geteilt","Diese(r) %{ resourceType } wurde durch %{ linkCount } Links geteilt"],"This %{ resourceType } is shared via %{ shareCount } invite":["Diese(r) %{ resourceType } wurde durch %{ shareCount } Einladung geteilt","Diese(r) %{ resourceType } wurde durch %{ shareCount } Einladungen geteilt"]},"es":{"Actions":"Acciones","Clear input":"Entrada clara","Clear search query":"Borrar consulta de búsqueda","Close alert":"Cerrar alerta","Deleted":"Eliminado","Expand more":"Expandir más","file":"fichero","folder":"carpeta","Loading results":"Cargando resultados","Modified":"Modificado","Name":"Nombre","No options available.":"No hay opciones disponibles.","Opens in a new window":"Se abre en una nueva ventana","Search for option":"Buscar opción","Select all resources":"Seleccionar todos los recursos","Select file":"Seleccionar archivo","Select folder":"Seleccione la carpeta","Share owner":"Compartir propietario","Shared on":"Compartido en","Shared with":"Compartido con","Show details":"Mostar detalles","Size":"Tamaño","Sort by %{ name }":"Ordenar por nombre %{ name }","Status":"Estado","This %{ resourceType } is owned by %{ ownerName }":"Este %{ resourceType } es propiedad de %{ ownerName }"},"fr":{"Actions":"Actions","Deleted":"Supprimé","file":"fichier","folder":"dossier","Modified":"Modifié","Name":"Nom","Select file":"Sélectionnez le fichier","Shared with":"Partagé avec","Show details":"Afficher les détails","Size":"Taille","Status":"Status"},"gl":{"Actions":"Accións","Deleted":"Eliminado","file":"ficheiro","folder":"cartafol","Loading results":"Cargando os resultados","Modified":"Modificado","Name":"Nome","Select all resources":"Selecciona todos os recursos","Select file":"Seleccionar ficheiro","Shared with":"Compartido con","Show details":"Amosar os detalles","Size":"Tamaño","Status":"Estado"},"it":{"Actions":"Azioni","Deleted":"Eliminato","file":"file","folder":"cartella","Modified":"Modificato","Name":"Nome","Select file":"Seleziona file","Shared with":"Condiviso con","Show details":"Mostra i dettagli","Size":"Dimensione","Status":"Stato"}}

package.json

@@ -93,7 +93,6 @@
     "luxon": "^1.22.0",
     "mini-css-extract-plugin": "^1.3.1",
     "node-notifier": "^9.0.0",
-    "node-sass": "^5.0.0",
     "npm": "^7.9.0",
     "npm-run-all": "^4.1.5",
     "onchange": "^7.1.0",
@@ -107,6 +106,7 @@
     "postcss-url": "^9.0.0",
     "prettier": "^2.2.1",
     "rimraf": "^3.0.2",
+    "sass": "1.32.12",
     "sass-loader": "^10.1.0",
     "sass-resources-loader": "^2.0.1",
     "semver": "^7.1.3",

src/components/OCNotificationMessage.vue

@@ -1,11 +1,12 @@
 <template>
-  <div class="oc-alert" :class="classes">
+  <div
+    class="oc-alert"
+    :class="classes"
+    :role="status === 'danger' ? 'alert' : 'status'"
+    :aria-live="status === 'danger' ? 'assertive' : 'polite'"
+  >
     <oc-icon :variation="iconVariation" size="large" name="info" class="oc-mr-s" />
-    <div
-      class="uk-flex uk-flex-wrap uk-flex-middle uk-flex-1 oc-mr"
-      :role="status === 'danger' ? 'alert' : 'status'"
-      :aria-live="status === 'danger' ? 'assertive' : 'polite'"
-    >
+    <div class="uk-flex uk-flex-wrap uk-flex-middle uk-flex-1 oc-mr">
       <div class="oc-notification-message-title">
         {{ title }}
       </div>
@@ -16,13 +17,16 @@
   </div>
 </template>
 <script>
+import OcIcon from "./OcIcon.vue"
+
 /**
  * Notifications are used to inform users about errors, warnings and as confirmations for their actions.
  */
 export default {
   name: "OcNotificationMessage",
   status: "review",
   release: "1.0.0",
+  components: { OcIcon },
   props: {
     /**
      * Notification messages are sub components of the oc-notifications component.

src/components/OcAlert.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="_class" uk-alert>
+  <div :class="_class" uk-alert role="alert">
     <oc-button
       v-if="!noClose"
       class="uk-alert-close"

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">{{
@@ -140,12 +143,16 @@ export default {
 
     > :last-child > span {
       color: var(--oc-color-text-default);
+
+      &:hover {
+        text-decoration: none;
+      }
     }
 
     > li a:hover,
     > li span:hover,
     > li button:hover {
-      color: var(--oc-color-swatch-primary-default);
+      color: var(--oc-color-text-default);
     }
   }
 

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;

src/components/OcDrop.spec.js

@@ -101,12 +101,10 @@ describe("OcDrop", () => {
     await trigger.trigger("click") // show
     await wait()
     expect(wrapper.findComponent(Drop).exists()).toBeTruthy()
-    expect(trigger.attributes()["aria-expanded"]).toBe("true")
     expect(wrapper.element).toMatchSnapshot()
 
     await trigger.trigger("click") // hide
     await wait()
-    expect(trigger.attributes()["aria-expanded"]).toBe("false")
     expect(wrapper.element).toMatchSnapshot()
 
     await wrapper.setData({
@@ -115,7 +113,6 @@ describe("OcDrop", () => {
 
     await trigger.trigger("mouseenter") // show
     await wait()
-    expect(trigger.attributes()["aria-expanded"]).toBe("true")
     expect(wrapper.element).toMatchSnapshot()
   })
 })

src/components/OcDrop.vue

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

src/components/OcModal.vue

@@ -1,12 +1,13 @@
 <template>
-  <div class="oc-modal-background" aria-labelledby="oc-modal-title">
+  <div class="oc-modal-background">
     <focus-trap :active="focusTrapActive">
       <div
         ref="$_ocModal"
         :class="classes"
         tabindex="0"
         role="dialog"
         aria-modal="true"
+        aria-labelledby="oc-modal-title"
         @keydown.esc="cancelModalAction"
       >
         <div class="oc-modal-title">