Add accessibility.

This commit is contained in:
Oliver Rümpelein 2021-01-16 15:16:40 +01:00
parent 319c40c4a7
commit 25755385c0
5 changed files with 46 additions and 24 deletions

View file

@ -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 {

View file

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

View file

@ -0,0 +1,3 @@
.hidden {
display: none;
}

View file

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

View file

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