polynux
/
tarteauxmyrtilles
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
Lena 2018-08-14 13:42:49 +02:00
parent b79fbec9f7
commit 49c6cc77cd
2 changed files with 78 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
css/tarteaucitron.css
View File

@ -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;
}

56
tarteaucitron.js
View File

@ -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>';