projects/fipamo
1
0
Fork 1
Code Issues 8 Pull requests Projects 1 Releases 23 Wiki Activity

Fix for #109, add toggle state to buttons

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

6
brain/views/dash/partials/options.twig
View file

@ -16,17 +16,17 @@
{% set published = 'false' %} {% set published = 'false' %}
{% endif %} {% endif %}
<br> <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"> <svg id="option-page-icon" role="icon">
<use id="option-page-icon" xlink:href="/assets/images/global/sprite.svg#entypo-add-to-list"/> <use id="option-page-icon" xlink:href="/assets/images/global/sprite.svg#entypo-add-to-list"/>
</svg> </svg>
</button> </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"> <svg id="option-feature-icon" role="icon">
<use id="option-feature-icon" xlink:href="/assets/images/global/sprite.svg#entypo-star"/> <use id="option-feature-icon" xlink:href="/assets/images/global/sprite.svg#entypo-star"/>
</svg> </svg>
</button> </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"> <svg id="option-published-icon" role="icon">
<use id="option-published-icon" xlink:href="/assets/images/global/sprite.svg#entypo-globe"/> <use id="option-published-icon" xlink:href="/assets/images/global/sprite.svg#entypo-globe"/>
</svg> </svg>

9
public/assets/scripts/dash.js
View file

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

2
public/assets/scripts/dash.js.map
View file

File diff suppressed because one or more lines are too long

13
src/com/controllers/PageEditor.js
View file

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