Skip to content

Commit

Permalink
Merge pull request #3 from algernhon/dev
Browse files Browse the repository at this point in the history 
Add A11Y interaction with main menu + Meta fix
  • Loading branch information
@algernhon
algernhon authored Oct 1, 2022
2 parents 6177e7c + e93dadf commit b1a7e70
Show file tree
Hide file tree
Showing 2 changed files with 29 additions and 15 deletions.
30 changes: 15 additions & 15 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,28 +4,28 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="An interactive map for the Lord Of The Rings : Rings Of Power Amazon TV show" />
<meta property="og:title" content="Rings of Power - Interactive map" />
<meta name="description" content="An interactive map for the Lord Of The Rings : Rings Of Power Amazon TV show. Follow Galadriel and the others!" />
<meta property="og:title" content="Lord of The Rings: Rings of Power - Interactive map" />
<meta property="og:type" content="website" />
<title>Rings of Power - Interactive map</title>
<title>Lord of The Rings: Rings of Power - Interactive map</title>
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
<link rel="icon" href="img/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="css/leaflet.css"/>
<link rel="stylesheet" href="css/coordinates.css"/>
<link rel="stylesheet" href="css/leaflet.draw.css"/>
<link rel="stylesheet" href="css/style.css?id=10"/>
<link rel="stylesheet" href="css/style.css?id=11"/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap" rel="stylesheet">
<script defer type="text/javascript" src="data/paths.js?version=10"></script>
<script defer type="text/javascript" src="data/markers.js?version=10"></script>
<script defer type="text/javascript" src="data/paths.js?version=11"></script>
<script defer type="text/javascript" src="data/markers.js?version=11"></script>
<script defer src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha256-NDI0K41gVbWqfkkaHj15IzU7PtMoelkzyKp8TOaFQ3s="
crossorigin=""></script>
<script defer src="js/plugins/leaflet.draw.js"></script>
<script defer src="js/plugins/coordinates.js"></script>
<script defer src="js/plugins/snakeanim.js"></script>
<script defer src="js/main.js?version=10"></script>
<script defer src="js/main.js?version=11"></script>
</head>
<body>
<main role="main" aria-label="Main menu">
Expand All @@ -40,49 +40,49 @@ <h2>Paths</h2>
<div class="pathsgrid">
<div class="pathsgrid__card">
<input type="checkbox" name="Arondir" id="checkboxArondir" onchange="togglePathCheckbox(this)"/>
<label class="pathsgrid__label" for="checkboxArondir" tabindex="0">
<label class="pathsgrid__label" for="checkboxArondir" tabindex="0" onkeydown="interactionLabel(event)" >
<img src="img/portraits/arondir.webp" alt="Arondir's Path" />
<p>Arondir</p>
</label>
</div>
<div class="pathsgrid__card">
<input type="checkbox" name="Elendil" id="checkboxElendil" onchange="togglePathCheckbox(this)" />
<label class="pathsgrid__label" for="checkboxElendil" tabindex="0">
<img src="img/portraits/elendil.webp" alt="Elendil's Path" />
<label class="pathsgrid__label" for="checkboxElendil" tabindex="0" onkeydown="interactionLabel(event)">
<img src="img/portraits/elendil.webp" alt="Elendil's P ath" />
<p>Elendil</p>
</label>
</div>
<div class="pathsgrid__card">
<input type="checkbox" name="Elrond" id="checkboxElrond" onchange="togglePathCheckbox(this)" />
<label class="pathsgrid__label" for="checkboxElrond" tabindex="0">
<label class="pathsgrid__label" for="checkboxElrond" tabindex="0" onkeydown="interactionLabel(event)">
<img src="img/portraits/elrond.webp" alt="Elrond's Path" />
<p>Elrond</p>
</label>
</div>
<div class="pathsgrid__card">
<input type="checkbox" name="Galadriel" id="checkboxGalabriel" onchange="togglePathCheckbox(this)"/>
<label class="pathsgrid__label" for="checkboxGalabriel" tabindex="0">
<label class="pathsgrid__label" for="checkboxGalabriel" tabindex="0" onkeydown="interactionLabel(event)">
<img src="img/portraits/galabriel.webp" alt="Galadriel's Path" />
<p>Galadriel</p>
</label>
</div>
<div class="pathsgrid__card">
<input type="checkbox" name="Halbrand" id="checkboxHalbrand" onchange="togglePathCheckbox(this)"/>
<label class="pathsgrid__label" for="checkboxHalbrand" tabindex="0">
<label class="pathsgrid__label" for="checkboxHalbrand" tabindex="0" onkeydown="interactionLabel(event)">
<img src="img/portraits/halbrand.webp" alt="Halbrand's Path" />
<p>Halbrand</p>
</label>
</div>
<div class="pathsgrid__card">
<input type="checkbox" name="Nori" id="checkboxNori" onchange="togglePathCheckbox(this)" />
<label class="pathsgrid__label" for="checkboxNori" tabindex="0">
<label class="pathsgrid__label" for="checkboxNori" tabindex="0" onkeydown="interactionLabel(event)">
<img src="img/portraits/harfoots.webp" alt="Nori's Path" />
<p>Nori</p>
</label>
</div>
</div>
<div class="update">
<span class="update__text">Updated: Episode 06 Season 01</span>
<span class="update__text">Updated: S01E06</span>
</div>
</div>
</div>
Expand Down
14 changes: 14 additions & 0 deletions js/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,20 @@ function togglePathCheckbox(element) {
}
}

/*
* A11Y Function: Trigger checkbox when using keyboard on focused label
*
* @param event of the label
*/
function interactionLabel(event) {
const checkbox = event.target.control;

if (event.keyCode === 13 || event.keyCode === 32) {
checkbox.checked === true ? checkbox.checked = false : checkbox.checked = true;
togglePathCheckbox(event.target.control);
}
}

function hideshow() {
const button = document.getElementById("main_button");
const menu = document.getElementById("main");
Expand Down

0 comments on commit b1a7e70

Please sign in to comment.