Skip to content

Improve accessibility for help buttons in server UI #117

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
daiverd wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Improve accessibility for help buttons in server UI #117

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5cf472d
Add accessibility improvements to server UI templates
Mar 27, 2026
854f663
update aria-expanded to true on 3rd panel
Mar 27, 2026
2b95974
test container on first help button
Mar 28, 2026
514ef27
Refactor help buttons with Jinja macro for accessibility
Mar 29, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
104 changes: 25 additions & 79 deletions touchterrain/server/templates/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
{% from "macros.html" import help_popover %}
<!DOCTYPE html>
<html>
<head>
Expand Down Expand Up @@ -58,17 +59,13 @@
<body>
<div class="container-fluid" id="outermost_div">
<div class="page-header text-truncate" style="min-width: 635px;">
<h4 class="text-truncate">
<h1 class="text-truncate">
<!-- TouchTerrain is currently NOT working, sorry! &nbsp -->
TouchTerrain: Easily Create 3D-Printable Terrain Models &nbsp
TouchTerrain: Easily Create 3D-Printable Terrain Models</h1>
<div class="text-truncate float-right">
<a href="https://touchterrain.blogspot.com/" target="_blank"> Blog - what's new in version 3.6?</a>
<button type="button" id="Whats_new__popover" class="btn btn-outline-info btn-sm"
data-bs-container="body" data-bs-toggle="popover" data-bs-placement="auto">
<i class="fas fa-question"></i>
</button>
</div>
</h4>
{{ help_popover(id="Whats_new__popover") }}
</div>
</div>
<div class="row">
<div class="col-sm-8">
Expand All @@ -89,23 +86,17 @@ <h4 class="text-truncate">
id="reloadform" style="margin-bottom: 0px;">
<div class="card">
<div class="card-header">
<a class="card-link" data-toggle="collapse" href="#terrain_settings_panel">
<a class="card-link" data-toggle="collapse" href="#terrain_settings_panel" aria-expanded="true">
Terrain Settings:
</a>
<button type="button" id="terrain_settings_popover" class="btn btn-outline-info btn-sm"
data-bs-container="body" data-bs-toggle="popover" data-bs-placement="auto">
<i class="fas fa-question"></i>
</button>
{{ help_popover('terrain_settings_popover') }}
</div>
<div id="terrain_settings_panel" class="collapse show">
<div class="card-body">
<div class="row text-truncate">
<div class="col-sm-6" form-inline>
<label for="DEM_name">Elevation Data source:</label>
<button type="button" id="elevation_data_source_popover" class="btn btn-outline-info btn-sm"
data-bs-container="body" data-bs-toggle="popover" data-bs-placement="auto">
<i class="fas fa-question"></i>
</button>
{{ help_popover('elevation_data_source_popover') }}
<a href="https://developers.google.com/earth-engine/datasets/" id="DEM_link" target="_blank">(DEM Info)</a>
</div>
<div class="col-sm-6 form-inline">
Expand Down Expand Up @@ -145,10 +136,7 @@ <h4 class="text-truncate">
<option value="90"></option>
<option value="100"></option>
</datalist>
<button type="button" id="transparency_popover" class="btn btn-outline-info btn-sm"
data-bs-container="body" data-bs-toggle="popover" data-bs-placement="auto">
<i class="fas fa-question"></i>
</button>
{{ help_popover('transparency_popover') }}
</div>
</div>
<div class="col-sm-5">
Expand All @@ -157,10 +145,7 @@ <h4 class="text-truncate">
<input type="text" id="gamma2" class="form-control form-control-sm" maxlength="5" size="2" value="1.0"
style="max-width: 40px;"
onkeydown="if(event.keyCode == 13){updateGamma(this.value); submit_for_reload('GET')};">
<button type="button" id="gamma_popover" class="btn btn-outline-info btn-sm"
data-bs-container="body" data-bs-toggle="popover" data-bs-placement="auto">
<i class="fas fa-question"></i>
</button>
{{ help_popover('gamma_popover') }}
</div>
</div>
</div>
Expand All @@ -169,10 +154,7 @@ <h4 class="text-truncate">
<div class="col-sm-6">
<div class="form-horizontal form-group">
<label for="hsazi2">Sun direction:</label>
<button type="button" id="sun_direction_popover" class="btn btn-outline-info btn-sm"
data-bs-container="body" data-bs-toggle="popover" data-bs-placement="auto">
<i class="fas fa-question"></i>
</button>
{{ help_popover('sun_direction_popover') }}
<select class="form-control custom-select-sm"
id="hsazi2" name="hsazi" onchange="submit_for_reload('GET');"
>
Expand All @@ -188,10 +170,7 @@ <h4 class="text-truncate">
<div class="col-sm-6">
<div class="form-horizontal form-group">
<label for="hselev2">Sun angle:</label>
<button type="button" id="sun_angle_popover" class="btn btn-outline-info btn-sm"
data-bs-container="body" data-bs-toggle="popover" data-bs-placement="auto">
<i class="fas fa-question"></i>
</button>
{{ help_popover('sun_angle_popover') }}
<select class="form-control custom-select-sm"
id="hselev2" name="hselev" onchange="updateHillshadeElevation(this.value); submit_for_reload('GET');">
<option value="55">steep (55 degr.)</option>
Expand Down Expand Up @@ -239,13 +218,10 @@ <h4 class="text-truncate">

