fix(NcDialog): Ensure the dialog is correctly labelled by its name

* Added `labelId` prop to NcModal to allow label modal without a name
* Pass the navigation id (the ID of the headline element of NcDialog) to `labelId`
* Added cypress tests

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
This commit is contained in:
Ferdinand Thiessen 2024-07-04 00:14:45 +02:00
Родитель c818fb1bf0
Коммит bc4d27d9a3
Не найден ключ, соответствующий данной подписи
Идентификатор ключа GPG: 45FAE7268762B400
9 изменённых файлов: 373 добавлений и 106 удалений

Просмотреть файл

@ -0,0 +1,23 @@
/**
* SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
* SPDX-License-Identifier: AGPL-3.0-or-later
*/
import { mount } from 'cypress/vue'
import NcDialog from '../../src/components/NcDialog/NcDialog.vue'
describe('NcDialog', () => {
it('Dialog is correctly labelled', () => {
mount(NcDialog, {
props: {
show: true,
name: 'My dialog',
},
slots: {
default: 'Text',
},
})
cy.findByRole('dialog', { name: 'My dialog' }).should('exist')
})
})

Просмотреть файл

@ -0,0 +1,82 @@
/**
* SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
* SPDX-License-Identifier: AGPL-3.0-or-later
*/
import type { Component } from 'vue'
import { mount } from 'cypress/vue'
import { h } from 'vue'
import NcModal from '../../src/components/NcModal/NcModal.vue'
describe('NcModal', () => {
it('Modal is labelled correctly if name is set', () => {
mount(NcModal, {
props: {
show: true,
name: 'My modal',
size: 'small',
},
slots: {
default: 'Text',
},
})
cy.findByRole('dialog', { name: 'My modal' }).should('exist')
})
it('Modal is labelled correctly if `labelId` is set', () => {
mount(NcModal, {
props: {
show: true,
size: 'small',
labelId: 'my-id',
},
slots: {
default: '<h2 id="my-id">Labelled dialog</h2>',
},
})
cy.findByRole('dialog', { name: 'Labelled dialog' }).should('exist')
})
it('Modal is labelled correctly if `labelId` and `name` are set', () => {
mount(NcModal, {
props: {
show: true,
size: 'small',
name: 'My modal',
labelId: 'my-id',
},
slots: {
default: '<h2 id="my-id">Real name</h2>',
},
})
cy.findByRole('dialog', { name: 'Real name' }).should('exist')
})
it('close button is visible when content is scrolled', () => {
mount(NcModal, {
props: {
show: true,
size: 'small',
name: 'Name',
},
slots: {
// Create two div as children, first is 100vh = overflows the content, second just gets some data attribute so we can scroll into view
default: {
render: () =>
h('div', [
h('div', { style: 'height: 100vh;' }),
h('div', { 'data-cy': 'bottom' }),
]),
} as Component,
},
})
cy.get('[data-cy="bottom"]').scrollIntoView()
cy.get('button.modal-container__close').should('be.visible')
})
})

Просмотреть файл

@ -1,34 +0,0 @@
/**
* SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
* SPDX-License-Identifier: AGPL-3.0-or-later
*/
import { mount } from 'cypress/vue'
import NcModal from '../../src/components/NcModal/NcModal.vue'
import type { Component } from 'vue'
import { h } from 'vue'
describe('NcModal', () => {
it('close button is visible when content is scrolled', () => {
mount(NcModal, {
props: {
show: true,
size: 'small',
name: 'Name',
},
slots: {
// Create two div as children, first is 100vh = overflows the content, second just gets some data attribute so we can scroll into view
default: {
render: () =>
h('div', [
h('div', { style: { height: '100vh' } }),
h('div', { 'data-cy': 'bottom' }),
]),
} as Component,
},
})
cy.get('[data-cy="bottom"]').scrollIntoView()
cy.get('button.modal-container__close').should('be.visible')
})
})

Просмотреть файл

@ -5,4 +5,6 @@
import { addCompareSnapshotCommand } from 'cypress-visual-regression/dist/command'
import '@testing-library/cypress/add-commands'
addCompareSnapshotCommand()

Просмотреть файл

@ -6,7 +6,8 @@
"rootDir": "..",
"types": [
"cypress",
"cypress-visual-regression"
"cypress-visual-regression",
"@testing-library/cypress"
]
}
}

