Skip to content

Commit 6adab83

Browse files
susnuxbackportbot-nextcloud[bot]
susnux
authored and
backportbot-nextcloud[bot]
committed
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 <[email protected]>
1 parent dce63ce commit 6adab83

6 files changed

Lines changed: 163 additions & 137 deletions

File tree

‎apps/theming/__tests__/accessibility.cy.ts‎

Lines changed: 0 additions & 128 deletions
This file was deleted.

‎apps/theming/css/default.css‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,10 @@
2525
--color-error-rgb: 217,24,18;
2626
--color-error-hover: #dd342f;
2727
--color-error-text: #c61610;
28-
--color-warning: #c28900;
29-
--color-warning-rgb: 194,137,0;
30-
--color-warning-hover: #cea032;
31-
--color-warning-text: #8f6500;
28+
--color-warning: #b88100;
29+
--color-warning-rgb: 184,129,0;
30+
--color-warning-hover: #c69a32;
31+
--color-warning-text: #855d00;
3232
--color-success: #2d7b41;
3333
--color-success-rgb: 45,123,65;
3434
--color-success-hover: #448955;

‎apps/theming/lib/Themes/DarkTheme.php‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -55,15 +55,15 @@ public function getCSSVariables(): array {
5555
$colorMainText = '#D8D8D8';
5656
$colorMainBackground = '#171717';
5757
$colorMainBackgroundRGB = join(',', $this->util->hexToRGB($colorMainBackground));
58-
$colorTextMaxcontrast = $this->util->darken($colorMainText, 30);
58+
$colorTextMaxcontrast = $this->util->darken($colorMainText, 28);
5959

6060
$colorBoxShadow = $this->util->darken($colorMainBackground, 70);
6161
$colorBoxShadowRGB = join(',', $this->util->hexToRGB($colorBoxShadow));
6262

63-
$colorError = '#d91812';
63+
$colorError = '#ee312b';
6464
$colorWarning = '#c28900';
65-
$colorSuccess = '#2d7b41';
66-
$colorInfo = '#0071ad';
65+
$colorSuccess = '#36914e';
66+
$colorInfo = '#007bbd';
6767

6868
return array_merge(
6969
$defaultVariables,

‎apps/theming/lib/Themes/DefaultTheme.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,7 @@ public function getCSSVariables(): array {
112112
$colorBoxShadowRGB = join(',', $this->util->hexToRGB($colorBoxShadow));
113113

114114
$colorError = '#d91812';
115-
$colorWarning = '#c28900';
115+
$colorWarning = '#b88100';
116116
$colorSuccess = '#2d7b41';
117117
$colorInfo = '#0071ad';
118118

‎cypress/e2e/theming/a11y-color-contrast.cy.ts‎

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
const themesToTest = ['light', 'dark', 'light-highcontrast', 'dark-highcontrast']
2+
3+
const testCases = {
4+
'Main text': {
5+
foregroundColors: [
6+
'color-main-text',
7+
// 'color-text-light', deprecated
8+
// 'color-text-lighter', deprecated
9+
'color-text-maxcontrast',
10+
],
11+
backgroundColors: [
12+
'color-main-background',
13+
'color-background-hover',
14+
'color-background-dark',
15+
// 'color-background-darker', this should only be used for elements not for text
16+
],
17+
},
18+
'blurred background': {
19+
foregroundColors: [
20+
'color-main-text',
21+
'color-text-maxcontrast-blur',
22+
],
23+
backgroundColors: [
24+
'color-main-background-blur',
25+
],
26+
},
27+
Primary: {
28+
foregroundColors: [
29+
'color-primary-text',
30+
],
31+
backgroundColors: [
32+
// 'color-primary-default', this should only be used for elements not for text!
33+
// 'color-primary-hover', this should only be used for elements and not for text!
34+
'color-primary',
35+
],
36+
},
37+
'Primary light': {
38+
foregroundColors: [
39+
'color-primary-light-text',
40+
],
41+
backgroundColors: [
42+
'color-primary-light',
43+
'color-primary-light-hover',
44+
],
45+
},
46+
'Primary element': {
47+
foregroundColors: [
48+
'color-primary-element-text',
49+
'color-primary-element-text-dark',
50+
],
51+
backgroundColors: [
52+
'color-primary-element',
53+
'color-primary-element-hover',
54+
],
55+
},
56+
'Primary element light': {
57+
foregroundColors: [
58+
'color-primary-element-light-text',
59+
],
60+
backgroundColors: [
61+
'color-primary-element-light',
62+
'color-primary-element-light-hover',
63+
],
64+
},
65+
'Servity information texts': {
66+
foregroundColors: [
67+
'color-error-text',
68+
'color-warning-text',
69+
'color-success-text',
70+
'color-info-text',
71+
],
72+
backgroundColors: [
73+
'color-main-background',
74+
'color-background-hover',
75+
'color-main-background-blur',
76+
],
77+
},
78+
}
79+
80+
/**
81+
* Create a wrapper element with color and background set
82+
*
83+
* @param foreground The foreground color (css variable without leading --)
84+
* @param background The background color
85+
*/
86+
function createTestCase(foreground: string, background: string) {
87+
const wrapper = document.createElement('div')
88+
wrapper.style.padding = '14px'
89+
wrapper.style.color = `var(--${foreground})`
90+
wrapper.style.backgroundColor = `var(--${background})`
91+
if (background.includes('blur')) {
92+
wrapper.style.backdropFilter = 'var(--filter-background-blur)'
93+
}
94+
95+
const testCase = document.createElement('div')
96+
testCase.innerText = `${foreground} ${background}`
97+
testCase.setAttribute('data-cy-testcase', '')
98+
99+
wrapper.appendChild(testCase)
100+
return wrapper
101+
}
102+
103+
describe('Accessibility of Nextcloud theming colors', () => {
104+
for (const theme of themesToTest) {
105+
context(`Theme: ${theme}`, () => {
106+
before(() => {
107+
cy.createRandomUser().then(($user) => {
108+
// set user theme
109+
cy.runOccCommand(`user:setting -- '${$user.userId}' theming enabled-themes '["${theme}"]'`)
110+
cy.login($user)
111+
cy.visit('/')
112+
cy.injectAxe({ axeCorePath: 'node_modules/axe-core/axe.min.js' })
113+
})
114+
})
115+
116+
beforeEach(() => {
117+
cy.document().then(doc => {
118+
// Unset background image and thus use background-color for testing blur background (images do not work with axe-core)
119+
doc.body.style.backgroundImage = 'unset'
120+
121+
const root = doc.querySelector('main')
122+
if (root === null) {
123+
throw new Error('No test root found')
124+
}
125+
root.innerHTML = ''
126+
})
127+
})
128+
129+
for (const [name, { backgroundColors, foregroundColors }] of Object.entries(testCases)) {
130+
context(`Accessibility of CSS color variables for ${name}`, () => {
131+
for (const foreground of foregroundColors) {
132+
for (const background of backgroundColors) {
133+
it(`color contrast of ${foreground} on ${background}`, () => {
134+
cy.document().then(doc => {
135+
const element = createTestCase(foreground, background)
136+
const root = doc.querySelector('main')
137+
// eslint-disable-next-line no-unused-expressions
138+
expect(root).not.to.be.undefined
139+
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
140+
root!.appendChild(element)
141+
142+
cy.checkA11y('[data-cy-testcase]', {
143+
runOnly: ['color-contrast'],
144+
})
145+
})
146+
})
147+
}
148+
}
149+
})
150+
}
151+
})
152+
}
153+
})

‎cypress/support/e2e.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
* along with this program. If not, see <http://www.gnu.org/licenses/>.
2020
*
2121
*/
22+
import 'cypress-axe'
2223
import './commands.ts'
2324

2425
// Fix ResizeObserver loop limit exceeded happening in Cypress only

0 commit comments

Comments
 (0)