Fix for #109, add toggle state to buttons

Adds aria-pressed to the “Options” toggle buttons; this communicates their state to assistive technologies.
This commit is contained in:
Zoë Bijl 2023-07-25 12:51:26 +02:00
parent 2f0b83b492
commit a687b50452
4 changed files with 20 additions and 10 deletions

View file

@ -16,17 +16,17 @@
{% set published = 'false' %}
{% endif %}
<br>
<button id="option-menu-pin" class="option-inactive post-option-btn" data-active="{{ menu }}" title='Pin to Menu'>
<button id="option-menu-pin" class="option-inactive post-option-btn" aria-pressed="{{ menu }}" data-active="{{ menu }}" title='Pin to Menu'>
<svg id="option-page-icon" role="icon">
<use id="option-page-icon" xlink:href="/assets/images/global/sprite.svg#entypo-add-to-list"/>
</svg>
</button>
<button id="option-feature" class="option-inactive post-option-btn" data-active="{{ featured }}" title='Feature'>
<button id="option-feature" class="option-inactive post-option-btn" aria-pressed="{{ featured }}" data-active="{{ featured }}" title='Feature'>
<svg id="option-feature-icon" role="icon">
<use id="option-feature-icon" xlink:href="/assets/images/global/sprite.svg#entypo-star"/>
</svg>
</button>
<button id="option-published" class="option-inactive post-option-btn" data-active="{{ published }}" title='Published'>
<button id="option-published" class="option-inactive post-option-btn" aria-pressed="{{ published }}" data-active="{{ published }}" title='Published'>
<svg id="option-published-icon" role="icon">
<use id="option-published-icon" xlink:href="/assets/images/global/sprite.svg#entypo-globe"/>
</svg>

View file

@ -6690,8 +6690,13 @@ class $371d2518d50c1748$export$2e2bcd8739ae039 {
break;
}
if (currentOption != null) {
let active = currentOption.getAttribute("data-active");
active == "false" ? currentOption.setAttribute("data-active", "true") : currentOption.setAttribute("data-active", "false");
let active = currentOption.getAttribute("aria-pressed");
currentOption.setAttribute("data-active", "false");
currentOption.setAttribute("aria-pressed", "false");
if (active == "false") {
currentOption.setAttribute("data-active", "true");
currentOption.setAttribute("aria-pressed", "true");
}
}
}
handleEditorOptions(e) {

File diff suppressed because one or more lines are too long

View file

@ -127,10 +127,15 @@ export default class PostEditor {
break;
}
if (currentOption != null) {
let active = currentOption.getAttribute('data-active');
active == 'false'
? currentOption.setAttribute('data-active', 'true')
: currentOption.setAttribute('data-active', 'false');
let active = currentOption.getAttribute('aria-pressed');
currentOption.setAttribute('data-active', 'false');
currentOption.setAttribute('aria-pressed', 'false');
if (active == 'false') {
currentOption.setAttribute('data-active', 'true');
currentOption.setAttribute('aria-pressed', 'true');
}
}
}
handleEditorOptions(e) {