From 25755385c00cc9ecc4b4d20fc4717d83613eb8c6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oliver=20R=C3=BCmpelein?= <oli_r@fg4f.de>
Date: Sat, 16 Jan 2021 15:16:40 +0100
Subject: [PATCH] Add accessibility.

---
 src/ds4.scss                                  |  1 +
 .../components/_character_progression.scss    |  2 +-
 src/scss/global/_accessibility.scss           |  3 +
 src/templates/actor/actor-sheet.hbs           | 58 ++++++++++++-------
 .../actor/partials/character-progression.hbs  |  6 +-
 5 files changed, 46 insertions(+), 24 deletions(-)
 create mode 100644 src/scss/global/_accessibility.scss

diff --git a/src/ds4.scss b/src/ds4.scss
index db46a09a..af018bb7 100644
--- a/src/ds4.scss
+++ b/src/ds4.scss
@@ -8,6 +8,7 @@
 @import "scss/global/window";
 @import "scss/global/grid";
 @import "scss/global/flex";
+@import "scss/global/accessibility";
 
 /* Styles limited to ds4 sheets */
 .ds4 {
diff --git a/src/scss/components/_character_progression.scss b/src/scss/components/_character_progression.scss
index c2b3fdcd..b13927d9 100644
--- a/src/scss/components/_character_progression.scss
+++ b/src/scss/components/_character_progression.scss
@@ -11,7 +11,7 @@
             font-family: $font-heading;
             display: block;
             height: 50px;
-            padding: 0px;
+            padding: 0;
             color: $c-light-grey;
             border: none;
             line-height: 50px;
diff --git a/src/scss/global/_accessibility.scss b/src/scss/global/_accessibility.scss
new file mode 100644
index 00000000..dd0e4211
--- /dev/null
+++ b/src/scss/global/_accessibility.scss
@@ -0,0 +1,3 @@
+.hidden {
+    display: none;
+}
diff --git a/src/templates/actor/actor-sheet.hbs b/src/templates/actor/actor-sheet.hbs
index 6763e440..6a14a951 100644
--- a/src/templates/actor/actor-sheet.hbs
+++ b/src/templates/actor/actor-sheet.hbs
@@ -1,52 +1,68 @@
 <form class="{{cssClass}} flexcol" autocomplete="off">
     {{!-- Sheet Header --}}
     <header class="sheet-header">
-        <img class="profile-img" src="{{actor.img}}" data-edit="img" title="{{actor.name}}" height="100" width="100" />
+        <img class="profile-img" src="{{actor.img}}" data-edit="img" alt="Actor Icon" title="{{actor.name}}"
+             height="100" width="100" />
         <div class="header-fields flexrow">
-            <h1 class="charname"><input name="name" type="text" value="{{actor.name}}" placeholder="Name" /></h1>
+            <h1 class="charname">
+                <label for="actor.name" class="hidden">Name</label>
+                <input name="name" type="text" id="actor.name" value="{{actor.name}}" placeholder="Name" />
+            </h1>
             {{> systems/ds4/templates/actor/partials/character-progression.hbs}}
 
             <div class="flexrow basic-properties">
                 <div class="basic-property">
                     <label class="basic-property-label" for="data.baseInfo.race">{{config.baseInfo.race}}</label>
-                    <input type="text" name="data.baseInfo.race" value="{{data.baseInfo.race}}" data-dtype="String" />
+                    <input type="text" name="data.baseInfo.race" id="data.baseInfo.race" value="{{data.baseInfo.race}}"
+                           data-dtype="String" />
                 </div>
                 <div class="basic-property">
                     <label class="basic-property-label" for="data.baseInfo.culture">{{config.baseInfo.culture}}</label>
-                    <input type="text" name="data.baseInfo.culture" value="{{data.baseInfo.culture}}"
-                        data-dtype="String" />
+                    <input id="data.baseInfo.culture" type="text" name="data.baseInfo.culture"
+                           value="{{data.baseInfo.culture}}"
+                           data-dtype="String" />
                 </div>
                 <div class="basic-property flex125">
                     <label class="basic-property-label"
-                        for="data.progression.progressPoints.used">{{config.progression.progressPoints}}</label>
+                           for="data.progression.progressPoints.used">{{config.progression.progressPoints}}</label>
                     <div class="flexrow">
-                        <input type="number" name="data.progression.progressPoints.used"
-                            value="{{data.progression.progressPoints.used}}" data-dtype="Number" /><span
-                            class="input-divider"> /
-                        </span><input type="number" name="data.progression.progressPoints.total"
-                            value="{{data.progression.progressPoints.total}}" data-dtype="Number" />
+                        <input id="data.progression.progressPoints.used" type="number"
+                               name="data.progression.progressPoints.used"
+                               value="{{data.progression.progressPoints.used}}" data-dtype="Number" />
+                        <span class="input-divider"> / </span>
+                        <label class="hidden" for="data.progression.progressPoints.total">Total
+                            Progression Points</label>
+                        <input type="number"
+                               id="data.progression.progressPoints.total"
+                               name="data.progression.progressPoints.total"
+                               value="{{data.progression.progressPoints.total}}"
+                               data-dtype="Number" />
                     </div>
                 </div>
                 <div class="basic-property flex125">
                     <label class="basic-property-label"
-                        for="data.progression.talentPoints.used">{{config.progression.talentPoints}}</label>
+                           for="data.progression.talentPoints.used">{{config.progression.talentPoints}}</label>
                     <div class="flexrow">
                         <input type="number" name="data.progression.talentPoints.used"
-                            value="{{data.progression.talentPoints.used}}" data-dtype="Number" /><span
-                            class="input-divider"> /
-                        </span><input type="number" name="data.progression.talentPoints.total"
-                            value="{{data.progression.talentPoints.total}}" data-dtype="Number" />
+                               id="data.progression.talentPoints.used"
+                               value="{{data.progression.talentPoints.used}}" data-dtype="Number" />
+                        <span class="input-divider"> / </span>
+                        <label for="data.progression.talentPoints.total" class="hidden">Total Talent Points</label>
+                        <input type="number" name="data.progression.talentPoints.total" id="data.progression.talentPoints.total"
+                               value="{{data.progression.talentPoints.total}}" data-dtype="Number" />
                     </div>
                 </div>
                 <div class="basic-property">
                     <label class="basic-property-label" for="data.baseInfo.class">{{config.baseInfo.class}}</label>
-                    <input type="text" name="data.baseInfo.class" value="{{data.baseInfo.class}}" data-dtype="String" />
+                    <input type="text" id="data.baseInfo.class" name="data.baseInfo.class"
+                           value="{{data.baseInfo.class}}" data-dtype="String" />
                 </div>
                 <div class="basic-property">
                     <label class="basic-property-label"
-                        for="data.baseInfo.heroClass">{{config.baseInfo.heroClass}}</label>
-                    <input type="text" name="data.baseInfo.heroClass" value="{{data.baseInfo.heroClass}}"
-                        data-dtype="String" />
+                           for="data.baseInfo.heroClass">{{config.baseInfo.heroClass}}</label>
+                    <input type="text" id="data.baseInfo.heroClass" name="data.baseInfo.heroClass"
+                           value="{{data.baseInfo.heroClass}}"
+                           data-dtype="String" />
                 </div>
             </div>
         </div>
@@ -84,4 +100,4 @@
             {{editor content=data.biography target="data.biography" button=true owner=owner editable=editable}}
         </div>
     </section>
-</form>
\ No newline at end of file
+</form>
diff --git a/src/templates/actor/partials/character-progression.hbs b/src/templates/actor/partials/character-progression.hbs
index f22376f0..b5a2115e 100644
--- a/src/templates/actor/partials/character-progression.hbs
+++ b/src/templates/actor/partials/character-progression.hbs
@@ -2,14 +2,16 @@
     <div class="progression-entry">
         <h2 class="progression-label"><label for="data.progression.level">{{config.progression.level}}</label>
         </h2>
-        <input class="progression-value" type="number" name="data.progression.level" value="{{data.progression.level}}"
+        <label for="data.progression.level" class="hidden">Progression Level</label>
+        <input class="progression-value" type="number" name="data.progression.level" id="data.progression.level" value="{{data.progression.level}}"
             data-dtype="Number" />
     </div>
     <div class="progression-entry">
         <h2 class="progression-label"><label
                 for="data.progression.experiencePoints">{{config.progression.experiencePoints}}</label>
         </h2>
-        <input class="progression-value" type="number" name="data.progression.experiencePoints"
+        <label for="data.progression.experiencePoints" class="hidden">Experience Points</label>
+        <input class="progression-value" type="number" name="data.progression.experiencePoints" id="data.progression.experiencePoints"
             value="{{data.progression.experiencePoints}}" data-dtype="Number" />
     </div>
 </div>