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:
Родитель
c818fb1bf0
Коммит
bc4d27d9a3
|
@ -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"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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, {
|
||||
|
|
Загрузка…
Ссылка в новой задаче