diff options
| author | Ferdinand Thiessen <opensource@fthiessen.de> | 2025-01-10 18:17:22 +0100 |
|---|---|---|
| committer | Ferdinand Thiessen <opensource@fthiessen.de> | 2025-01-14 09:18:43 +0100 |
| commit | 182acb1e299f71623609bde7ebca21f71985befd (patch) | |
| tree | 6bb05e73f2a371cbbf4ad33536391617c24ca1ad /cypress | |
| parent | dffab2221de12a02eb0a6789b1321f203ac93e3a (diff) | |
| download | nextcloud-server-182acb1e299f71623609bde7ebca21f71985befd.tar.gz nextcloud-server-182acb1e299f71623609bde7ebca21f71985befd.zip | |
fix(template): Use `<div>` instead of `<main>` to support Vue3 apps mounting
Vue3 does not replace the element while mounting but only renders within
(replace inner HTML).
So it would result in two stacked `<main>` elements which is invalid and
an accessibility issue.
Instead we just use a `<div>` element for mounting.
For Vue2 apps this does not change anything as the whole element will be
replaced with a new `<main>` element.
For vanilla apps this will slightly decrease the accessibility as the
main landmark is now missing, but this is not a hard accessibility issue
as it would be for Vue3 apps having two main elements.
Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
Diffstat (limited to 'cypress')
| -rw-r--r-- | cypress/e2e/theming/a11y-color-contrast.cy.ts | 4 |
1 files changed, 2 insertions, 2 deletions
diff --git a/cypress/e2e/theming/a11y-color-contrast.cy.ts b/cypress/e2e/theming/a11y-color-contrast.cy.ts index ce75e73d6db..bff7df28e8e 100644 --- a/cypress/e2e/theming/a11y-color-contrast.cy.ts +++ b/cypress/e2e/theming/a11y-color-contrast.cy.ts @@ -122,7 +122,7 @@ describe('Accessibility of Nextcloud theming colors', () => { // Unset background image and thus use background-color for testing blur background (images do not work with axe-core) doc.body.style.backgroundImage = 'unset' - const root = doc.querySelector('main') + const root = doc.querySelector('#content') if (root === null) { throw new Error('No test root found') } @@ -137,7 +137,7 @@ describe('Accessibility of Nextcloud theming colors', () => { it(`color contrast of ${foreground} on ${background}`, () => { cy.document().then(doc => { const element = createTestCase(foreground, background) - const root = doc.querySelector('main') + const root = doc.querySelector('#content') // eslint-disable-next-line no-unused-expressions expect(root).not.to.be.undefined // eslint-disable-next-line @typescript-eslint/no-non-null-assertion |