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/_basic_property.scss b/src/scss/components/_basic_property.scss index 40978da4..56668373 100644 --- a/src/scss/components/_basic_property.scss +++ b/src/scss/components/_basic_property.scss @@ -1,6 +1,7 @@ .basic-properties { flex: 0 0 100%; - gap: 2px; + grid-gap: 2px; + grid-template-columns: repeat(auto-fill, minmax(9em, 1fr)); .basic-property { display: grid; align-content: end; 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/components/_description.scss b/src/scss/components/_description.scss index 767fb516..fc299a29 100644 --- a/src/scss/components/_description.scss +++ b/src/scss/components/_description.scss @@ -9,7 +9,7 @@ .side-property { margin: 2px 0; display: grid; - grid-template-columns: 40% auto; + grid-template-columns: minmax(40%, max-content) 1fr; justify-content: left; label { 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/character-sheet.hbs b/src/templates/actor/character-sheet.hbs index b1008c7a..0fb538f9 100644 --- a/src/templates/actor/character-sheet.hbs +++ b/src/templates/actor/character-sheet.hbs @@ -1,55 +1,71 @@ <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.characterBaseInfo.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.characterBaseInfo.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.characterProgression.progressPoints}}</label> + for="data.progression.progressPoints.used">{{config.characterProgression.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.characterProgression.talentPoints}}</label> + for="data.progression.talentPoints.used">{{config.characterProgression.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.characterBaseInfo.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.characterBaseInfo.heroClass}}</label> - <input type="text" name="data.baseInfo.heroClass" value="{{data.baseInfo.heroClass}}" - data-dtype="String" /> + for="data.baseInfo.heroClass">{{config.characterBaseInfo.heroClass}}</label> + <input type="text" id="data.baseInfo.heroClass" name="data.baseInfo.heroClass" + value="{{data.baseInfo.heroClass}}" + data-dtype="String" /> </div> </div> </div> diff --git a/src/templates/actor/partials/character-progression.hbs b/src/templates/actor/partials/character-progression.hbs index 8990656c..fd0a3932 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.characterProgression.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.characterProgression.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> diff --git a/src/templates/item/spell-sheet.hbs b/src/templates/item/spell-sheet.hbs index 5f2c7a28..4e180755 100644 --- a/src/templates/item/spell-sheet.hbs +++ b/src/templates/item/spell-sheet.hbs @@ -28,10 +28,10 @@ <form class="{{cssClass}}" autocomplete="off"> {{#> systems/ds4/templates/item/partials/sheet-header.hbs}} - <div class="grid grid-4col basic-properties"> + <div class="grid basic-properties"> <div class="basic-property"> - <label for="data.spellType">{{localize "DS4.SpellType"}}</label> - <select name="data.spellType" data-type="String"> + <label for="data.spellType">{{localize "DS4.SpellType"}}</label> + <select id="data.spellType" name="data.spellType" data-type="String"> {{#select data.spellType}} {{#each config.spellTypes as |value key|}} <option value="{{key}}">{{value}}</option> @@ -41,16 +41,16 @@ </div> <div class="basic-property"> <label for="data.bonus">{{localize "DS4.SpellBonus"}}</label> - <input type="text" name="data.bonus" value="{{data.bonus}}" data-dtype="String" /> + <input id="data.bonus" type="text" name="data.bonus" value="{{data.bonus}}" data-dtype="String" /> </div> </div> {{/systems/ds4/templates/item/partials/sheet-header.hbs}} - + {{!-- Common Item body --}} {{#> systems/ds4/templates/item/partials/body.hbs}} <div class="side-property"> - <label for="data.spellCategory">{{localize "DS4.SpellCategory"}}</label> - <select name="data.spellCategory" data-type="String"> + <label for="data.spellCategory">{{localize "DS4.SpellCategory"}}</label> + <select id="data.spellCategory" name="data.spellCategory" data-type="String"> {{#select data.spellCategory}} {{#each config.spellCategories as |value key|}} <option value="{{key}}">{{value}}</option> @@ -65,7 +65,7 @@ <div class="side-property"> <label for="data.scrollPrice">{{localize "DS4.SpellScrollPriceGold"}}</label> <input type="number" min="0" max="9999" step="0.01" data-dtype="Number" - name="data.scrollPrice" value="{{data.scrollPrice}}" /> + name="data.scrollPrice" id="data.scrollPrice" value="{{data.scrollPrice}}" /> </div> {{/systems/ds4/templates/item/partials/body.hbs}}