<div class="card">
<div class="card-header">
<a class="card-link" data-toggle="collapse" href="#area_box_panel">
<a class="card-link" data-toggle="collapse" href="#area_box_panel" aria-expanded="false">
Area Selection Box:
</a>
<button type="button" id="area_selection_box_popover" class="btn btn-outline-info btn-sm"
data-bs-container="body" data-bs-toggle="popover" data-bs-placement="auto">
<i class="fas fa-question"></i>
</button>
{{ help_popover('area_selection_box_popover') }}
<input id="recenter-box-button" type="button" class="btn btn-primary float-right"
data-bs-container="body" data-bs-toggle="popover" data-bs-placement="auto"
onclick="center_rectangle()"
Expand Down Expand Up @@ -292,15 +268,9 @@ <h4 class="text-truncate">
<div class="card">
<div class="card-header">
<div class="panel-title">
<a class="card-link" data-toggle="collapse" href="#printOptionPanel">3D Printer Options:</a>
<button type="button" id="3D_printer_options_popover" class="btn btn-outline-info btn-sm"
data-bs-container="body" data-bs-toggle="popover" data-bs-placement="auto">
<i class="fas fa-question"></i>
</button>
<button type="button" id="3D_printer_CNC_options_popover" class="btn btn-outline-secondary btn-sm"
data-bs-container="body" data-bs-toggle="popover" data-bs-placement="auto">
CNC<i class="fas fa-question"></i>
</button>
<a class="card-link" data-toggle="collapse" href="#printOptionPanel" aria-expanded="true">3D Printer Options:</a>
{{ help_popover('3D_printer_options_popover') }}
{{ help_popover('3D_printer_CNC_options_popover', btn_class='btn btn-outline-secondary btn-sm', btn_text='CNC<i class="fas fa-question"></i>') }}
</div>
</div>
<div id="printOptionPanel" class="collapse show">
Expand Down Expand Up @@ -349,10 +319,7 @@ <h4 class="text-truncate">
<label for="options_tile_width"> &nbsp Width, &nbsp &nbsp </label>
<b id="options_tile_height"></b>
<label for="options_tile_width"> &nbsp Height</label>
<button type="button" id="tile_width_popover" class="btn btn-outline-info btn-sm"
data-bs-container="body" data-bs-toggle="popover" data-bs-placement="auto">
<i class="fas fa-question"></i>
</button>
{{ help_popover('tile_width_popover') }}
</div>
</div>

