Fix for #109, add toggle state to buttons

Adds aria-pressed to the “Options” toggle buttons; this communicates their state to assistive technologies.

brain/views/dash/partials/options.twig

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

public/assets/scripts/dash.js

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

src/com/controllers/PageEditor.js

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