fix(theming): Adjust dark theme to be accessible adjust cypress tests

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

Author: susnux

apps/theming/lib/Themes/DarkTheme.php

@@ -55,14 +55,14 @@ public function getCSSVariables(): array {
 		$colorMainText = '#D8D8D8';
 		$colorMainBackground = '#171717';
 		$colorMainBackgroundRGB = join(',', $this->util->hexToRGB($colorMainBackground));
-		$colorTextMaxcontrast = $this->util->darken($colorMainText, 30);
+		$colorTextMaxcontrast = $this->util->darken($colorMainText, 28);
 
 		$colorBoxShadow = $this->util->darken($colorMainBackground, 70);
 		$colorBoxShadowRGB = join(',', $this->util->hexToRGB($colorBoxShadow));
 
-		$colorError = '#d91812';
+		$colorError = '#ec1a13';
 		$colorWarning = '#c28900';
-		$colorSuccess = '#2d7b41';
+		$colorSuccess = '#328647';
 		$colorInfo = '#0071ad';
 
 		return array_merge(

…ps/theming/__tests__/accessibility.cy.ts cypress/e2e/theming/accessibility.cy.tsapps/theming/__tests__/accessibility.cy.ts renamed to cypress/e2e/theming/accessibility.cy.ts apps/theming/__tests__/accessibility.cy.ts renamed to cypress/e2e/theming/accessibility.cy.ts

@@ -1,5 +1,4 @@
-// eslint-disable-next-line import/no-webpack-loader-syntax, import/no-unresolved
-import style from '!raw-loader!../css/default.css'
+const themesToTest = ['light', 'dark', 'light-highcontrast', 'dark-highcontrast']
 
 const testCases = {
 	'Main text': {
@@ -8,7 +7,6 @@ const testCases = {
 			// 'color-text-light', deprecated
 			// 'color-text-lighter', deprecated
 			'color-text-maxcontrast',
-			'color-text-maxcontrast-default',
 		],
 		backgroundColors: [
 			'color-background-main',
@@ -86,42 +84,48 @@ function createTestCase(foreground: string, background: string) {
 }
 
 describe('Accessibility of Nextcloud theming', () => {
-	before(() => {
-		cy.injectAxe()
+	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' })
+				})
+			})
 
-		const el = document.createElement('style')
-		el.innerText = style
-		document.head.appendChild(el)
-	})
+			beforeEach(() => {
+				cy.document().then(doc => {
+					const root = doc.querySelector('main')
+					if (root === null) {
+						throw new Error('No test root found')
+					}
+					for (const child of root.children) {
+						root.removeChild(child)
+					}
+				})
+			})
 
-	beforeEach(() => {
-		cy.document().then(doc => {
-			const root = doc.querySelector('[data-cy-root]')
-			if (root === null) {
-				throw new Error('No test root found')
-			}
-			for (const child of root.children) {
-				root.removeChild(child)
-			}
-		})
-	})
-
-	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}`, () => {
-						const element = createTestCase(foreground, background)
-						cy.document().then(doc => {
-							const root = doc.querySelector('[data-cy-root]')
-							// 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]')
-						})
-					})
-				}
+			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}`, () => {
+								const element = createTestCase(foreground, background)
+								cy.document().then(doc => {
+									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]')
+								})
+							})
+						}
+					}
+				})
 			}
 		})
 	}

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