295
package-lock.json сгенерированный
Просмотреть файл

@ -10,7 +10,7 @@
"license": "AGPL-3.0-or-later",
"dependencies": {
"@ckpack/vue-color": "^1.5.0",
"@floating-ui/dom": "^1.6.6",
"@floating-ui/dom": "^1.6.7",
"@nextcloud/auth": "^2.3.0",
"@nextcloud/axios": "^2.5.0",
"@nextcloud/browser-storage": "^0.4.0",
@ -45,7 +45,7 @@
"unified": "^11.0.5",
"unist-builder": "^4.0.0",
"unist-util-visit": "^5.0.0",
"vue": "^3.4.30",
"vue": "^3.4.31",
"vue-datepicker-next": "^1.0.3",
"vue-router": "^4.4.0",
"vue-select": "^4.0.0-beta.6"
@ -64,6 +64,7 @@
"@nextcloud/stylelint-config": "^3.0.1",
"@nextcloud/vite-config": "^2.1.0",
"@nextcloud/webpack-vue-config": "github:nextcloud/webpack-vue-config#vue3",
"@testing-library/cypress": "^10.0.2",
"@types/gettext-parser": "^4.0.4",
"@vitest/coverage-v8": "^1.6.0",
"@vue/test-utils": "^2.4.6",
@ -2726,18 +2727,18 @@
}
},
"node_modules/@floating-ui/dom": {
"version": "1.6.6",
"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.6.tgz",
"integrity": "sha512-qiTYajAnh3P+38kECeffMSQgbvXty2VB6rS+42iWR4FPIlZjLK84E9qtLnMTLIpPz2znD/TaFqaiavMUrS+Hcw==",
"version": "1.6.7",
"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.7.tgz",
"integrity": "sha512-wmVfPG5o2xnKDU4jx/m4w5qva9FWHcnZ8BvzEe90D/RpwsJaTAVYPEPdQ8sbr/N8zZTAHlZUTQdqg8ZUbzHmng==",
"dependencies": {
"@floating-ui/core": "^1.0.0",
"@floating-ui/utils": "^0.2.3"
"@floating-ui/core": "^1.6.0",
"@floating-ui/utils": "^0.2.4"
}
},
"node_modules/@floating-ui/utils": {
"version": "0.2.3",
"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.3.tgz",
"integrity": "sha512-XGndio0l5/Gvd6CLIABvsav9HHezgDFFhDfHk1bvLfr9ni8dojqLSvBbotJEjmIwNHL7vK4QzBJTdBRoB+c1ww=="
"version": "0.2.4",
"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.4.tgz",
"integrity": "sha512-dWO2pw8hhi+WrXq1YJy2yCuWoL20PddgGaqTgVe4cOS9Q6qklXCiA1tJEqX6BEwRNSCP84/afac9hd4MS+zEUA=="
},
"node_modules/@fontsource/roboto": {
"version": "5.0.13",
@ -4025,6 +4026,144 @@
"integrity": "sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==",
"dev": true
},
"node_modules/@testing-library/cypress": {
"version": "10.0.2",
"resolved": "https://registry.npmjs.org/@testing-library/cypress/-/cypress-10.0.2.tgz",
"integrity": "sha512-dKv95Bre5fDmNb9tOIuWedhGUryxGu1GWYWtXDqUsDPcr9Ekld0fiTb+pcBvSsFpYXAZSpmyEjhoXzLbhh06yQ==",
"dev": true,
"dependencies": {
"@babel/runtime": "^7.14.6",
"@testing-library/dom": "^10.1.0"
},
"engines": {
"node": ">=12",
"npm": ">=6"
},
"peerDependencies": {
"cypress": "^12.0.0 || ^13.0.0"
}
},
"node_modules/@testing-library/dom": {
"version": "10.3.0",
"resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.3.0.tgz",
"integrity": "sha512-pT/TYB2+IyMYkkB6lqpkzD7VFbsR0JBJtflK3cS68sCNWxmOhWwRm1XvVHlseNEorsNcxkYsb4sRDV3aNIpttg==",
"dev": true,
"dependencies": {
"@babel/code-frame": "^7.10.4",
"@babel/runtime": "^7.12.5",
"@types/aria-query": "^5.0.1",
"aria-query": "5.3.0",
"chalk": "^4.1.0",
"dom-accessibility-api": "^0.5.9",
"lz-string": "^1.5.0",
"pretty-format": "^27.0.2"
},
"engines": {
"node": ">=18"
}
},
"node_modules/@testing-library/dom/node_modules/ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"dev": true,
"dependencies": {
"color-convert": "^2.0.1"
},
"engines": {
"node": ">=8"
},
"funding": {
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
}
},
"node_modules/@testing-library/dom/node_modules/chalk": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
"dev": true,
"dependencies": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
},
"engines": {
"node": ">=10"
},
"funding": {
"url": "https://github.com/chalk/chalk?sponsor=1"
}
},
"node_modules/@testing-library/dom/node_modules/color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"dev": true,
"dependencies": {
"color-name": "~1.1.4"
},
"engines": {
"node": ">=7.0.0"
}
},
"node_modules/@testing-library/dom/node_modules/color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"dev": true
},
"node_modules/@testing-library/dom/node_modules/has-flag": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
"dev": true,
"engines": {
"node": ">=8"
}
},
"node_modules/@testing-library/dom/node_modules/pretty-format": {
"version": "27.5.1",
"resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
"integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
"dev": true,
"dependencies": {
"ansi-regex": "^5.0.1",
"ansi-styles": "^5.0.0",
"react-is": "^17.0.1"
},
"engines": {
"node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
}
},
"node_modules/@testing-library/dom/node_modules/pretty-format/node_modules/ansi-styles": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
"integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
"dev": true,
"engines": {
"node": ">=10"
},
"funding": {
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
}
},
"node_modules/@testing-library/dom/node_modules/react-is": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
"dev": true
},
"node_modules/@testing-library/dom/node_modules/supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
"dev": true,
"dependencies": {
"has-flag": "^4.0.0"
},
"engines": {
"node": ">=8"
}
},
"node_modules/@tsconfig/node10": {
"version": "1.0.11",
"resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.11.tgz",
@ -4055,6 +4194,12 @@
"integrity": "sha512-ebDJ9b0e702Yr7pWgB0jzm+CX4Srzz8RcXtLJDJB+BSccqMa36uyH/zUsSYao5+BD1ytv3k3rPYCq4mAE1hsXA==",
"dev": true
},
"node_modules/@types/aria-query": {
"version": "5.0.4",
"resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
"integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
"dev": true
},
"node_modules/@types/body-parser": {
"version": "1.19.5",
"resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.5.tgz",
@ -4884,36 +5029,36 @@
}
},
"node_modules/@vue/compiler-core": {
"version": "3.4.30",
"resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.30.tgz",
"integrity": "sha512-ZL8y4Xxdh8O6PSwfdZ1IpQ24PjTAieOz3jXb/MDTfDtANcKBMxg1KLm6OX2jofsaQGYfIVzd3BAG22i56/cF1w==",
"version": "3.4.31",
"resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.31.tgz",
"integrity": "sha512-skOiodXWTV3DxfDhB4rOf3OGalpITLlgCeOwb+Y9GJpfQ8ErigdBUHomBzvG78JoVE8MJoQsb+qhZiHfKeNeEg==",
"dependencies": {
"@babel/parser": "^7.24.7",
"@vue/shared": "3.4.30",
"@vue/shared": "3.4.31",
"entities": "^4.5.0",
"estree-walker": "^2.0.2",
"source-map-js": "^1.2.0"
}
},
"node_modules/@vue/compiler-dom": {
"version": "3.4.30",
"resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.30.tgz",
"integrity": "sha512-+16Sd8lYr5j/owCbr9dowcNfrHd+pz+w2/b5Lt26Oz/kB90C9yNbxQ3bYOvt7rI2bxk0nqda39hVcwDFw85c2Q==",
"version": "3.4.31",
"resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.31.tgz",
"integrity": "sha512-wK424WMXsG1IGMyDGyLqB+TbmEBFM78hIsOJ9QwUVLGrcSk0ak6zYty7Pj8ftm7nEtdU/DGQxAXp0/lM/2cEpQ==",
"dependencies": {
"@vue/compiler-core": "3.4.30",
"@vue/shared": "3.4.30"
"@vue/compiler-core": "3.4.31",
"@vue/shared": "3.4.31"
}
},
"node_modules/@vue/compiler-sfc": {
"version": "3.4.30",
"resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.30.tgz",
"integrity": "sha512-8vElKklHn/UY8+FgUFlQrYAPbtiSB2zcgeRKW7HkpSRn/JjMRmZvuOtwDx036D1aqKNSTtXkWRfqx53Qb+HmMg==",
"version": "3.4.31",
"resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.31.tgz",
"integrity": "sha512-einJxqEw8IIJxzmnxmJBuK2usI+lJonl53foq+9etB2HAzlPjAS/wa7r0uUpXw5ByX3/0uswVSrjNb17vJm1kQ==",
"dependencies": {
"@babel/parser": "^7.24.7",
"@vue/compiler-core": "3.4.30",
"@vue/compiler-dom": "3.4.30",
"@vue/compiler-ssr": "3.4.30",
"@vue/shared": "3.4.30",
"@vue/compiler-core": "3.4.31",
"@vue/compiler-dom": "3.4.31",
"@vue/compiler-ssr": "3.4.31",
"@vue/shared": "3.4.31",
"estree-walker": "^2.0.2",
"magic-string": "^0.30.10",
"postcss": "^8.4.38",
@ -4921,12 +5066,12 @@
}
},
"node_modules/@vue/compiler-ssr": {
"version": "3.4.30",
"resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.30.tgz",
"integrity": "sha512-ZJ56YZGXJDd6jky4mmM0rNaNP6kIbQu9LTKZDhcpddGe/3QIalB1WHHmZ6iZfFNyj5mSypTa4+qDJa5VIuxMSg==",
"version": "3.4.31",
"resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.31.tgz",
"integrity": "sha512-RtefmITAje3fJ8FSg1gwgDhdKhZVntIVbwupdyZDSifZTRMiWxWehAOTCc8/KZDnBOcYQ4/9VWxsTbd3wT0hAA==",
"dependencies": {
"@vue/compiler-dom": "3.4.30",
"@vue/shared": "3.4.30"
"@vue/compiler-dom": "3.4.31",
"@vue/shared": "3.4.31"
}
},
"node_modules/@vue/devtools-api": {
@ -4985,49 +5130,49 @@
}
},
"node_modules/@vue/reactivity": {
"version": "3.4.30",
"resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.30.tgz",
"integrity": "sha512-bVJurnCe3LS0JII8PPoAA63Zd2MBzcKrEzwdQl92eHCcxtIbxD2fhNwJpa+KkM3Y/A4T5FUnmdhgKwOf6BfbcA==",
"version": "3.4.31",
"resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.31.tgz",
"integrity": "sha512-VGkTani8SOoVkZNds1PfJ/T1SlAIOf8E58PGAhIOUDYPC4GAmFA2u/E14TDAFcf3vVDKunc4QqCe/SHr8xC65Q==",
"dependencies": {
"@vue/shared": "3.4.30"
"@vue/shared": "3.4.31"
}
},
"node_modules/@vue/runtime-core": {
"version": "3.4.30",
"resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.30.tgz",
"integrity": "sha512-qaFEbnNpGz+tlnkaualomogzN8vBLkgzK55uuWjYXbYn039eOBZrWxyXWq/7qh9Bz2FPifZqGjVDl/FXiq9L2g==",
"version": "3.4.31",
"resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.31.tgz",
"integrity": "sha512-LDkztxeUPazxG/p8c5JDDKPfkCDBkkiNLVNf7XZIUnJ+66GVGkP+TIh34+8LtPisZ+HMWl2zqhIw0xN5MwU1cw==",
"dependencies": {
"@vue/reactivity": "3.4.30",
"@vue/shared": "3.4.30"
"@vue/reactivity": "3.4.31",
"@vue/shared": "3.4.31"
}
},
"node_modules/@vue/runtime-dom": {
"version": "3.4.30",
"resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.30.tgz",
"integrity": "sha512-tV6B4YiZRj5QsaJgw2THCy5C1H+2UeywO9tqgWEc21tn85qHEERndHN/CxlyXvSBFrpmlexCIdnqPuR9RM9thw==",
"version": "3.4.31",
"resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.31.tgz",
"integrity": "sha512-2Auws3mB7+lHhTFCg8E9ZWopA6Q6L455EcU7bzcQ4x6Dn4cCPuqj6S2oBZgN2a8vJRS/LSYYxwFFq2Hlx3Fsaw==",
"dependencies": {
"@vue/reactivity": "3.4.30",
"@vue/runtime-core": "3.4.30",
"@vue/shared": "3.4.30",
"@vue/reactivity": "3.4.31",
"@vue/runtime-core": "3.4.31",
"@vue/shared": "3.4.31",
"csstype": "^3.1.3"
}
},
"node_modules/@vue/server-renderer": {
"version": "3.4.30",
"resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.30.tgz",
"integrity": "sha512-TBD3eqR1DeDc0cMrXS/vEs/PWzq1uXxnvjoqQuDGFIEHFIwuDTX/KWAQKIBjyMWLFHEeTDGYVsYci85z2UbTDg==",
"version": "3.4.31",
"resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.31.tgz",
"integrity": "sha512-D5BLbdvrlR9PE3by9GaUp1gQXlCNadIZytMIb8H2h3FMWJd4oUfkUTEH2wAr3qxoRz25uxbTcbqd3WKlm9EHQA==",
"dependencies": {
"@vue/compiler-ssr": "3.4.30",
"@vue/shared": "3.4.30"
"@vue/compiler-ssr": "3.4.31",
"@vue/shared": "3.4.31"
},
"peerDependencies": {
"vue": "3.4.30"
"vue": "3.4.31"
}
},
"node_modules/@vue/shared": {
"version": "3.4.30",
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.30.tgz",
"integrity": "sha512-CLg+f8RQCHQnKvuHY9adMsMaQOcqclh6Z5V9TaoMgy0ut0tz848joZ7/CYFFyF/yZ5i2yaw7Fn498C+CNZVHIg=="
"version": "3.4.31",
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.31.tgz",
"integrity": "sha512-Yp3wtJk//8cO4NItOPpi3QkLExAr/aLBGZMmTtW9WpdwBCJpRM6zj9WgWktXAl8IDIozwNMByT45JP3tO3ACWA=="
},
"node_modules/@vue/test-utils": {
"version": "2.4.6",
@ -5697,6 +5842,15 @@
"integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
"dev": true
},
"node_modules/aria-query": {
"version": "5.3.0",
"resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
"integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
"dev": true,
"dependencies": {
"dequal": "^2.0.3"
}
},
"node_modules/arr-diff": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz",
@ -9527,6 +9681,12 @@
"integrity": "sha512-LLBi6pEqS6Do3EKQ3J0NqHWV5hhb78Pi8vvESYwyOy2c31ZEZVdtitdzsQsKb7878PEERhzUk0ftqGhG6Mz+pQ==",
"dev": true
},
"node_modules/dom-accessibility-api": {
"version": "0.5.16",
"resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
"integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
"dev": true
},
"node_modules/dom-serializer": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
@ -15536,6 +15696,15 @@
"yallist": "^3.0.2"
}
},
"node_modules/lz-string": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
"integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
"dev": true,
"bin": {
"lz-string": "bin/bin.js"
}
},
"node_modules/magic-string": {
"version": "0.30.10",
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.10.tgz",
@ -25336,15 +25505,15 @@
}
},
"node_modules/vue": {
"version": "3.4.30",
"resolved": "https://registry.npmjs.org/vue/-/vue-3.4.30.tgz",
"integrity": "sha512-NcxtKCwkdf1zPsr7Y8+QlDBCGqxvjLXF2EX+yi76rV5rrz90Y6gK1cq0olIhdWGgrlhs9ElHuhi9t3+W5sG5Xw==",
"version": "3.4.31",
"resolved": "https://registry.npmjs.org/vue/-/vue-3.4.31.tgz",
"integrity": "sha512-njqRrOy7W3YLAlVqSKpBebtZpDVg21FPoaq1I7f/+qqBThK9ChAIjkRWgeP6Eat+8C+iia4P3OYqpATP21BCoQ==",
"dependencies": {
"@vue/compiler-dom": "3.4.30",
"@vue/compiler-sfc": "3.4.30",
"@vue/runtime-dom": "3.4.30",
"@vue/server-renderer": "3.4.30",
"@vue/shared": "3.4.30"
"@vue/compiler-dom": "3.4.31",
"@vue/compiler-sfc": "3.4.31",
"@vue/runtime-dom": "3.4.31",
"@vue/server-renderer": "3.4.31",
"@vue/shared": "3.4.31"
},
"peerDependencies": {
"typescript": "*"

Просмотреть файл

@ -65,7 +65,7 @@
],
"dependencies": {
"@ckpack/vue-color": "^1.5.0",
"@floating-ui/dom": "^1.6.6",
"@floating-ui/dom": "^1.6.7",
"@nextcloud/auth": "^2.3.0",
"@nextcloud/axios": "^2.5.0",
"@nextcloud/browser-storage": "^0.4.0",
@ -100,7 +100,7 @@
"unified": "^11.0.5",
"unist-builder": "^4.0.0",
"unist-util-visit": "^5.0.0",
"vue": "^3.4.30",
"vue": "^3.4.31",
"vue-datepicker-next": "^1.0.3",
"vue-router": "^4.4.0",
"vue-select": "^4.0.0-beta.6"
@ -123,6 +123,7 @@
"@nextcloud/stylelint-config": "^3.0.1",
"@nextcloud/vite-config": "^2.1.0",
"@nextcloud/webpack-vue-config": "github:nextcloud/webpack-vue-config#vue3",
"@testing-library/cypress": "^10.0.2",
"@types/gettext-parser": "^4.0.4",
"@vitest/coverage-v8": "^1.6.0",
"@vue/test-utils": "^2.4.6",

Просмотреть файл

@ -327,7 +327,7 @@ export default defineComponent({
/**
* The unique id of the nav element
*/
const navigationId = ref(GenRandomId())
const navigationId = GenRandomId()
/**
* aria-label attribute for the nav element
@ -343,7 +343,7 @@ export default defineComponent({
return undefined
}
// Use dialog name as a fallback label for navigation
return props.navigationAriaLabelledby || navigationId.value
return props.navigationAriaLabelledby || navigationId
})
/**
@ -390,6 +390,8 @@ export default defineComponent({
container: props.container === undefined ? 'body' : props.container,
// we do not pass the name as we already have the name as the headline
// name: props.name,
// But we need to set the correct label id so the dialog is labelled
labelId: navigationId,
size: props.size,
show: props.open && showModal.value,
outTransition: props.outTransition,

Просмотреть файл

@ -195,7 +195,7 @@ export default {
:style="cssVariables"
role="dialog"
aria-modal="true"
:aria-labelledby="'modal-name-' + randId"
:aria-labelledby="modalLabelId"
:aria-describedby="'modal-description-' + randId"
tabindex="-1">
<!-- Header -->
@ -319,6 +319,10 @@ export default {
</template>
<script>
import { useSwipe } from '@vueuse/core'
import { createFocusTrap } from 'focus-trap'
import Vue from 'vue'
import { getTrapStack } from '../../utils/focusTrap.js'
import { t } from '../../l10n.js'
import GenRandomId from '../../utils/GenRandomId.js'
@ -333,9 +337,6 @@ import Close from 'vue-material-design-icons/Close.vue'
import Pause from 'vue-material-design-icons/Pause.vue'
import Play from 'vue-material-design-icons/Play.vue'
import { createFocusTrap } from 'focus-trap'
import { useSwipe } from '@vueuse/core'
export default {
name: 'NcModal',
@ -494,6 +495,15 @@ export default {
default: undefined,
},
/**
* Id of the element that labels the dialog (the name)
* Not needed if the `name` prop is set, but if no name is set you need to provide the ID of an element to label the dialog for accessibility.
*/
labelId: {
type: String,
default: '',
},
/**
* Set element to return focus to after focus trap deactivation
*
@ -525,6 +535,13 @@ export default {
},
computed: {
/**
* ID of the element to label the modal
*/
modalLabelId() {
return this.labelId || `modal-name-${this.randId}`
},
showModal() {
return (this.show === undefined) ? this.internalShow : this.show
},
@ -583,6 +600,10 @@ export default {
this.mc.stop()
},
mounted() {
if (!this.name && !this.labelId) {
Vue.util.warn('[NcModal] You need either set the name or set a `labelId` for accessibility.')
}
// init clear view
this.useFocusTrap()
this.mc = useSwipe(this.$refs.mask, {