genuineparts/alltube
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #213 from hiwelo/accessibility-improvements

Browse source 
Accessibility improvements
This commit is contained in:
Pierre Rudloff 2019-04-19 23:11:39 +02:00 • committed by GitHub
commit 9949a0d32b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 482 additions and 475 deletions
Download patch file Download diff file Expand all files Collapse all files

144
css/style.css
View file

@ -1,14 +1,11 @@
body { body {
background-color: #EBEBEB; background-color: #ebebeb;
background-image:url('../img/fond.jpg'); background-image: url("../img/fond.jpg");
font-family: 'Open Sans', sans-serif; font-family: "Open Sans", sans-serif;
font-weight: 400; font-weight: 400;
text-align: center; text-align: center;
} }
/* Header */ /* Header */
header { header {
@ -23,7 +20,6 @@ header {
padding-right: 21px; padding-right: 21px;
} }
header .social a { header .social a {
background-position: 0 0; background-position: 0 0;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -50,11 +46,11 @@ header a:hover {
} }
.share { .share {
background-image:url('../img/share.png'); background-image: url("../img/share.png");
} }
.sharemask { .sharemask {
background-image:url('../img/sharemask.png'); background-image: url("../img/sharemask.png");
background-position: top left; background-position: top left;
background-repeat: no-repeat; background-repeat: no-repeat;
height: 38px; height: 38px;
@ -63,15 +59,14 @@ header a:hover {
top: 0; top: 0;
width: 38px; width: 38px;
z-index: 10; z-index: 10;
} }
.facebook { .facebook {
background-image:url('../img/facebook.png'); background-image: url("../img/facebook.png");
} }
.facebookmask { .facebookmask {
background-image:url('../img/facebookmask.png'); background-image: url("../img/facebookmask.png");
background-position: top left; background-position: top left;
background-repeat: no-repeat; background-repeat: no-repeat;
height: 38px; height: 38px;
@ -83,11 +78,11 @@ header a:hover {
} }
.twitter { .twitter {
background-image:url('../img/twitter.png'); background-image: url("../img/twitter.png");
} }
.twittermask { .twittermask {
background-image:url('../img/twittermask.png'); background-image: url("../img/twittermask.png");
background-position: top left; background-position: top left;
background-repeat: no-repeat; background-repeat: no-repeat;
height: 38px; height: 38px;
@ -98,13 +93,10 @@ header a:hover {
z-index: 10; z-index: 10;
} }
/* Footer */ /* Footer */
footer { footer {
background-image:url('../img/fondfooter.png'); background-image: url("../img/fondfooter.png");
background-position: top left; background-position: top left;
background-repeat: repeat-x; background-repeat: repeat-x;
bottom: 0; bottom: 0;
@ -137,11 +129,6 @@ footer a:hover {
-o-transition: all 0.1s ease-in; -o-transition: all 0.1s ease-in;
} }
/* Home content */ /* Home content */
.logo { .logo {
@ -161,7 +148,7 @@ footer a:hover {
} }
.downloadBtn { .downloadBtn {
background-color:#3A3A3A; background-color: #3a3a3a;
border: 3px solid #a5a5a5; border: 3px solid #a5a5a5;
border-radius: 10px; border-radius: 10px;
color: #dedede; color: #dedede;
@ -193,7 +180,7 @@ footer a:hover {
background-color: #fff; background-color: #fff;
border: 3px solid #a5a5a5; border: 3px solid #a5a5a5;
border-radius: 10px; border-radius: 10px;
color:#3F3F3F; color: #3f3f3f;
font-weight: 800; font-weight: 800;
margin-right: 8px; margin-right: 8px;
min-width: 426px; min-width: 426px;
@ -201,9 +188,8 @@ footer a:hover {
position: relative; position: relative;
} }
.URLinput:focus { .URLinput:focus {
border-color:#3A3A3A; border-color: #3a3a3a;
outline: none; outline: none;
} }
@ -215,7 +201,7 @@ footer a:hover {
} }
.combatiblelink { .combatiblelink {
background-image:url('../img/compatiblerouage.png'); background-image: url("../img/compatiblerouage.png");
background-position: 0 100%; background-position: 0 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
color: #a5a5a5; color: #a5a5a5;
@ -280,7 +266,7 @@ footer a:hover {
.audio:checked + label:before, .audio:checked + label:before,
.audio:not(:checked) + label:after, .audio:not(:checked) + label:after,
.audio:checked + label:after { .audio:checked + label:after {
content: ''; content: "";
position: absolute; position: absolute;
} }
.audio:not(:checked) + label:before, .audio:not(:checked) + label:before,
@ -290,11 +276,11 @@ footer a:hover {
height: 20px; height: 20px;
left: 0; left: 0;
top: -1px; top: -1px;
-webkit-transition: background-color .2s; -webkit-transition: background-color 0.2s;
-moz-transition: background-color .2s; -moz-transition: background-color 0.2s;
-ms-transition: background-color .2s; -ms-transition: background-color 0.2s;
-o-transition: background-color .2s; -o-transition: background-color 0.2s;
transition: background-color .2s; transition: background-color 0.2s;
width: 45px; width: 45px;
} }
.audio:not(:checked) + label:after, .audio:not(:checked) + label:after,
@ -304,11 +290,11 @@ footer a:hover {
height: 16px; height: 16px;
left: 2px; left: 2px;
top: 1px; top: 1px;
-webkit-transition: all .2s; -webkit-transition: all 0.2s;
-moz-transition: all .2s; -moz-transition: all 0.2s;
-ms-transition: all .2s; -ms-transition: all 0.2s;
-o-transition: all .2s; -o-transition: all 0.2s;
transition: all .2s; transition: all 0.2s;
width: 16px; width: 16px;
} }
@ -336,15 +322,15 @@ footer a:hover {
left: 3px; left: 3px;
line-height: 17px; line-height: 17px;
position: absolute; position: absolute;
-webkit-transition: all .2s; -webkit-transition: all 0.2s;
-moz-transition: all .2s; -moz-transition: all 0.2s;
-ms-transition: all .2s; -ms-transition: all 0.2s;
-o-transition: all .2s; -o-transition: all 0.2s;
transition: all .2s; transition: all 0.2s;
width: 45px; width: 45px;
} }
.audio:not(:checked) + label .ui:before { .audio:not(:checked) + label .ui:before {
background-image:url('../img/mp3hover.png'); background-image: url("../img/mp3hover.png");
background-position: right top; background-position: right top;
background-repeat: no-repeat; background-repeat: no-repeat;
content: "no"; content: "no";
@ -352,23 +338,23 @@ footer a:hover {
min-width: 56px; min-width: 56px;
padding-left: 23px; padding-left: 23px;
padding-top: 2px; padding-top: 2px;
-webkit-transition: all .2s; -webkit-transition: all 0.2s;
-moz-transition: all .2s; -moz-transition: all 0.2s;
-ms-transition: all .2s; -ms-transition: all 0.2s;
-o-transition: all .2s; -o-transition: all 0.2s;
transition: all .2s; transition: all 0.2s;
} }
.audio:checked + label .ui:after { .audio:checked + label .ui:after {
background-image:url('../img/mp3.png'); background-image: url("../img/mp3.png");
background-position: right top; background-position: right top;
background-repeat: no-repeat; background-repeat: no-repeat;
color: #fff; color: #fff;
content: "yes"; content: "yes";
-webkit-transition: all .2s; -webkit-transition: all 0.2s;
-moz-transition: all .2s; -moz-transition: all 0.2s;
-ms-transition: all .2s; -ms-transition: all 0.2s;
-o-transition: all .2s; -o-transition: all 0.2s;
transition: all .2s; transition: all 0.2s;
width: 73px; width: 73px;
} }
@ -382,7 +368,6 @@ footer a:hover {
display: block; display: block;
} }
/* Playlists */ /* Playlists */
.playlist-entry .thumb { .playlist-entry .thumb {
float: left; float: left;
@ -413,9 +398,6 @@ footer a:hover {
font-size: 16px; font-size: 16px;
} }
/* Supported websites list */ /* Supported websites list */
.logobis { .logobis {
@ -425,9 +407,8 @@ footer a:hover {
width: 447px; width: 447px;
} }
.logocompatible { .logocompatible {
background-image:url('../img/logocompatible.png'); background-image: url("../img/logocompatible.png");
background-position: 0 0; background-position: 0 0;
background-repeat: repeat-y; background-repeat: repeat-y;
display: block; display: block;
@ -447,9 +428,8 @@ footer a:hover {
-o-transition: all 0.1s ease-in; -o-transition: all 0.1s ease-in;
} }
.logocompatiblemask { .logocompatiblemask {
background-image:url('../img/logocompatiblemask.png'); background-image: url("../img/logocompatiblemask.png");
background-position: 0 100%; background-position: 0 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
height: 107px; height: 107px;
@ -462,7 +442,7 @@ footer a:hover {
.titre { .titre {
color: #383838; color: #383838;
font-family: 'Open Sans', sans-serif; font-family: "Open Sans", sans-serif;
font-size: 48px; font-size: 48px;
font-weight: 300; font-weight: 300;
} }
@ -475,7 +455,6 @@ footer a:hover {
width: 800px; width: 800px;
} }
.tripleliste ul { .tripleliste ul {
margin-bottom: 1em; margin-bottom: 1em;
margin-left: 120px; margin-left: 120px;
@ -525,10 +504,10 @@ body {
} }
.social a { .social a {
color:#D1D1D1; color: #d1d1d1;
} }
.logocompatible { .logocompatible {
color: #4F4F4F color: #4f4f4f;
} }
h1 { h1 {
@ -591,7 +570,7 @@ h1 {
} }
.supportedLocales li { .supportedLocales li {
border-bottom: thin solid #E1E1E1; border-bottom: thin solid #e1e1e1;
} }
.supportedLocales li:last-child { .supportedLocales li:last-child {
@ -687,7 +666,7 @@ h1 {
} }
.logocompatible { .logocompatible {
background-color:#4F4F4F; background-color: #4f4f4f;
background-image: none; background-image: none;
height: auto; height: auto;
} }
@ -723,7 +702,6 @@ h1 {
float: none; float: none;
margin-right: 0; margin-right: 0;
} }
} }
@media all and (display-mode: standalone) { @media all and (display-mode: standalone) {
@ -731,3 +709,27 @@ h1 {
display: none; display: none;
} }
} }
/* Visually hidden, displays content only to screen-readers */
.sr-only {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
}
.sr-only.focusable:active,
.sr-only.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
white-space: normal;
width: auto;
}

2
templates/inc/head.tpl
View file

@ -1,5 +1,5 @@
{locale path="../i18n" domain="Alltube"} {locale path="../i18n" domain="Alltube"}
<!Doctype HTML> <!doctype html>
<html {if isset($locale)}lang="{$locale->getBcp47()}"{/if}> <html {if isset($locale)}lang="{$locale->getBcp47()}"{/if}>
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />

9
templates/inc/header.tpl
View file

@ -18,9 +18,12 @@
</div> </div>
{/if} {/if}
<div class="social"> <div class="social">
<a class="twitter" rel="noopener" href="http://twitter.com/home?status={base_url|urlencode}" title="{t}Share on Twitter{/t}" target="_blank"> <a class="twitter" rel="noopener" href="http://twitter.com/home?status={base_url|urlencode}" title="{t}Share on Twitter{/t}" target="_blank" aria-label="{t}Share on Twitter{/t} {t}(opens a new window){/t}">
<div class="twittermask"></div></a> <div class="twittermask"></div>
<a class="facebook" rel="noopener" href="https://www.facebook.com/sharer/sharer.php?u={base_url|urlencode}" title="{t}Share on Facebook{/t}" target="_blank"><div class="facebookmask"></div></a> </a>
<a class="facebook" rel="noopener" href="https://www.facebook.com/sharer/sharer.php?u={base_url|urlencode}" title="{t}Share on Facebook{/t}" target="_blank" aria-label="{t}Share on Facebook{/t} {t}(opens a new window){/t}">
<div class="facebookmask"></div>
</a>
</div> </div>
</header> </header>
<div class="wrapper"> <div class="wrapper">

4
templates/index.tpl
View file

@ -25,8 +25,8 @@
{t}Audio only (MP3){/t} {t}Audio only (MP3){/t}
</label> </label>
<div class="seekOptions"> <div class="seekOptions">
{t}From{/t} <input type="text" pattern="(\d+:)?(\d+:)?\d+(\.\d+)?" placeholder="HH:MM:SS" value="" name="from"/> <label for="from">{t}From{/t}</label> <input type="text" pattern="(\d+:)?(\d+:)?\d+(\.\d+)?" placeholder="HH:MM:SS" value="" name="from" id="from" />
{t}to{/t} <input type="text" pattern="(\d+:)?(\d+:)?\d+(\.\d+)?" placeholder="HH:MM:SS" value="" name="to"/> <label for="to">{t}to{/t}</label> <input type="text" pattern="(\d+:)?(\d+:)?\d+(\.\d+)?" placeholder="HH:MM:SS" value="" name="to" id="to" />
</div> </div>
</div> </div>
</div> </div>

3
templates/password.tpl
View file

@ -5,7 +5,8 @@
<h2>{t}This video is protected{/t}</h2> <h2>{t}This video is protected{/t}</h2>
<p>{t}You need a password in order to download this video.{/t}</p> <p>{t}You need a password in order to download this video.{/t}</p>
<form action="" method="POST"> <form action="" method="POST">
<input class="URLinput" type="password" name="password" title="{t}Video password{/t}" /> <label class="sr-only" for="password">{t}Video password{/t}</label>
<input class="URLinput" type="password" name="password" id="password" />
<br/><br/> <br/><br/>
<input class="downloadBtn" type="submit" value="{t}Download{/t}" /> <input class="downloadBtn" type="submit" value="{t}Download{/t}" />
</form> </form>

7
templates/video.tpl
View file

@ -83,14 +83,15 @@
{if $config->convertAdvanced} {if $config->convertAdvanced}
<input type="checkbox" name="customConvert" id="customConvert"/> <input type="checkbox" name="customConvert" id="customConvert"/>
<label for="customConvert">{t}Convert into a custom format:{/t}</label> <label for="customConvert">{t}Convert into a custom format:{/t}</label>
<select title="Custom format" name="customFormat"> <select title="Custom format" name="customFormat" aria-label="{t}Format to convert to{/t}">
{foreach $config->convertAdvancedFormats as $format} {foreach $config->convertAdvancedFormats as $format}
<option>{$format}</option> <option>{$format}</option>
{/foreach} {/foreach}
</select> </select>
{t}with{/t} {t}with{/t}
<input type="number" value="{$config->audioBitrate}" title="Custom bitrate" class="customBitrate"name="customBitrate" id="customBitrate" /> <label for="customBitrate" class="sr-only">{t}Bit rate{/t}</label>
<label for="customBitrate">{t}kbit/s audio{/t}</label> <input type="number" value="{$config->audioBitrate}" title="Custom bitrate" class="customBitrate"name="customBitrate" id="customBitrate" aria-describedby="customBitrateUnit" />
<span id="customBitrateUnit">{t}kbit/s audio{/t}</span>
<br/><br/> <br/><br/>
{/if} {/if}
<input class="downloadBtn" type="submit" value="{t}Download{/t}" /><br/> <input class="downloadBtn" type="submit" value="{t}Download{/t}" /><br/>