From 596d5e29942c7f63b2e41b10eed21456d778a12c Mon Sep 17 00:00:00 2001
From: Damien Senger <damien@raccoon.studio>
Date: Sat, 13 Apr 2019 13:17:13 +0200
Subject: [PATCH] Adds and fixes labels for video.tpl inputs

According to the WCAG success criterias 1.3.1 (Info and relationships),
3.3.2 (Labels or Instructions) and 4.1.2 (Name, Role, Value), labels
or instructions are required when content requires user input.

The bit rate label was replaced by a real label announcing the purpose
of the text input _Custom bitrate_. The existing unit indication is now
using a `<span>` attribute and it is linked to the input using an
`aria-describedby` attribute.

Also, the lack of label for the format conversion selectbox is fixed
by using a specific `aria-label` attribute.

Resources:
- https://www.w3.org/TR/WCAG21/#labels-or-instructions
- https://www.w3.org/TR/WCAG21/#info-and-relationships
- https://www.w3.org/TR/WCAG21/#name-role-value
- https://www.w3.org/TR/WCAG20-TECHS/H44.html
- https://www.w3.org/WAI/WCAG21/Understanding/labels-or-instructions.html
- https://www.w3.org/TR/WCAG20-TECHS/ARIA1.html
---
 templates/video.tpl | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/templates/video.tpl b/templates/video.tpl
index cdf4242..d7b1f83 100644
--- a/templates/video.tpl
+++ b/templates/video.tpl
@@ -83,14 +83,15 @@
         {if $config->convertAdvanced}
             <input type="checkbox" name="customConvert" id="customConvert"/>
             <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}
                     <option>{$format}</option>
                 {/foreach}
             </select>
             {t}with{/t}
-            <input type="number" value="{$config->audioBitrate}" title="Custom bitrate" class="customBitrate"name="customBitrate" id="customBitrate" />
-            <label for="customBitrate">{t}kbit/s audio{/t}</label>
+            <label for="customBitrate" class="sr-only">{t}Bit rate{/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/>
         {/if}
         <input class="downloadBtn" type="submit" value="{t}Download{/t}" /><br/>