Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Amélioration de l'accessibilité du plugin #22

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Amélioration de l'accessibilité du plugin #22

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 12 additions & 3 deletions _locales/en/messages.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,10 +36,10 @@
"description": "Top traffic list title"
},
"digitalEquivalenceTitle": {
"message": "The CO2 emissions related to your digital use is equivalent to:"
"message": "The <abbr title=\"carbon dioxide\">CO<sub>2</sub></abbr> emissions related to your digital use is equivalent to:"
},
"equivalenceTitle": {
"message": "In $MINUTES$ minutes of browsing, you have downloaded $MBTOTAL$ MB of data. This required $KWH$ kWh of electricity, or $GCO2$ gCO2e",
"message": "In $MINUTES$ minutes of browsing, you have downloaded $MBTOTAL$ <abbr title=\"megabyte\">MB<abbr> of data. This required $KWH$ <abbr title=\"kilowatt hours\">kWh</abbr> of electricity, or $GCO2$ <abbr title=\"grams of carbon dioxide equivalent\">gCO2e</abbr>",
"description": "Equivalence",
"placeholders": {
"minutes" : {
Expand Down Expand Up @@ -87,15 +87,24 @@
"howToChangeUrl": {
"message": "https://theshiftproject.org/en/article/unsustainable-use-online-video/"
},
"kWhUnit": {
"message": "kilowatt hours"
},
"gCO2Unit": {
"message": "grams of carbon dioxide equivalent"
},
"chargedSmartphonesUnit": {
"message": "charged smartphones"
},
"kmByCarUnit": {
"message": "kms by car"
"message": "<abbr title=\"kilometer\">km</abbr> by car"
},
"mbTotalUnit": {
"message": "Mb"
},
"mbTotalUnitTitle": {
"message": "megabyte"
},
"statsOthers": {
"message": "Others"
},
Expand Down
15 changes: 12 additions & 3 deletions _locales/fr/messages.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,10 +36,10 @@
"description": "Titre de la liste Top trafic"
},
"digitalEquivalenceTitle": {
"message": "Les émissions de CO2 liées à votre utilisation d'internet équivaut à :"
"message": "Les émissions de <abbr title=\"dioxyde de carbone\">CO<sub>2</sub></abbr> liées à votre utilisation d'internet équivaut à :"
},
"equivalenceTitle": {
"message": "En $MINUTES$ minutes de navigation, vous avez fait transiter $MBTOTAL$ Mo de données. Cela a nécessité $KWH$ kWh d'électricité, soit $GCO2$ gCO2e",
"message": "En $MINUTES$ minutes de navigation, vous avez fait transiter $MBTOTAL$ <abbr title=\"mégaoctets\">Mo</abbr> de données. Cela a nécessité $KWH$ <abbr title=\"kilowatt-heures\">kWh</abbr> d'électricité, soit $GCO2$ <abbr title=\"grammes d'équivalent en dioxyde de carbone\">gCO2e</abbr>",
"description": "Equivalence",
"placeholders": {
"minutes" : {
Expand Down Expand Up @@ -87,15 +87,24 @@
"howToChangeUrl": {
"message": "https://theshiftproject.org/article/climat-insoutenable-usage-video/"
},
"kWhUnit": {
"message": "kilowatt-heures"
},
"gCO2Unit": {
"message": "grammes d'équivalent en dioxyde de carbone"
},
"chargedSmartphonesUnit": {
"message": "smartphones rechargés"
},
"kmByCarUnit": {
"message": "kms en voiture"
"message": "<abbr title=\"kilomètre\">km</abbr> en voiture"
},
"mbTotalUnit": {
"message": "Mo"
},
"mbTotalUnitTitle": {
"message": "mégaoctets"
},
"statsOthers": {
"message": "Autres"
},
Expand Down
12 changes: 7 additions & 5 deletions popup/popup.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ h1 {
}

hr {
border: 1px solid #999999;
border: 1px solid #757575;
height: 0;
padding: 0;
line-height: 0;
Expand All @@ -23,7 +23,7 @@ hr {
}

.header-links a {
color: #999999;
color: #757575;
margin-right: 10px;
text-decoration: none;
}
Expand All @@ -43,7 +43,7 @@ hr {
.button {
padding: 6px 8px;
border-radius: 6px;
border: 2px solid #999999;
border: 2px solid #757575;
background: #fff;
font-size: 14px;
text-decoration: none;
Expand Down Expand Up @@ -109,7 +109,7 @@ ul#statsListItems {
}

#statsListTitle {
color: #999999;
color: #757575;
}

#equivalence img {
Expand All @@ -127,11 +127,13 @@ ul#statsListItems {
font-size: 16px;
}

#equivalence span.unit {
#equivalence span.unit, #equivalence abbr.unit {
font-size: 10px;
display: block;
}



.selectRegionHelp {
margin-top: 0px;
}
25 changes: 13 additions & 12 deletions popup/popup.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,51 +54,51 @@ <h1>Carbonalyser</h1>
<div class="clear"></div>

<div id="equivalence">
<p id="equivalenceTitle"></p>
<p id="equivalenceTitle" translate-html="equivalenceTitle"></p>
<div class="column50">
<div class="block">
<img src="img/time.svg" />
<img src="img/time.svg" alt="" />
<span id="duration"></span>
<span id="durationItem" class="unit">minutes</span>
</div>
</div>
<div class="column50">
<div class="block">
<img src="img/energy.svg" />
<img src="img/energy.svg" alt="" />
<span id="kWhTotalValue"></span>
<span id="kWhTotalUnit" class="unit">kWh</span>
<abbr id="kWhTotalUnit" class="unit" title="kWhUnit">kWh</abbr>
</div>
</div>
<div class="clear"></div>
<div class="column50">
<div class="block">
<img src="img/arrows.svg" />
<img src="img/arrows.svg" alt="" />
<span id="mbTotalValue"></span>
<span id="mbTotalUnit" class="unit" translate="mbTotalUnit"></span>
<abbr id="mbTotalUnit" class="unit" title="mbTotalUnitTitle" translate="mbTotalUnit"></abbr>
</div>
</div>
<div class="column50">
<div class="block">
<img src="img/gco2.svg" />
<img src="img/gco2.svg" alt="" />
<span id="gCO2Value"></span>
<span id="gCO2Item" class="unit">gCO<sub>2</sub>e</span>
<abbr id="gCO2Item" title="gCO2Unit" class="unit">gCO<sub>2</sub>e</abbr>
</div>
</div>
<div class="clear"></div>

<p translate="digitalEquivalenceTitle"></p>
<p translate-html="digitalEquivalenceTitle"></p>
<div class="column50">
<div class="block">
<img src="img/smartphone.svg" />
<img src="img/smartphone.svg" alt="" />
<span id="chargedSmartphonesValue"></span>
<span id="chargedSmartphonesUnit" class="unit" translate="chargedSmartphonesUnit"></span>
</div>
</div>
<div class="column50">
<div class="block">
<img src="img/car.svg" class="icon-car" />
<img src="img/car.svg" alt="" class="icon-car" />
<span id="kmByCarValue"></span>
<span id="kmByCarUnit" class="unit" translate="kmByCarUnit"></span>
<span id="kmByCarUnit" class="unit" translate-html="kmByCarUnit"></span>
</div>
</div>
<div class="clear"></div>
Expand All @@ -107,6 +107,7 @@ <h1>Carbonalyser</h1>
</div>

</div>
<script src="vendor/purify.min.js"></script>
<script src="vendor/chartist/chartist.js"></script>
<script src="popup.js"></script>
</body>
Expand Down
18 changes: 17 additions & 1 deletion popup/popup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,7 @@ showStats = () => {
while (equivalenceTitle.firstChild) {
equivalenceTitle.removeChild(equivalenceTitle.firstChild);
}
equivalenceTitle.appendChild(document.createTextNode(browser.i18n.getMessage('equivalenceTitle', [duration.toString(), megaByteTotal, kWhTotal.toString(), gCO2Total.toString()])));
equivalenceTitle.innerHTML = DOMPurify.sanitize( browser.i18n.getMessage('equivalenceTitle', [duration.toString(), megaByteTotal, kWhTotal.toString(), gCO2Total.toString()]));
}

start = () => {
Expand Down Expand Up @@ -217,6 +217,14 @@ translateHref = (target, translationKey) => {
target.href = browser.i18n.getMessage(translationKey);
}

translateHtml = (target, translationKey) => {
target.innerHTML = DOMPurify.sanitize( translate(translationKey) );
}

translateA11y = (target, translationKey) => {
target.setAttribute('title', translate(translationKey) );
}

hide = element => element.classList.add('hidden');
show = element => element.classList.remove('hidden');

Expand Down Expand Up @@ -244,4 +252,12 @@ document.querySelectorAll('[translate-href]').forEach(function(element) {
translateHref(element, element.getAttribute('translate-href'));
});

document.querySelectorAll('[title]').forEach(function(element) {
translateA11y(element, element.getAttribute('title'));
});

document.querySelectorAll('[translate-html]').forEach(function(element) {
translateHtml(element, element.getAttribute('translate-html'));
});

init();
Loading