From 5b274e2be04123730fb4ac2c3b65dfe5c14ef54c Mon Sep 17 00:00:00 2001 From: Tero Elonen Date: Fri, 24 Jan 2025 17:44:52 +0200 Subject: [PATCH] UHF-11278: Converted aria-hidden attributes to inert attributes and added inert to the skip link as well --- dist/js/closable-surveys.min.js | 2 +- src/js/closable-surveys.js | 20 ++++++++++++++------ 2 files changed, 15 insertions(+), 7 deletions(-) diff --git a/dist/js/closable-surveys.min.js b/dist/js/closable-surveys.min.js index 7f1db97f4..07bef8e0d 100644 --- a/dist/js/closable-surveys.min.js +++ b/dist/js/closable-surveys.min.js @@ -1 +1 @@ -!function(){"use strict";class t{constructor(t){this.data={},this.storageKey=t,this.loadData()}loadData(){let e=null;try{e=localStorage.getItem(this.storageKey)}catch(e){t.handleError(e)}this.data=e?JSON.parse(e):{}}saveData(){try{localStorage.setItem(this.storageKey,JSON.stringify(this.data))}catch(e){t.handleError(e)}}setValue(t,e){this.data[t]=e,this.saveData()}getValue(t){return this.data[t]||null}addValue(t,e){this.data[t]||(this.data[t]=[]),"string"!=typeof e||this.data[t].includes(e)||(this.data[t].push(e),this.saveData())}getValues(t){return this.data[t]||null}removeValue(t,e){if(this.data[t]){const a=this.data[t].indexOf(e);a>-1&&(this.data[t].splice(a,1),this.saveData())}}static handleError(t){if(!(t instanceof ReferenceError))throw t}}!function(Drupal){Drupal.behaviors.closable_surveys={attach:function(){const e=document.getElementById("block-surveys"),a=document.getElementById("skip-to-main");e&&(a?a.parentNode.insertBefore(e,a.nextSibling):document.body.insertBefore(e,document.body.firstChild));const n=document.getElementById("helfi-survey__container");if(!n)return;const i=document.documentElement,o=document.getElementById("helfi-survey__close-button"),s="hidden-helfi-surveys",r=new t("helfi-settings");let d=null,c=null;try{d=JSON.parse(window.localStorage.getItem("helfi-settings"))}catch(t){console.error("Error parsing local storage data:",t)}function l(t){i.classList.toggle("noscroll",t)}function u(t){if(t){const t=window.innerWidth-document.documentElement.clientWidth+"px";document.body.style.paddingRight=t}else document.body.style.removeProperty("padding-right")}function h(){const t=document.querySelector(".hds-cc__target"),e=t?.shadowRoot,a=e?.querySelector(".hds-cc__all-cookies-button");t&&a&&a.focus()}function y(){const t=document.querySelector(".dialog-off-canvas-main-canvas"),e=document.querySelector(".hds-cc__target"),a=document.getElementById("helfi-survey__container");t&&!t.hasAttribute("aria-hidden")&&a?t.setAttribute("aria-hidden","true"):t&&t.removeAttribute("aria-hidden"),e&&!e.hasAttribute("aria-hidden")&&a?e.setAttribute("aria-hidden","true"):e&&e.removeAttribute("aria-hidden")}function f(){!function(){const{uuid:t}=n.dataset;t&&r.addValue(s,t)}(),c.deactivate(),n.remove(),l(!1),u(!1),h(),y()}o&&o.addEventListener("click",f),document.body.addEventListener("keydown",(function(t){"Escape"===t.key&&f()})),setTimeout((function(){const{uuid:t}=n.dataset;!t||!(d?.[s]||[]).includes(t)?(n.style.display="flex",u(!0),l(!0),c=window.focusTrap.createFocusTrap("#helfi-survey",{initialFocus:()=>"#helfi-survey__title"}),c.activate(),y()):(n.remove(),y(),h())}),2e3)}}}(Drupal)}(); \ No newline at end of file +!function(){"use strict";class t{constructor(t){this.data={},this.storageKey=t,this.loadData()}loadData(){let e=null;try{e=localStorage.getItem(this.storageKey)}catch(e){t.handleError(e)}this.data=e?JSON.parse(e):{}}saveData(){try{localStorage.setItem(this.storageKey,JSON.stringify(this.data))}catch(e){t.handleError(e)}}setValue(t,e){this.data[t]=e,this.saveData()}getValue(t){return this.data[t]||null}addValue(t,e){this.data[t]||(this.data[t]=[]),"string"!=typeof e||this.data[t].includes(e)||(this.data[t].push(e),this.saveData())}getValues(t){return this.data[t]||null}removeValue(t,e){if(this.data[t]){const n=this.data[t].indexOf(e);n>-1&&(this.data[t].splice(n,1),this.saveData())}}static handleError(t){if(!(t instanceof ReferenceError))throw t}}!function(Drupal){Drupal.behaviors.closable_surveys={attach:function(){const e=document.getElementById("block-surveys"),n=document.getElementById("skip-to-main");e&&(n?n.parentNode.insertBefore(e,n.nextSibling):document.body.insertBefore(e,document.body.firstChild));const a=document.getElementById("helfi-survey__container");if(!a)return;const i=document.documentElement,o=document.getElementById("helfi-survey__close-button"),s="hidden-helfi-surveys",r=new t("helfi-settings");let c=null,d=null;try{c=JSON.parse(window.localStorage.getItem("helfi-settings"))}catch(t){console.error("Error parsing local storage data:",t)}function u(t){i.classList.toggle("noscroll",t)}function l(t){if(t){const t=window.innerWidth-document.documentElement.clientWidth+"px";document.body.style.paddingRight=t}else document.body.style.removeProperty("padding-right")}function h(){const t=document.querySelector(".hds-cc__target"),e=t?.shadowRoot,n=e?.querySelector(".hds-cc__all-cookies-button");t&&n&&n.focus()}function m(){const t=document.querySelector(".dialog-off-canvas-main-canvas"),e=document.querySelector(".hds-cc__target"),n=document.querySelector(".skip-link--skip-to-main"),a=document.getElementById("helfi-survey__container");t&&!t.hasAttribute("inert")&&a?t.setAttribute("inert",""):t&&t.removeAttribute("inert"),n&&!n.hasAttribute("inert")&&n?n.setAttribute("inert",""):n&&n.removeAttribute("inert"),e&&!e.hasAttribute("inert")&&a?e.setAttribute("inert",""):e&&e.removeAttribute("inert")}function y(){!function(){const{uuid:t}=a.dataset;t&&r.addValue(s,t)}(),d.deactivate(),a.remove(),u(!1),l(!1),h(),m()}o&&o.addEventListener("click",y),document.body.addEventListener("keydown",(function(t){"Escape"===t.key&&y()})),setTimeout((function(){const{uuid:t}=a.dataset;!t||!(c?.[s]||[]).includes(t)?(a.style.display="flex",l(!0),u(!0),d=window.focusTrap.createFocusTrap("#helfi-survey",{initialFocus:()=>"#helfi-survey__title"}),d.activate(),m()):(a.remove(),m(),h())}),2e3)}}}(Drupal)}(); \ No newline at end of file diff --git a/src/js/closable-surveys.js b/src/js/closable-surveys.js index 850a83f45..3113fbeb8 100644 --- a/src/js/closable-surveys.js +++ b/src/js/closable-surveys.js @@ -74,20 +74,28 @@ import LocalStorageManager from './localStorageManager'; function toggleOtherContentVisibility() { const mainContent = document.querySelector('.dialog-off-canvas-main-canvas'); const cookieBanner = document.querySelector('.hds-cc__target'); + const skipToMain = document.querySelector('.skip-link--skip-to-main'); const surveyContainer = document.getElementById('helfi-survey__container'); - if (mainContent && !mainContent.hasAttribute('aria-hidden') && surveyContainer) { - mainContent.setAttribute('aria-hidden', 'true'); + if (mainContent && !mainContent.hasAttribute('inert') && surveyContainer) { + mainContent.setAttribute('inert', ''); } else { // eslint-disable-next-line no-unused-expressions - mainContent && mainContent.removeAttribute('aria-hidden'); + mainContent && mainContent.removeAttribute('inert'); } - if (cookieBanner && !cookieBanner.hasAttribute('aria-hidden') && surveyContainer) { - cookieBanner.setAttribute('aria-hidden', 'true'); + if (skipToMain && !skipToMain.hasAttribute('inert') && skipToMain) { + skipToMain.setAttribute('inert', ''); } else { // eslint-disable-next-line no-unused-expressions - cookieBanner && cookieBanner.removeAttribute('aria-hidden'); + skipToMain && skipToMain.removeAttribute('inert'); + } + + if (cookieBanner && !cookieBanner.hasAttribute('inert') && surveyContainer) { + cookieBanner.setAttribute('inert', ''); + } else { + // eslint-disable-next-line no-unused-expressions + cookieBanner && cookieBanner.removeAttribute('inert'); } }