forked from projects/fipamo
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:
parent
2f0b83b492
commit
a687b50452
4 changed files with 20 additions and 10 deletions
|
@ -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>
|
||||
|
|
|
@ -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
|
@ -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) {
|
||||
|
|
Loading…
Reference in a new issue