Merge pull request #529 from EreMaijala/v3.0-beta-html-fixes

Clean up extraneous attributes to pass HTML validation.
orestbida · Jun 12, 2023 · a21b4e5 · a21b4e5
2 parents c5a64e2 + a0b9aef
commit a21b4e5
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 12 deletions.
diff --git a/dist/cookieconsent.esm.js b/dist/cookieconsent.esm.js
diff --git a/dist/cookieconsent.umd.js b/dist/cookieconsent.umd.js
diff --git a/src/core/api.js b/src/core/api.js
@@ -226,9 +226,9 @@ export const hide = () => {
         toggleDisableInteraction();
 
     /**
-     * Fix focus restoration
+     * Fix focus restoration to body with Chrome
      */
-    focus(_dom._focusSpan);
+    focus(_dom._focusSpan, false, true);
 
     removeClass(_dom._htmlDom, TOGGLE_CONSENT_MODAL_CLASS);
     setAttribute(_dom._cm, ARIA_HIDDEN, 'true');
@@ -327,9 +327,9 @@ export const hidePreferences = () => {
     discardUnsavedPreferences();
 
     /**
-     * Fix focus restoration
+     * Fix focus restoration to body with Chrome
      */
-    focus(globalObj._dom._pmFocusSpan);
+    focus(globalObj._dom._pmFocusSpan, false, true);
 
     removeClass(globalObj._dom._htmlDom, TOGGLE_PREFERENCES_MODAL_CLASS);
     setAttribute(globalObj._dom._pm, ARIA_HIDDEN, 'true');

diff --git a/src/core/modals/consentModal.js b/src/core/modals/consentModal.js
@@ -36,7 +36,6 @@ import { createPreferencesModal } from './preferencesModal';
  */
 const createFocusSpan = () => {
     const span = createNode('span');
-    span.tabIndex = -1;
 
     if(!globalObj._dom._focusSpan)
         globalObj._dom._focusSpan = span;

diff --git a/src/core/modals/preferencesModal.js b/src/core/modals/preferencesModal.js
@@ -122,7 +122,6 @@ export const createPreferencesModal = (api, createMainContainer) => {
         addEvent(dom._pmCloseBtn, CLICK_EVENT, hidePreferences);
 
         dom._pmFocusSpan = createNode('span');
-        dom._pmFocusSpan.tabIndex = -1;
         dom._pmFocusSpan.innerHTML = getSvgIcon();
         appendChild(dom._pmCloseBtn, dom._pmFocusSpan);
 
@@ -360,7 +359,6 @@ export const createPreferencesModal = (api, createMainContainer) => {
                  */
                 const trHeadFragment = dom._document.createDocumentFragment();
                 const trHead = createNode('tr');
-                setAttribute(trHead, 'role', 'row');
 
                 for(const headerKey of tableHeadersKeys){
                     const headerValue = headerData[headerKey];
@@ -385,7 +383,6 @@ export const createPreferencesModal = (api, createMainContainer) => {
                 for(const bodyItem of sCookieTableBody){
 
                     const tr = createNode('tr');
-                    setAttribute(tr, 'role', 'row');
                     addClassPm(tr, 'table-tr');
 
                     for(const tdKey of tableHeadersKeys){

diff --git a/src/utils/general.js b/src/utils/general.js
@@ -725,9 +725,19 @@ export const addDataButtonListeners = (elem, api, createPreferencesModal, create
 /**
  * @param {HTMLElement} el
  * @param {1 | 2} [modalId]
+ * @param {boolean} [toggleTabIndex]
  */
-export const focus = (el, modalId) => {
-    el && el.focus();
+export const focus = (el, modalId, toggleTabIndex) => {
+
+    if(el){
+        /**
+         * Momentarily add the `tabindex` attribute to fix
+         * a bug with focus restoration in chrome
+         */
+        toggleTabIndex && (el.tabIndex = -1);
+
+        el.focus();
+    }
 
     if(modalId) {
         globalObj._state._currentFocusedModal = modalId === 1
@@ -738,6 +748,12 @@ export const focus = (el, modalId) => {
             ? globalObj._state._cmFocusableElements
             : globalObj._state._pmFocusableElements;
     }
+
+    /**
+     * Remove the `tabindex` attribute so
+     * that the html markup is valid again
+     */
+    toggleTabIndex && (el && el.removeAttribute('tabindex'));
 };
 
 /**