Merge pull request #25 from GoOz/fix-improve-a11y

CHANGELOG.md

@@ -5,6 +5,11 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.1.2] - 2023-03-02
+
+### Fixed
+- Improved accessiblity
+
 ## [1.1.1] - 2023-02-28
 
 ### Fixed
@@ -21,7 +26,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Reorder basic skills by alphabetic order according to the current used language
 - Versioning section in the settings modal
 
-
 ## [1.0.0] - 2023-02-22
 
 ### Added

css/app.css

@@ -67,14 +67,14 @@ body {
  font-style: normal;
 }
 
-a:not(.button, .tab):is(:link, :visited) {
+a:not(.button, .tab, .forkme):is(:link, :visited) {
  box-shadow: inset 0 0 0 0 var(--contrast);
  color: var(--contrast);
  margin: 0 -.125rem;
  padding: 0 .125rem;
  transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
 }
-a:not(.button, .tab):is(:hover, :active, :focus) {
+a:not(.button, .tab, .forkme):is(:hover, :active, :focus) {
  box-shadow: inset 30rem 0 0 0 var(--contrast);
  color: var(--bgcolor);
 }
@@ -364,7 +364,7 @@ input[type="file"]:is(:hover, :focus, :active)::file-selector-button {
  font-weight: bold;
 }
 .tab:not(.active) {
- opacity: .5;
+ opacity: .8;
  background-color: var(--lightgrey)
 }
 .tab:not(.active):is(:hover, :focus, :active) {

package.json

@@ -1,6 +1,6 @@
 {
  "name": "wfrp-sheet",
- "version": "1.1.1",
+ "version": "1.1.2",
  "scripts": {
  "build": "npx eleventy",
  "serve": "npx eleventy --serve",

src/_includes/sheet.html

@@ -90,8 +90,8 @@ <h1 class="sr-only">{{ 'h1' | i18n }}</h1>
  </div>
  </fieldset>
  <fieldset class="charac addition">
- <legend>{{ 'charac.title' | i18n }}</legend>
- <table class="left-aligned">
+ <legend id="charac-title">{{ 'charac.title' | i18n }}</legend>
+ <table class="left-aligned" aria-describedby="charac-title">
  <thead>
  <td></td>
  <th scolpe="col" id="charac-ws-label">
@@ -224,8 +224,8 @@ <h1 class="sr-only">{{ 'h1' | i18n }}</h1>
  <div class="points">
  <div class="points-wrapper">
  <fieldset class="counter simple">
- <legend>{{ 'points.fate.title' | i18n }}</legend>
- <table class="left-aligned">
+ <legend id="fate-title">{{ 'points.fate.title' | i18n }}</legend>
+ <table class="left-aligned" aria-describedby="fate-title">
  <tbody>
  <tr>
  <th scope="row">{{ 'points.fate.title' | i18n }}</th>
@@ -244,9 +244,9 @@ <h1 class="sr-only">{{ 'h1' | i18n }}</h1>
  </tbody>
  </table>
  </fieldset>
- <fieldset class="counter simple">
+ <fieldset id="resilience-title" class="counter simple">
  <legend>{{ 'points.resilience.title' | i18n }}</legend>
- <table>
+ <table aria-describedby="resilience-title">
  <thead>
  <tr>
  <th scope="col"><abbr title="{{ 'points.resilience.title' | i18n }}">{{ 'points.resilience.abbr' | i18n }}</abbr></th>
@@ -272,8 +272,8 @@ <h1 class="sr-only">{{ 'h1' | i18n }}</h1>
  </table>
  </fieldset>
  <fieldset class="addition">
- <legend>{{ 'points.experience.title' | i18n }}</legend>
- <table class="layout-fixed">
+ <legend id="experience-title">{{ 'points.experience.title' | i18n }}</legend>
+ <table class="layout-fixed" aria-describedby="experience-title">
  <thead>
  <tr>
  <th scope="col">
@@ -324,9 +324,9 @@ <h1 class="sr-only">{{ 'h1' | i18n }}</h1>
  <div class="skills">
  <div class="skills-wrapper">
  <fieldset class="addition basic">
- <legend class="sr-only">{{ 'skills.basicTitle' | i18n }}</legend>
+ <legend id="skills-title" class="sr-only">{{ 'skills.basicTitle' | i18n }}</legend>
  <div class="fake-legend" aria-hidden>{{ 'skills.basicTitle' | i18n }}</div>
- <table class="left-aligned">
+ <table class="left-aligned" aria-describedby="skills-title">
  <thead>
  <tr>
  <th scope="col">{{ 'skills.name' | i18n }}</th>
@@ -349,7 +349,7 @@ <h1 class="sr-only">{{ 'h1' | i18n }}</h1>
  <fieldset class="addition basic">
  <legend class="sr-only">{{ 'skills.basicTitle' | i18n }}</legend>
  <div class="fake-legend" aria-hidden>{{ 'skills.basicTitle' | i18n }}</div>
- <table class="left-aligned">
+ <table class="left-aligned" aria-describedby="skills-title">
  <thead>
  <tr>
  <th scope="col">{{ 'skills.name' | i18n }}</th>
@@ -370,12 +370,12 @@ <h1 class="sr-only">{{ 'h1' | i18n }}</h1>
  </table>
  </fieldset>
  <fieldset class="addition custom" id="custom-skill">
- <legend class="sr-only">{{ 'skills.customTitle' | i18n }}</legend>
+ <legend id="custom-skill-title" class="sr-only">{{ 'skills.customTitle' | i18n }}</legend>
  <div class="fake-legend" aria-hidden>{{ 'skills.customTitle' | i18n }}</div>
- <table class="left-aligned">
+ <table class="left-aligned" aria-describedby="custom-skill-title">
  <thead>
  <tr>
- <th scope="col">{{ 'skills.name' | i18n }}</th>
+ <th scope="col" id="skills-name-label">{{ 'skills.name' | i18n }}</th>
  <th colspan="2" scope="col">
  <abbr title="{{ 'skills.charac' | i18n }}">{{ 'skills.characAbbr' | i18n }}</abbr>
  </th>
@@ -480,8 +480,8 @@ <h1 class="sr-only">{{ 'h1' | i18n }}</h1>
  </div>
  </div>
  <fieldset class="talents simple custom" id="talents">
- <legend>{{ 'talents.title' | i18n }}</legend>
- <table>
+ <legend id="talents-title">{{ 'talents.title' | i18n }}</legend>
+ <table aria-describedby="talents-title">
  <thead>
  <tr>
  <th scope="col">
@@ -534,14 +534,14 @@ <h1 class="sr-only">{{ 'h1' | i18n }}</h1>
  <div class="item">
  <div class="item-label" id="ambitions-short-label">{{ 'ambitions.short' | i18n }}</div>
  <div class="item-desc">
- <div contenteditable role="textbox" aria-multiline="true" aria-labelledby="ambitions-short-label"></div>
+ <div contenteditable tabindex="0" role="textbox" aria-multiline="true" aria-labelledby="ambitions-short-label"></div>
  <input type="hidden" name="ambitions-short" id="ambitions-short">
  </div>
  </div>
  <div class="item">
  <div class="item-label" id="ambitions-long-label">{{ 'ambitions.long' | i18n }}</div>
  <div class="item-desc">
- <div contenteditable role="textbox" aria-multiline="true" aria-labelledby="ambitions-long-label"></div>
+ <div contenteditable tabindex="0" role="textbox" aria-multiline="true" aria-labelledby="ambitions-long-label"></div>
  <input type="hidden" name="ambitions-long" id="ambitions-long">
  </div>
  </div>
@@ -554,28 +554,28 @@ <h1 class="sr-only">{{ 'h1' | i18n }}</h1>
  <div class="item">
  <div class="item-label" id="party-name-label">{{ 'party.name' | i18n }}</div>
  <div class="item-desc">
- <div contenteditable role="textbox" aria-labelledBy="party-name-label"></div>
+ <div contenteditable tabindex="0" role="textbox" aria-labelledBy="party-name-label"></div>
  <input type="hidden" name="party-name" id="party-name">
  </div>
  </div>
  <div class="item">
  <div class="item-label" id="party-short-label">{{ 'party.short' | i18n }}</div>
  <div class="item-desc">
- <div contenteditable role="textbox" aria-multiline="true" aria-labelledBy="party-short-label"></div>
+ <div contenteditable tabindex="0" role="textbox" aria-multiline="true" aria-labelledBy="party-short-label"></div>
  <input type="hidden" name="party-short" id="party-short">
  </div>
  </div>
  <div class="item">
  <div class="item-label" id="party-long-label">{{ 'party.long' | i18n }}</div>
  <div class="item-desc">
- <div contenteditable role="textbox" aria-multiline="true" aria-labelledBy="party-long-label"></div>
+ <div contenteditable tabindex="0" role="textbox" aria-multiline="true" aria-labelledBy="party-long-label"></div>
  <input type="hidden" name="party-long" id="party-long">
  </div>
  </div>
  <div class="item">
  <div class="item-label" id="party-members-label">{{ 'party.members' | i18n }}</div>
  <div class="item-desc">
- <div contenteditable role="textbox" aria-multiline="true" aria-labelledBy="party-members-label"></div>
+ <div contenteditable tabindex="0" role="textbox" aria-multiline="true" aria-labelledBy="party-members-label"></div>
  <input type="hidden" name="party-members" id="party-members">
  </div>
  </div>
@@ -584,8 +584,8 @@ <h1 class="sr-only">{{ 'h1' | i18n }}</h1>
  </div>
  <div class="page second">
  <fieldset class="armour simple encumbrance-src custom" id="armour">
- <legend>{{ 'armour.title' | i18n }}</legend>
- <table>
+ <legend id="armour-title">{{ 'armour.title' | i18n }}</legend>
+ <table aria-describedby="armour-title">
  <thead>
  <th scope="col">
  <span id="armour-name-label">{{ 'armour.name' | i18n }}</span>
@@ -688,7 +688,7 @@ <h1 class="sr-only">{{ 'h1' | i18n }}</h1>
  <span id="ap-right-leg-desc">90-00</span>
  </div>
  <div class="armour-points-stat armour-points-stat--shield">
- <svg width="800px" height="800px" viewBox="-6 0 32 32" class="shield">
+ <svg role="presentation" width="800px" height="800px" viewBox="-6 0 32 32" class="shield">
  <path d="M10.133 2.667l-10.133 1.92c0 0 0 12.16 0 14.347 0 3.467 3.040 7.947 10.133 10.4 7.093-2.453 10.133-6.933 10.133-10.4 0-2.187 0-14.347 0-14.347l-10.133-1.92zM19.2 18.933c0 2.987-2.827 6.987-9.067 9.28-6.24-2.293-9.067-6.293-9.067-9.28v-13.44l9.067-1.76 9.067 1.707v13.493z" fill="currentColor"></path>
  </svg>
  <label for="ap-shield">{{ 'armourPoints.shield' | i18n }}</label>
@@ -697,9 +697,9 @@ <h1 class="sr-only">{{ 'h1' | i18n }}</h1>
  </div>
  </fieldset>
  <fieldset class="wounds simple">
- <legend>{{ 'wounds.title' | i18n }}</legend>
+ <legend id="wounds-title">{{ 'wounds.title' | i18n }}</legend>
  <div class="wounds-wrapper">
- <table class="left-aligned wounds-total">
+ <table class="left-aligned wounds-total" aria-describedby="wounds-title">
  <tbody>
  <tr>
  <th scope="row" class="narrow">
@@ -747,8 +747,8 @@ <h1 class="sr-only">{{ 'h1' | i18n }}</h1>
  </div>
  </fieldset>
  <fieldset class="trappings simple custom encumbrance-src" id="trappings">
- <legend>{{ 'trappings.title' | i18n }}</legend>
- <table>
+ <legend id="trappings-title">{{ 'trappings.title' | i18n }}</legend>
+ <table aria-describedby="trappings-title">
  <thead>
  <th scope="col">
  <span id="trappings-name-label">{{ 'trappings.name' | i18n }}</span>
@@ -794,8 +794,8 @@ <h1 class="sr-only">{{ 'h1' | i18n }}</h1>
  </template>
  </fieldset>
  <fieldset class="encumbrance addition">
- <legend>{{ 'encumbrance.title' | i18n }}</legend>
- <table class="left-aligned">
+ <legend id="encumbrance-title">{{ 'encumbrance.title' | i18n }}</legend>
+ <table class="left-aligned" aria-describedby="encumbrance-title">
  <tbody>
  <tr>
  <th scope="row" class="narrow">{{ 'encumbrance.weapons' | i18n }}</th>
@@ -860,8 +860,8 @@ <h1 class="sr-only">{{ 'h1' | i18n }}</h1>
  </div>
  </fieldset>
  <fieldset class="wealth simple">
- <legend>{{ 'wealth.title' | i18n }}</legend>
- <table class="layout-fixed">
+ <legend id="wealth-title">{{ 'wealth.title' | i18n }}</legend>
+ <table class="layout-fixed" aria-describedby="wealth-title">
  <thead>
  <tr>
  <th scope="col" id="copper-label">
@@ -895,7 +895,7 @@ <h1 class="sr-only">{{ 'h1' | i18n }}</h1>
  <legend class="sr-only" id="psychology-label">{{ 'psychology.title' | i18n }}</legend>
  <div class="fake-legend" aria-hidden>{{ 'psychology.title' | i18n }}</div>
  <div class="psychology-content">
- <div contenteditable role="textbox" aria-multiline="true" aria-labelledby="psychology-label"></div>
+ <div contenteditable tabindex="0" role="textbox" aria-multiline="true" aria-labelledby="psychology-label"></div>
  <input type="hidden" name="psychology" id="psychology">
  </div>
  </fieldset>
@@ -921,8 +921,8 @@ <h1 class="sr-only">{{ 'h1' | i18n }}</h1>
  </div>
  </fieldset>
  <fieldset class="weapons simple encumbrance-src custom" id="weapons">
- <legend>{{ 'weapons.title' | i18n }}</legend>
- <table>
+ <legend id="weapons-title">{{ 'weapons.title' | i18n }}</legend>
+ <table aria-describedby="weapons-title">
  <thead>
  <th scope="col">
  <span id="weapons-name-label">{{ 'weapons.name' | i18n }}</span>
@@ -1002,12 +1002,12 @@ <h1 class="sr-only">{{ 'h1' | i18n }}</h1>
  <output class="hidden" id="encumbrance-weapons-total"></output>
  </fieldset>
  <fieldset class="spells simple custom" id="spells">
- <legend>{{ 'spells.title' | i18n }}</legend>
+ <legend id="spells-title">{{ 'spells.title' | i18n }}</legend>
  <div class="spells-wrapper">
  <label for="sin">{{ 'spells.sin' | i18n }}</label>
  <input type="number" name="sin" id="sin">
  </div>
- <table>
+ <table aria-describedby="spells-title">
  <thead>
  <th scope="col">
  <span id="spells-name-label">{{ 'spells.name' | i18n }}</span>

src/index.html

@@ -20,7 +20,7 @@
 </head>
 <body>
  <div class="wrapper">
- <img class="logo" src="android-chrome-192x192.png" alt="">
+ <img class="logo" role="presentation" src="android-chrome-192x192.png" alt="">
  <div class="tabs">
  <a class="tab active en" href="#en">English version</a>
  <a class="tab fr" href="#fr" lang="fr">Version française</a>
@@ -72,7 +72,7 @@ <h2>Fonctionnaliltés de l'application</h2>
  </div>
  </div>
  </div>
- <a class="forkme" href="https://github.com/GoOz/wfrp-sheet/"><img decoding="async" loading="lazy" width="149" height="149" src="https://github.blog/wp-content/uploads/2008/12/forkme_right_darkblue_121621.png?resize=149%2C149" class="attachment-full size-full" alt="Fork me on GitHub" data-recalc-dims="1"></a>
+ <a class="forkme" href="https://github.com/GoOz/wfrp-sheet/"><img decoding="async" loading="lazy" width="149" height="149" src="https://github.blog/wp-content/uploads/2008/12/forkme_right_darkblue_121621.png?resize=149%2C149" class="attachment-full size-full" alt="Fork me on GitHub" title="Fork me on GitHub" data-recalc-dims="1"></a>
  <script>
  document.addEventListener('DOMContentLoaded', (event) => {
  window.location.hash = '#en';