Expand All @@ -375,10 +342,7 @@ <h4 class="text-truncate">
<option value="1.0">1.0 mm</option>
</select>
<label for="options_print_resolution"> &nbsp Nozzle diameter</label>
<button type="button" id="print_resolution_popover" class="btn btn-outline-info btn-sm"
data-bs-container="body" data-bs-toggle="popover" data-bs-placement="auto">
<i class="fas fa-question"></i>
</button>
{{ help_popover('print_resolution_popover') }}
</div>
</div>

Expand Down Expand Up @@ -412,21 +376,15 @@ <h4 class="text-truncate">
</select>

<label for="options_numTiles_y"> &nbsp Tiles to print (X by Y)</label>
<button type="button" id="tile_config_popover" class="btn btn-outline-info btn-sm"
data-bs-container="body" data-bs-toggle="popover" data-bs-placement="auto">
<i class="fas fa-question"></i>
</button>
{{ help_popover('tile_config_popover') }}
</div>
</div>

<!-- Approximate DEM resolution given box and tile parameters -->
<div class="form-inline text-truncate">
<div class="form-group">
<label for="DEMresolution">Effective DEM resolution:</label>
<button type="button" id="effective_resolution_popover" class="btn btn-outline-info btn-sm"
data-bs-container="body" data-bs-toggle="popover" data-bs-placement="auto">
<i class="fas fa-question"></i>
</button>
{{ help_popover('effective_resolution_popover') }}
<input type="text" id="DEMresolution" class="form-control form-control-sm"
name="DEMresolution" maxlength="5" size="3" value="NULL" readonly>
m, &nbsp (source DEM is:&nbsp <b id="source_resolution"></b>)
Expand All @@ -451,10 +409,7 @@ <h4 class="text-truncate">
<option value="5">50 mm</option>
</select>
<label for="options_base_thickness"> &nbsp Model Base thickness</label>
<button type="button" id="base_thickness_popover" class="btn btn-outline-info btn-sm"
data-bs-container="body" data-bs-toggle="popover" data-bs-placement="auto">
<i class="fas fa-question"></i>
</button>
{{ help_popover('base_thickness_popover') }}
</div>
</div>

Expand Down Expand Up @@ -489,10 +444,7 @@ <h4 class="text-truncate">
<option value="100">x 100</option>
</select>
<label for="options_z_scale"> &nbsp Vertical Exaggeration (Z-scale)</label>
<button type="button" id="zscale_popover" class="btn btn-outline-info btn-sm"
data-bs-container="body" data-bs-toggle="popover" data-bs-placement="auto">
<i class="fas fa-question"></i>
</button>
{{ help_popover('zscale_popover') }}
</div>
</div>

Expand All @@ -506,10 +458,7 @@ <h4 class="text-truncate">
<option value="GeoTiff"> GeoTiff</option>
</select>
<label for="options_fileformat"> &nbsp File format </label>
<button type="button" id="fileformat_popover" class="btn btn-outline-info btn-sm"
data-bs-container="body" data-bs-toggle="popover" data-bs-placement="auto">
<i class="fas fa-question"></i>
</button>
{{ help_popover('fileformat_popover') }}
</div>
</div>

