dungeonslayers/ds4
dungeonslayers/ds4
3
0
Fork 0
Code Issues 9 Pull requests 7 Projects Releases 10 Packages 1 Activity

Add accessibility.

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/ds4.scss
View file

@ -8,6 +8,7 @@
@import "scss/global/window"; @import "scss/global/window";
@import "scss/global/grid"; @import "scss/global/grid";
@import "scss/global/flex"; @import "scss/global/flex";
@import "scss/global/accessibility";
/* Styles limited to ds4 sheets */ /* Styles limited to ds4 sheets */
.ds4 { .ds4 {

2
src/scss/components/_character_progression.scss
View file

@ -11,7 +11,7 @@
font-family: $font-heading; font-family: $font-heading;
display: block; display: block;
height: 50px; height: 50px;
padding: 0px; padding: 0;
color: $c-light-grey; color: $c-light-grey;
border: none; border: none;
line-height: 50px; line-height: 50px;

3
src/scss/global/_accessibility.scss Normal file
View file

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

44
src/templates/actor/actor-sheet.hbs
View file

@ -1,30 +1,42 @@
<form class="{{cssClass}} flexcol" autocomplete="off"> <form class="{{cssClass}} flexcol" autocomplete="off">
{{!-- Sheet Header --}} {{!-- Sheet Header --}}
<header class="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"> <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}} {{> systems/ds4/templates/actor/partials/character-progression.hbs}}
<div class="flexrow basic-properties"> <div class="flexrow basic-properties">
<div class="basic-property"> <div class="basic-property">
<label class="basic-property-label" for="data.baseInfo.race">{{config.baseInfo.race}}</label> <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>
<div class="basic-property"> <div class="basic-property">
<label class="basic-property-label" for="data.baseInfo.culture">{{config.baseInfo.culture}}</label> <label class="basic-property-label" for="data.baseInfo.culture">{{config.baseInfo.culture}}</label>
<input type="text" name="data.baseInfo.culture" value="{{data.baseInfo.culture}}" <input id="data.baseInfo.culture" type="text" name="data.baseInfo.culture"
value="{{data.baseInfo.culture}}"
data-dtype="String" /> data-dtype="String" />
</div> </div>
<div class="basic-property flex125"> <div class="basic-property flex125">
<label class="basic-property-label" <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"> <div class="flexrow">
<input type="number" name="data.progression.progressPoints.used" <input id="data.progression.progressPoints.used" type="number"
value="{{data.progression.progressPoints.used}}" data-dtype="Number" /><span name="data.progression.progressPoints.used"
class="input-divider"> / value="{{data.progression.progressPoints.used}}" data-dtype="Number" />
</span><input type="number" name="data.progression.progressPoints.total" <span class="input-divider"> / </span>
value="{{data.progression.progressPoints.total}}" data-dtype="Number" /> <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> </div>
<div class="basic-property flex125"> <div class="basic-property flex125">
@ -32,20 +44,24 @@
for="data.progression.talentPoints.used">{{config.progression.talentPoints}}</label> for="data.progression.talentPoints.used">{{config.progression.talentPoints}}</label>
<div class="flexrow"> <div class="flexrow">
<input type="number" name="data.progression.talentPoints.used" <input type="number" name="data.progression.talentPoints.used"
value="{{data.progression.talentPoints.used}}" data-dtype="Number" /><span id="data.progression.talentPoints.used"
class="input-divider"> / value="{{data.progression.talentPoints.used}}" data-dtype="Number" />
</span><input type="number" name="data.progression.talentPoints.total" <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" /> value="{{data.progression.talentPoints.total}}" data-dtype="Number" />
</div> </div>
</div> </div>
<div class="basic-property"> <div class="basic-property">
<label class="basic-property-label" for="data.baseInfo.class">{{config.baseInfo.class}}</label> <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>
<div class="basic-property"> <div class="basic-property">
<label class="basic-property-label" <label class="basic-property-label"
for="data.baseInfo.heroClass">{{config.baseInfo.heroClass}}</label> for="data.baseInfo.heroClass">{{config.baseInfo.heroClass}}</label>
<input type="text" name="data.baseInfo.heroClass" value="{{data.baseInfo.heroClass}}" <input type="text" id="data.baseInfo.heroClass" name="data.baseInfo.heroClass"
value="{{data.baseInfo.heroClass}}"
data-dtype="String" /> data-dtype="String" />
</div> </div>
</div> </div>

6
src/templates/actor/partials/character-progression.hbs
View file

@ -2,14 +2,16 @@
<div class="progression-entry"> <div class="progression-entry">
<h2 class="progression-label"><label for="data.progression.level">{{config.progression.level}}</label> <h2 class="progression-label"><label for="data.progression.level">{{config.progression.level}}</label>
</h2> </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" /> data-dtype="Number" />
</div> </div>
<div class="progression-entry"> <div class="progression-entry">
<h2 class="progression-label"><label <h2 class="progression-label"><label
for="data.progression.experiencePoints">{{config.progression.experiencePoints}}</label> for="data.progression.experiencePoints">{{config.progression.experiencePoints}}</label>
</h2> </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" /> value="{{data.progression.experiencePoints}}" data-dtype="Number" />
</div> </div>
</div> </div>