add a wrapper with aria-hidden when dialog is open + update CSS

css/tarteaucitron.css

@@ -3,7 +3,6 @@
     height: 100%;
 }
 
-
 a:focus, button:focus {
     outline: 2px solid #cb3333;
 }
@@ -47,6 +46,18 @@ a:focus, button:focus {
     #tarteaucitron #tarteaucitronServices .tarteaucitronTitle {
         text-align: left !important;
     }
+
+    .tarteaucitronName h2 {
+        max-width: 80%;
+    }
+
+    #tarteaucitron #tarteaucitronServices .tarteaucitronLine .tarteaucitronAsk {
+        text-align: center !important;
+    }
+
+        #tarteaucitron #tarteaucitronServices .tarteaucitronLine .tarteaucitronAsk button {
+            margin-bottom: 5px;
+        }
 }
 
 @media screen and (min-width:768px) and (max-width:991px) {
@@ -77,6 +88,12 @@ a:focus, button:focus {
     text-decoration: none;
 }
 
+#tarteaucitronRoot button {
+    background: transparent;
+    border: 0;
+}
+
+#tarteaucitronAlertBig strong, #tarteaucitronAlertSmall strong,
 #tarteaucitronAlertBig a, #tarteaucitronAlertSmall a {
     color: #fff;
 }
@@ -89,6 +106,12 @@ a:focus, button:focus {
 #tarteaucitron ul {
     padding: 0;
 }
+
+.cookie-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
 /***
  * Root div added just before </body>
  */
@@ -188,8 +211,8 @@ a:focus, button:focus {
     position: relative;
 }
 
-#tarteaucitronAlertSmall #tarteaucitronCookiesListContainer #tarteaucitronCookiesList .tarteaucitronTitle,
-#tarteaucitron #tarteaucitronServices .tarteaucitronTitle,
+#tarteaucitronAlertSmall #tarteaucitronCookiesListContainer #tarteaucitronCookiesList .tarteaucitronTitle button,
+#tarteaucitron #tarteaucitronServices .tarteaucitronTitle button,
 #tarteaucitron #tarteaucitronInfo,
 #tarteaucitron #tarteaucitronServices .tarteaucitronDetails {
     background: #333;
@@ -224,6 +247,7 @@ a:focus, button:focus {
 
 #tarteaucitronAlertSmall #tarteaucitronCookiesListContainer #tarteaucitronCookiesList .tarteaucitronTitle {
     padding: 5px 10px;
+    margin: 0;
 }
 
 #tarteaucitron #tarteaucitronInfo,
@@ -275,7 +299,7 @@ a:focus, button:focus {
     margin-top: 2px;
 }
 
-#tarteaucitron #tarteaucitronServices .tarteaucitronMainLine .tarteaucitronName b {
+#tarteaucitron #tarteaucitronServices .tarteaucitronMainLine .tarteaucitronName button {
     color: #fff;
 }
 
@@ -348,12 +372,12 @@ a:focus, button:focus {
 }
 
 #tarteaucitronAlertBig #tarteaucitronDisclaimerAlert,
-#tarteaucitronAlertBig #tarteaucitronDisclaimerAlert b {
+#tarteaucitronAlertBig #tarteaucitronDisclaimerAlert strong {
     font: 15px verdana;
     color: #fff;
 }
 
-#tarteaucitronAlertBig #tarteaucitronDisclaimerAlert b {
+#tarteaucitronAlertBig #tarteaucitronDisclaimerAlert strong {
     font-weight: 700;
 }
 
@@ -487,7 +511,7 @@ a:focus, button:focus {
     text-align: left;
 }
 
-#tarteaucitronAlertSmall #tarteaucitronCookiesListContainer #tarteaucitronCookiesList b {
+#tarteaucitronAlertSmall #tarteaucitronCookiesListContainer #tarteaucitronCookiesList strong {
     color: #333;
 }
 
@@ -498,7 +522,7 @@ a:focus, button:focus {
     text-align: left;
 }
 
-#tarteaucitronAlertSmall #tarteaucitronCookiesListContainer #tarteaucitronCookiesTitle b {
+#tarteaucitronAlertSmall #tarteaucitronCookiesListContainer #tarteaucitronCookiesTitle strong {
     color: #fff;
     font-size: 16px;
 }
@@ -523,7 +547,7 @@ a:focus, button:focus {
     width: 50%;
 }
 
-#tarteaucitronAlertSmall #tarteaucitronCookiesListContainer #tarteaucitronCookiesList .tarteaucitronCookiesListMain .tarteaucitronCookiesListLeft a b {
+#tarteaucitronAlertSmall #tarteaucitronCookiesListContainer #tarteaucitronCookiesList .tarteaucitronCookiesListMain .tarteaucitronCookiesListLeft a strong {
     color: darkred;
 }
 
@@ -557,7 +581,7 @@ a:focus, button:focus {
     vertical-align: middle;
 }
 
-.tac_activate .tac_float b {
+.tac_activate .tac_float strong {
     color: #fff;
 }
 

tarteaucitron.js

@@ -324,7 +324,7 @@ var tarteaucitron = {
                         html += '           ' + tarteaucitron.lang.close;
                         html += '       </button>';
                         html += '       <div class="tarteaucitronCookiesListMain" id="tarteaucitronCookiesTitle">';
-                        html += '            <strong id="tarteaucitronCookiesNumberBis">0 cookie</strong>';
+                        html += '            <h2 id="tarteaucitronCookiesNumberBis">0 cookie</h2>';
                         html += '       </div>';
                         html += '       <div id="tarteaucitronCookiesList"></div>';
                         html += '    </div>';
@@ -336,10 +336,27 @@ var tarteaucitron = {
 
                 tarteaucitron.addScript(tarteaucitron.cdn + 'advertising.js?v=' + tarteaucitron.version, '', function () {
                     if (tarteaucitronNoAdBlocker === true || defaults.adblocker === false) {
+
+                        // create wrapper container
+                        var wrapper = document.createElement('div');
+                        wrapper.id = "contentWrapper";
+                        
+                        while (document.body.firstChild)
+                        {
+                            wrapper.appendChild(document.body.firstChild);
+                        }
+
+                        // Append the wrapper to the body
+                        document.body.appendChild(wrapper);
+
                         div.id = 'tarteaucitronRoot';
                         body.appendChild(div, body);
                         div.innerHTML = html;
 
+                        
+                        // move el into wrapper
+                        //wrapper.appendChild(el);
+
                         if (tarteaucitron.job !== undefined) {
                             tarteaucitron.job = tarteaucitron.cleanArray(tarteaucitron.job);
                             for (index = 0; index < tarteaucitron.job.length; index += 1) {
@@ -384,16 +401,28 @@ var tarteaucitron = {
                 if (defaults.adblocker === true) {
                     setTimeout(function () {
                         if (tarteaucitronNoAdBlocker === false) {
-                            html = '<div id="tarteaucitronAlertBig" class="tarteaucitronAlertBig' + orientation + '" style="display:block">';
-                            html += '   <span id="tarteaucitronDisclaimerAlert">';
+                            html = '<div id="tarteaucitronAlertBig" class="tarteaucitronAlertBig' + orientation + '" style="display:block" role="alert" aria-live="polite">';
+                            html += '   <p id="tarteaucitronDisclaimerAlert">';
                             html += '       ' + tarteaucitron.lang.adblock + '<br/>';
                             html += '       <strong>' + tarteaucitron.lang.adblock_call + '</strong>';
-                            html += '   </span>';
+                            html += '   </p>';
                             html += '   <button id="tarteaucitronPersonalize" onclick="location.reload();">';
                             html += '       ' + tarteaucitron.lang.reload;
                             html += '   </button>';
                             html += '</div>';
                             html += '<div id="tarteaucitronPremium"></div>';
+
+                            // create wrapper container
+                            var wrapper = document.createElement('div');
+                            wrapper.id = "contentWrapper";
+                            
+                            while (document.body.firstChild)
+                            {
+                                wrapper.appendChild(document.body.firstChild);
+                            }
+
+                        // Append the wrapper to the body
+                        document.body.appendChild(wrapper);
                             div.id = 'tarteaucitronRoot';
                             body.appendChild(div, body);
                             div.innerHTML = html;
@@ -653,6 +682,7 @@ var tarteaucitron = {
             tarteaucitron.userInterface.css('tarteaucitronBack', 'display', 'block');
             tarteaucitron.userInterface.css('tarteaucitronCookiesListContainer', 'display', 'none');
             document.getElementById('tarteaucitronClosePanel').focus();
+            document.getElementById('contentWrapper').setAttribute("aria-hidden", "true");
             document.getElementsByTagName('body')[0].classList.add('modal-open');
             tarteaucitron.userInterface.jsSizing('main');
         },
@@ -675,6 +705,7 @@ var tarteaucitron = {
                 tarteaucitron.userInterface.css('tarteaucitronBack', 'display', 'none');
             }
             document.getElementById('tarteaucitronCloseAlert').focus();
+            document.getElementById('contentWrapper').setAttribute("aria-hidden", "false");
             document.getElementsByTagName('body')[0].classList.remove('modal-open');
             
         },
@@ -1027,24 +1058,25 @@ var tarteaucitron = {
                     if (tarteaucitron.cookie.owner[name] !== undefined && tarteaucitron.cookie.owner[name].join(' // ') !== savedname) {
                         savedname = tarteaucitron.cookie.owner[name].join(' // ');
                         html += '<div class="tarteaucitronHidden">';
-                        html += '     <div class="tarteaucitronTitle">';
+                        html += '     <h3 class="tarteaucitronTitle">';
                         html += '        ' + tarteaucitron.cookie.owner[name].join(' // ');
-                        html += '    </div>';
-                        html += '</div>';
+                        html += '    </h3>';
+                        html += '</div><ul class="cookie-list">';
                     } else if (tarteaucitron.cookie.owner[name] === undefined && host !== savedname) {
                         savedname = host;
                         html += '<div class="tarteaucitronHidden">';
-                        html += '     <div class="tarteaucitronTitle">';
+                        html += '     <h3 class="tarteaucitronTitle">';
                         html += '        ' + host;
-                        html += '    </div>';
-                        html += '</div>';
+                        html += '    </h3>';
+                        html += '</div><ul class="cookie-list">';
                     }
-                    html += '<div class="tarteaucitronCookiesListMain">';
+                    html += '<li class="tarteaucitronCookiesListMain">';
                     html += '    <div class="tarteaucitronCookiesListLeft"><button onclick="tarteaucitron.cookie.purge([\'' + cookies[i].split('=', 1) + '\']);tarteaucitron.cookie.number();tarteaucitron.userInterface.jsSizing(\'cookie\');return false"><strong>&times;</strong></button> <strong>' + name + '</strong>';
                     html += '    </div>';
                     html += '    <div class="tarteaucitronCookiesListRight">' + cookies[i].split('=').slice(1).join('=') + '</div>';
-                    html += '</div>';
+                    html += '</li>';
                 }
+                html += '</ul>';
             } else {
                 html += '<div class="tarteaucitronCookiesListMain">';
                 html += '    <div class="tarteaucitronCookiesListLeft"><strong>-</strong></div>';