WIP: Fix for #109, add toggle state to buttons #112

Draft
Moiety wants to merge 1 commits from toggle-buttons-#109 into develop

@ -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>

@ -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) {

File diff suppressed because one or more lines are too long

@ -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');
}
Moiety commented 1 year ago
Review

We originally intended to change all data-active to aria-pressed because technically the action is already correct, just on the wrong attribute. We couldn’t quite figure out the way the CSS was generated and decided to keep it simple. Feel free to change.

We originally intended to change all `data-active` to `aria-pressed` because technically the action is already correct, just on the wrong attribute. We couldn’t quite figure out the way the CSS was generated and decided to keep it simple. Feel free to change.
} }
} }
handleEditorOptions(e) { handleEditorOptions(e) {

Loading…
Cancel
Save