Expand All @@ -518,10 +467,7 @@ <h4 class="text-truncate">
<input class="form-control" size="80" type="text" placeholder="Manual settings:"
id="options_manual" value="" name="manual">
<div class="input-group-append">
<button type="button" id="manual_settings_popover" class="btn btn-outline-info btn-sm"
data-bs-container="body" data-bs-toggle="popover" data-bs-placement="auto">
<i class="fas fa-question"></i>
</button>
{{ help_popover('manual_settings_popover') }}
</div>
</div>
</div>
Expand Down
7 changes: 6 additions & 1 deletion touchterrain/server/templates/intro.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,12 @@
{% endif %}
<form id="recaptcha-form" method="POST" action="/">
<input type="hidden" id="g-recaptcha-response" name="g-recaptcha-response">
<img src="{{ url_for('static', filename='world.jpg') }}" alt="Click to continue" style="cursor:pointer; width:100%;" onclick="onImageClick(event)">
<button
onclick="onImageClick(event)"
class="p-0 border-0 bg-transparent d-block w-100"
style="cursor:pointer;">
<img src="{{ url_for('static', filename='world.jpg') }}" alt="Click to continue" class="img-fluid d-block">
</button>
</form>
</body>
</html>
35 changes: 35 additions & 0 deletions touchterrain/server/templates/macros.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
{# Reusable Jinja macros for TouchTerrain UI components #}

{#
Help Popover - Button for Bootstrap popover with content defined in JS

Parameters:
id - Unique identifier, must match JS popover init (required)
btn_class - Button CSS classes (default: 'btn btn-outline-info btn-sm')
btn_text - Button inner HTML (default: question mark icon)
placement - Popover placement: auto, top, bottom, left, right (default: 'auto')
trigger - Popover trigger: 'click hover', 'click', 'hover', 'focus' (default: 'click hover')
delay_show - Delay before showing in ms (default: 500)
delay_hide - Delay before hiding in ms (default: 0)

Usage:
{{ help_popover('my_popover') }}
{{ help_popover('custom', placement='left', delay_show=0) }}
{{ help_popover('cnc', btn_class='btn btn-outline-secondary btn-sm', btn_text='CNC <i class="fas fa-question" role="img" alt="Help"></i>') }}
#}
{% macro help_popover(id, btn_class='btn btn-outline-info btn-sm', btn_text='<i class="fas fa-question" role="img" aria-label="Help"></i>', placement='auto', trigger='click hover', delay_show=500, delay_hide=0) %}
<button type="button"
id="{{ id }}"
class="{{ btn_class }} help-popover"
aria-expanded="false"
aria-controls="{{ id }}-content"
data-toggle="popover"
data-placement="{{ placement }}"
data-trigger="{{ trigger }}"
data-delay='{"show": {{ delay_show }}, "hide": {{ delay_hide }}}'
data-container="#{{ id }}-content"
data-html="true">
{{ btn_text | safe }}
</button>
<div id="{{ id }}-content"></div>
{% endmacro %}
20 changes: 18 additions & 2 deletions touchterrain/server/templates/touchterrain.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,7 +144,13 @@ window.onload = function () {
});
*/

eemap = create_overlay(MAPID, map); // (global) hillshade overlay from google earth engine
// Create hillshade overlay from Earth Engine (if available)
if (MAPID && MAPID !== "") {
eemap = create_overlay(MAPID, map); // (global) hillshade overlay from google earth engine
} else {
eemap = null; // EE not available, no hillshade overlay
console.log("Earth Engine not available - hillshade overlay disabled");
}
init_print_options(); //update all print option values in the GUI to what was inlined by jinja
update_options_hidden(); // also store values in hidden ids
SetDEM_name(); // sets DEM_name pulldown to what was inlined by jinja
Expand Down Expand Up @@ -572,6 +578,14 @@ window.onload = function () {
placement: 'auto',
delay: { "show": 2000, "hide": 0 },
});

// Accessibility: update aria attributes on popover show/hide
$('.help-popover').on('shown.bs.popover', function() {
$(this).attr('aria-expanded', 'true');
$(this).attr('aria-describedby', '');
}).on('hidden.bs.popover', function() {
$(this).attr('aria-expanded', 'false');
});
}; // end of onload()


Expand Down Expand Up @@ -864,7 +878,9 @@ function SetDEM_name(){
// set opacity of hillshade as inverse of transparency given
function updateTransparency(transparency_pct) {
let op = 1.0 - transparency_pct / 100.0 // opacity
map.overlayMapTypes.getAt(0).setOpacity(op)
if (map.overlayMapTypes.getLength() > 0) {
map.overlayMapTypes.getAt(0).setOpacity(op)
}
document.getElementById('hillshade_transparency_slider').value=transparency_pct;
document.getElementById('transp').value=transparency_pct; // id in hidden reload 1
document.getElementById('transp3').value=transparency_pct; // id in hidden reload 2
Expand Down