aboutsummaryrefslogtreecommitdiffstats
path: root/cypress
diff options
context:
space:
mode:
authorFerdinand Thiessen <opensource@fthiessen.de>2023-11-30 23:27:44 +0100
committerFerdinand Thiessen <opensource@fthiessen.de>2023-12-01 00:58:30 +0100
commitda346aa80e67e608b1ad2edde4544311c567f4b8 (patch)
treead1ba832f20101773ae46859a61a15f654b65763 /cypress
parent254914a7358a8dbdfe18580cf876c126383cb4ef (diff)
downloadnextcloud-server-da346aa80e67e608b1ad2edde4544311c567f4b8.tar.gz
nextcloud-server-da346aa80e67e608b1ad2edde4544311c567f4b8.zip
fix(theming): Adjust dark theme to be accessible adjust cypress tests
Also fix warning text color for bright / default theme on blurry background Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
Diffstat (limited to 'cypress')
-rw-r--r--cypress/e2e/theming/a11y-color-contrast.cy.ts153
-rw-r--r--cypress/support/e2e.ts1
2 files changed, 154 insertions, 0 deletions
diff --git a/cypress/e2e/theming/a11y-color-contrast.cy.ts b/cypress/e2e/theming/a11y-color-contrast.cy.ts
new file mode 100644
index 00000000000..03a6814ea1f
--- /dev/null
+++ b/cypress/e2e/theming/a11y-color-contrast.cy.ts
@@ -0,0 +1,153 @@
+const themesToTest = ['light', 'dark', 'light-highcontrast', 'dark-highcontrast']
+
+const testCases = {
+ 'Main text': {
+ foregroundColors: [
+ 'color-main-text',
+ // 'color-text-light', deprecated
+ // 'color-text-lighter', deprecated
+ 'color-text-maxcontrast',
+ ],
+ backgroundColors: [
+ 'color-main-background',
+ 'color-background-hover',
+ 'color-background-dark',
+ // 'color-background-darker', this should only be used for elements not for text
+ ],
+ },
+ 'blurred background': {
+ foregroundColors: [
+ 'color-main-text',
+ 'color-text-maxcontrast-blur',
+ ],
+ backgroundColors: [
+ 'color-main-background-blur',
+ ],
+ },
+ Primary: {
+ foregroundColors: [
+ 'color-primary-text',
+ ],
+ backgroundColors: [
+ // 'color-primary-default', this should only be used for elements not for text!
+ // 'color-primary-hover', this should only be used for elements and not for text!
+ 'color-primary',
+ ],
+ },
+ 'Primary light': {
+ foregroundColors: [
+ 'color-primary-light-text',
+ ],
+ backgroundColors: [
+ 'color-primary-light',
+ 'color-primary-light-hover',
+ ],
+ },
+ 'Primary element': {
+ foregroundColors: [
+ 'color-primary-element-text',
+ 'color-primary-element-text-dark',
+ ],
+ backgroundColors: [
+ 'color-primary-element',
+ 'color-primary-element-hover',
+ ],
+ },
+ 'Primary element light': {
+ foregroundColors: [
+ 'color-primary-element-light-text',
+ ],
+ backgroundColors: [
+ 'color-primary-element-light',
+ 'color-primary-element-light-hover',
+ ],
+ },
+ 'Servity information texts': {
+ foregroundColors: [
+ 'color-error-text',
+ 'color-warning-text',
+ 'color-success-text',
+ 'color-info-text',
+ ],
+ backgroundColors: [
+ 'color-main-background',
+ 'color-background-hover',
+ 'color-main-background-blur',
+ ],
+ },
+}
+
+/**
+ * Create a wrapper element with color and background set
+ *
+ * @param foreground The foreground color (css variable without leading --)
+ * @param background The background color
+ */
+function createTestCase(foreground: string, background: string) {
+ const wrapper = document.createElement('div')
+ wrapper.style.padding = '14px'
+ wrapper.style.color = `var(--${foreground})`
+ wrapper.style.backgroundColor = `var(--${background})`
+ if (background.includes('blur')) {
+ wrapper.style.backdropFilter = 'var(--filter-background-blur)'
+ }
+
+ const testCase = document.createElement('div')
+ testCase.innerText = `${foreground} ${background}`
+ testCase.setAttribute('data-cy-testcase', '')
+
+ wrapper.appendChild(testCase)
+ return wrapper
+}
+
+describe('Accessibility of Nextcloud theming colors', () => {
+ for (const theme of themesToTest) {
+ context(`Theme: ${theme}`, () => {
+ before(() => {
+ cy.createRandomUser().then(($user) => {
+ // set user theme
+ cy.runOccCommand(`user:setting -- '${$user.userId}' theming enabled-themes '["${theme}"]'`)
+ cy.login($user)
+ cy.visit('/')
+ cy.injectAxe({ axeCorePath: 'node_modules/axe-core/axe.min.js' })
+ })
+ })
+
+ beforeEach(() => {
+ cy.document().then(doc => {
+ // 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')
+ if (root === null) {
+ throw new Error('No test root found')
+ }
+ root.innerHTML = ''
+ })
+ })
+
+ for (const [name, { backgroundColors, foregroundColors }] of Object.entries(testCases)) {
+ context(`Accessibility of CSS color variables for ${name}`, () => {
+ for (const foreground of foregroundColors) {
+ for (const background of backgroundColors) {
+ it(`color contrast of ${foreground} on ${background}`, () => {
+ cy.document().then(doc => {
+ const element = createTestCase(foreground, background)
+ const root = doc.querySelector('main')
+ // eslint-disable-next-line no-unused-expressions
+ expect(root).not.to.be.undefined
+ // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+ root!.appendChild(element)
+
+ cy.checkA11y('[data-cy-testcase]', {
+ runOnly: ['color-contrast'],
+ })
+ })
+ })
+ }
+ }
+ })
+ }
+ })
+ }
+})
diff --git a/cypress/support/e2e.ts b/cypress/support/e2e.ts
index 2bc91f83ebd..6cf83e94961 100644
--- a/cypress/support/e2e.ts
+++ b/cypress/support/e2e.ts
@@ -19,6 +19,7 @@
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
+import 'cypress-axe'
import './commands.ts'
// Fix ResizeObserver loop limit exceeded happening in Cypress only