fix(theming): Add `aria-pressed` attribute to active background

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

1 files changed, 29 insertions, 7 deletions

diff --git a/cypress/e2e/theming/user-background.cy.ts b/cypress/e2e/theming/user-background.cy.ts
index 367a237348a..78ff552210b 100644
--- a/cypress/e2e/theming/user-background.cy.ts
+++ b/cypress/e2e/theming/user-background.cy.ts
@@ -38,7 +38,8 @@ describe('User default background settings', function() {
 
 	it('See the user background settings', function() {
 		cy.visit('/settings/user/theming')
-		cy.get('[data-user-theming-background-settings]').scrollIntoView().should('be.visible')
+		cy.get('[data-user-theming-background-settings]').scrollIntoView()
+		cy.get('[data-user-theming-background-settings]').should('be.visible')
 	})
 
 	// Default cloud background is not rendered if admin theming background remains unchanged
@@ -50,6 +51,10 @@ describe('User default background settings', function() {
 		cy.get('[data-user-theming-background-default]').should('be.visible')
 		cy.get('[data-user-theming-background-default]').should('have.class', 'background--active')
 	})
+
+	it('Default background has accessibility attribute set', function() {
+		cy.get('[data-user-theming-background-default]').should('have.attr', 'aria-pressed', 'true')
+	})
 })
 
 describe('User select shipped backgrounds and remove background', function() {
@@ -61,7 +66,8 @@ describe('User select shipped backgrounds and remove background', function() {
 
 	it('See the user background settings', function() {
 		cy.visit('/settings/user/theming')
-		cy.get('[data-user-theming-background-settings]').scrollIntoView().should('be.visible')
+		cy.get('[data-user-theming-background-settings]').scrollIntoView()
+		cy.get('[data-user-theming-background-settings]').should('be.visible')
 	})
 
 	it('Select a shipped background', function() {
@@ -71,6 +77,9 @@ describe('User select shipped backgrounds and remove background', function() {
 		// Select background
 		cy.get(`[data-user-theming-background-shipped="${background}"]`).click()
 
+		// Set the accessibility state
+		cy.get(`[data-user-theming-background-shipped="${background}"]`).should('have.attr', 'aria-pressed', 'true')
+
 		// Validate changed background and primary
 		cy.wait('@setBackground')
 		cy.waitUntil(() => validateBodyThemingCss('#a53c17', background))
@@ -83,9 +92,12 @@ describe('User select shipped backgrounds and remove background', function() {
 		// Select background
 		cy.get(`[data-user-theming-background-shipped="${background}"]`).click()
 
+		// Set the accessibility state
+		cy.get(`[data-user-theming-background-shipped="${background}"]`).should('have.attr', 'aria-pressed', 'true')
+
 		// Validate changed background and primary
 		cy.wait('@setBackground')
-		cy.waitUntil(() => validateBodyThemingCss('#56633d', background, true))
+		cy.waitUntil(() => validateBodyThemingCss('#56633d', background))
 	})
 
 	it('Remove background', function() {
@@ -94,6 +106,9 @@ describe('User select shipped backgrounds and remove background', function() {
 		// Clear background
 		cy.get('[data-user-theming-background-clear]').click()
 
+		// Set the accessibility state
+		cy.get('[data-user-theming-background-clear]').should('have.attr', 'aria-pressed', 'true')
+
 		// Validate clear background
 		cy.wait('@clearBackground')
 		cy.waitUntil(() => validateBodyThemingCss('#56633d', ''))
@@ -109,7 +124,8 @@ describe('User select a custom color', function() {
 
 	it('See the user background settings', function() {
 		cy.visit('/settings/user/theming')
-		cy.get('[data-user-theming-background-settings]').scrollIntoView().should('be.visible')
+		cy.get('[data-user-theming-background-settings]').scrollIntoView()
+		cy.get('[data-user-theming-background-settings]').should('be.visible')
 	})
 
 	it('Select a custom color', function() {
@@ -135,7 +151,8 @@ describe('User select a bright custom color and remove background', function() {
 
 	it('See the user background settings', function() {
 		cy.visit('/settings/user/theming')
-		cy.get('[data-user-theming-background-settings]').scrollIntoView().should('be.visible')
+		cy.get('[data-user-theming-background-settings]').scrollIntoView()
+		cy.get('[data-user-theming-background-settings]').should('be.visible')
 	})
 
 	it('Remove background', function() {
@@ -204,7 +221,8 @@ describe('User select a custom background', function() {
 
 	it('See the user background settings', function() {
 		cy.visit('/settings/user/theming')
-		cy.get('[data-user-theming-background-settings]').scrollIntoView().should('be.visible')
+		cy.get('[data-user-theming-background-settings]').scrollIntoView()
+		cy.get('[data-user-theming-background-settings]').should('be.visible')
 	})
 
 	it('Select a custom background', function() {
@@ -243,7 +261,8 @@ describe('User changes settings and reload the page', function() {
 
 	it('See the user background settings', function() {
 		cy.visit('/settings/user/theming')
-		cy.get('[data-user-theming-background-settings]').scrollIntoView().should('be.visible')
+		cy.get('[data-user-theming-background-settings]').scrollIntoView()
+		cy.get('[data-user-theming-background-settings]').should('be.visible')
 	})
 
 	it('Select a custom background', function() {
@@ -283,5 +302,8 @@ describe('User changes settings and reload the page', function() {
 	it('Reload the page and validate persistent changes', function() {
 		cy.reload()
 		cy.waitUntil(() => validateBodyThemingCss(selectedColor, 'apps/theming/background?v='))
+
+		// validate accessibility state
+		cy.get('[data-user-theming-background-custom]').should('have.attr', 'aria-pressed', 'true')
 	})
 })