I’ve been testing using both the tab key and my screen-reader’s built-in navigation short-cuts. Everything is still focus-able when I have tabindex set to -1, and taking it out produces no change at all as far as I can tell. The JavaScript code is all in the Story JavaScript section.
Unfortunately, I’m still considered to be a new user on this site, meaning I can’t upload my project. I don’t have easy access to anywhere else at the moment, so the best I can do is give you everything I have here:
My JavaScript:
config.passages.nobr = true;
$(document).on(":passagedisplay", function (ev) {
if (ev.passage.title == "Forest Map") {
setTileLabels();
$(".tile-name").hide();
$("div.fog-of-war a").prop("disabled", true);
$("div[role='gridcell']:not(.fog-of-war) a")
.on("mouseenter", showTileLabel)
.on("focus", showTileLabel)
.on("mouseleave", hideTileLabel)
.on("blur", hideTileLabel);
$("div.x-6.y-6 a").focus();
}
});
function setTileLabels() {
$("div[role='gridcell'] a").each(function () {
if ($(this).parent().hasClass("fog-of-war")) {
$(this).attr("aria-label", "Undiscovered");
}
else {
var x = parseInt($(this).parent().attr("data-x"));
var y = parseInt($(this).parent().attr("data-y"));
var t = parseInt($(this).parent().attr("data-ter"));
var tile = state.variables.Map[x][y];
$(this).attr("aria-label", tile.name + ", x:" + x +
", y:" + y);
}
});
}
function showTileLabel() {
$(this).siblings("span").show();
}
function hideTileLabel() {
$(this).siblings("span").hide();
}
My StoryInit passage:
<<set $DeepWater = {
"name" : "deep water",
"className" : "deep-water",
}>>
<<set $ShallowWater = {
"name" : "shallow water",
"className" : "shallow-water",
}>>
<<set $Forest = {
"name" : "forest",
"className" : "forest",
}>>
<<set $Meadow = {
"name" : "meadow",
"className" : "meadow",
}>>
<<set $TerrainByNumber = [
$DeepWater,
$ShallowWater,
$Forest,
$Meadow,
$Hill,
$ForestedHill,
$SteepHill,
$Mountain,
$Chasm,
]>>
<<set $MapMatrix = [
[0, 0, 1, 2, 2, 2, 2, 2, 1, 0, 0],
[0, 1, 2, 2, 2, 2, 2, 2, 2, 1, 0],
[1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1],
[2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
[2, 2, 2, 2, 2, 3, 2, 2, 2, 2, 2],
[2, 2, 2, 2, 3, 3, 3, 2, 2, 2, 2],
[2, 2, 2, 2, 2, 3, 2, 2, 2, 2, 2],
[2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
[1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1],
[0, 1, 2, 2, 2, 2, 2, 2, 2, 1, 0],
[0, 0, 1, 2, 2, 2, 2, 2, 1, 0, 0],
]>>
<<set $FogOfWarMap = [
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0],
[0, 0, 0, 1, 1, 1, 1, 1, 0, 0, 0],
[0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
]>>
<<set $StartingX = 6>>
<<set $StartingY = 6>>
<<set $Map = []>>
<<for _r, _row range $MapMatrix>>
<<set $Map[_r] = []>>
<<for _c, _cell range _row>>
<<set $Map[_r][_c] = clone($TerrainByNumber[$MapMatrix[_r][_c]])>>
<<if $FogOfWarMap[_r][_c] === 1>>
<<set $Map[_r][_c].discovered = true>>
<<else>>
<<set $Map[_r][_c].discovered = false>>
<</if>>
<</for>>
<</for>>
The passage where the map is drawn (same as above, but I’ll include it again):
<div id="map" role="grid">
<<for _y, _row range $Map>>
<div @data-row="_y" role="row">
<<for _x, _tile range _row>>
<<set _classes = _tile.className + " x-" + _x + " y-" + _y>>
<<if _tile.discovered>>
<div @class="_classes" @data-x="_x + ''" @data-y="_y + ''" @data-ter="$MapMatrix[_y][_x]" role="gridcell">
<<link " ">>
<</link>>
<span class="tile-name">
_tile.name
</span>
</div>
<<else>>
<div @class="_classes + ' fog-of-war'" @data-x="_x + ''" @data-y="_y + ''" @data-ter="$MapMatrix[_y][_x]" role="gridcell">
<<link " ">>
<</link>>
<span class="tile-name">
_tile.name
</span>
</div>
<</if>>
<</for>>
</div>
<</for>>
</div>
And my StoryStylesheet:
/* ==========
// Global Tags and Classes
// ========== */
* {
box-size: border-box;
}
#passages {
width: 95%;
margin: auto;
}
/* ==========
// Map Styles
// ========== */
#map {
display: grid;
width: 100%;
}
#map div[role='row'] {
width: 100%;
display: grid;
grid-template-columns: 4em 4em 4em 4em 4em 4em 4em 4em 4em 4em 4em;
justify-content: center;
}
#map div[role='gridcell'] {
position: relative;
width: 4em;
height: 3em;
border: 1px solid #eee;
overflow-x: visible;
}
#map a {
display: block;
width: 100%;
height: 100%;
}
#map span.tile-name {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 3;
text-align: center;
font-size: small;
background-color: black;
}
#map div.fog-of-war {
background-color: black;
}
div.fog-of-war * {
display: none;
}
/* ==========
// Terrain Styles
// ========== */
.deep-water:not(.fog-of-war) {
background-color: blue;
}
.shallow-water:not(.fog-of-war) {
background-color: lightblue;
}
.forest:not(.fog-of-war) {
background-color: forestgreen;
}
.meadow:not(.fog-of-war) {
background-color: lawngreen;
}
I’m sorry I can’t just send you the story itself, but these four bits are the only thing I have at present. (I didn’t want to move forward with the project until I knew I could make this part work).
