Add accessibility.
This commit is contained in:
parent
319c40c4a7
commit
25755385c0
5 changed files with 46 additions and 24 deletions
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
3
src/scss/global/_accessibility.scss
Normal file
3
src/scss/global/_accessibility.scss
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -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>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue