From 03c91b97f2e5914c7fbd789914ab7ef085c4ecee Mon Sep 17 00:00:00 2001 From: Jean Ducrot Date: Tue, 13 Aug 2024 23:14:56 -0400 Subject: [PATCH 1/2] Remove extraneous aria-labels on theme buttons --- src/assets/scripts/bundle/theme-toggle.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/assets/scripts/bundle/theme-toggle.js b/src/assets/scripts/bundle/theme-toggle.js index e94e5a1..ca4aac2 100644 --- a/src/assets/scripts/bundle/theme-toggle.js +++ b/src/assets/scripts/bundle/theme-toggle.js @@ -60,8 +60,11 @@ function setPreference() { function reflectPreference() { document.firstElementChild.setAttribute('data-theme', theme.value); - document.querySelector('#light-theme-toggle')?.setAttribute('aria-label', lightLabel); - document.querySelector('#dark-theme-toggle')?.setAttribute('aria-label', darkLabel); + // Let the button content set its accessible name. There is no need for an aria-label on a button with visible text. + // This practice can become a problem when the page is translated by the browser as often aria-labels are left alone + // this code would override the translated language and confuse the user + // document.querySelector('#light-theme-toggle')?.setAttribute('aria-label', lightLabel); + // document.querySelector('#dark-theme-toggle')?.setAttribute('aria-label', darkLabel); } function updateMetaThemeColor() { From 6c0470bf631518f9ec8042f593d2089c1c75b0a0 Mon Sep 17 00:00:00 2001 From: Jean Ducrot Date: Tue, 13 Aug 2024 23:23:12 -0400 Subject: [PATCH 2/2] Remove unnecessary aria-labels on theme buttons --- src/assets/scripts/bundle/theme-toggle.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/assets/scripts/bundle/theme-toggle.js b/src/assets/scripts/bundle/theme-toggle.js index ca4aac2..2590882 100644 --- a/src/assets/scripts/bundle/theme-toggle.js +++ b/src/assets/scripts/bundle/theme-toggle.js @@ -60,9 +60,6 @@ function setPreference() { function reflectPreference() { document.firstElementChild.setAttribute('data-theme', theme.value); - // Let the button content set its accessible name. There is no need for an aria-label on a button with visible text. - // This practice can become a problem when the page is translated by the browser as often aria-labels are left alone - // this code would override the translated language and confuse the user // document.querySelector('#light-theme-toggle')?.setAttribute('aria-label', lightLabel); // document.querySelector('#dark-theme-toggle')?.setAttribute('aria-label', darkLabel); }