From 6c44f5844896dacda9affdcb5f1203777c511ba7 Mon Sep 17 00:00:00 2001
From: ro <ro@h-i.works>
Date: Tue, 13 May 2025 10:58:21 -0600
Subject: [PATCH] accessbility improvements for issue #109

the bold, italic and strikethrough options now function as toggles for
formatting options and removes them rather than just replacing text

the options buttons under the meta ui now communicate their status
through use of the 'aria pressed' attribute so they can be properly read
by assitive technologies like screen readers
---
 .../dash/app/controllers/PageEditor.js        | 10 +++-
 .../assets/scripts/dash/app/ui/TextEditor.js  | 56 +++++++++++++------
 resources/views/includes/options.blade.php    |  6 +-
 3 files changed, 50 insertions(+), 22 deletions(-)

diff --git a/public/assets/scripts/dash/app/controllers/PageEditor.js b/public/assets/scripts/dash/app/controllers/PageEditor.js
index 9364d37..914ea42 100644
--- a/public/assets/scripts/dash/app/controllers/PageEditor.js
+++ b/public/assets/scripts/dash/app/controllers/PageEditor.js
@@ -167,9 +167,13 @@ export default class PostEditor {
 		}
 		if (currentOption != null) {
 			let active = currentOption.getAttribute('data-active');
-			active == 'false'
-				? currentOption.setAttribute('data-active', 'true')
-				: currentOption.setAttribute('data-active', 'false');
+			if (active == 'false') {
+				currentOption.setAttribute('data-active', 'true');
+				currentOption.setAttribute('aria-pressed', 'true');
+			} else {
+				currentOption.setAttribute('data-active', 'false');
+				currentOption.setAttribute('aria-pressed', 'false');
+			}
 		}
 	}
 	handleEditorOptions(e) {
diff --git a/public/assets/scripts/dash/app/ui/TextEditor.js b/public/assets/scripts/dash/app/ui/TextEditor.js
index 0971315..23c24b8 100644
--- a/public/assets/scripts/dash/app/ui/TextEditor.js
+++ b/public/assets/scripts/dash/app/ui/TextEditor.js
@@ -124,30 +124,54 @@ class TextEditor extends EventEmitter {
 		let end = this.textEditor.selectionEnd;
 
 		let selectedText = this.textEditor.value.substring(start, end);
+		let formatText = this.textEditor.value.substring(start - 1, end + 1);
 		let insert = '';
 		switch (e.target.id) {
 			case 'edit-bold':
-				insert = '**' + selectedText + '**';
-				this.textEditor.value =
-					this.textEditor.value.substring(0, start) +
-					insert +
-					this.textEditor.value.substring(end, len);
+				if (formatText.includes('*')) {
+					insert = selectedText;
+					this.textEditor.value =
+						this.textEditor.value.substring(0, start - 2) +
+						insert +
+						this.textEditor.value.substring(end + 2, len);
+				} else {
+					insert = '**' + selectedText + '**';
+					this.textEditor.value =
+						this.textEditor.value.substring(0, start) +
+						insert +
+						this.textEditor.value.substring(end, len);
+				}
 
 				break;
 			case 'edit-italic':
-				insert = '*' + selectedText + '*';
-				//console.log(this.textEditor);
-				this.textEditor.value =
-					this.textEditor.value.substring(0, start) +
-					insert +
-					this.textEditor.value.substring(end, len);
+				if (formatText.includes('*')) {
+					insert = selectedText;
+					this.textEditor.value =
+						this.textEditor.value.substring(0, start - 1) +
+						insert +
+						this.textEditor.value.substring(end + 1, len);
+				} else {
+					insert = '*' + selectedText + '*';
+					this.textEditor.value =
+						this.textEditor.value.substring(0, start) +
+						insert +
+						this.textEditor.value.substring(end, len);
+				}
 				break;
 			case 'edit-strikethrough':
-				insert = '~~' + selectedText + '~~';
-				this.textEditor.value =
-					this.textEditor.value.substring(0, start) +
-					insert +
-					this.textEditor.value.substring(end, len);
+				if (formatText.includes('~')) {
+					insert = selectedText;
+					this.textEditor.value =
+						this.textEditor.value.substring(0, start - 2) +
+						insert +
+						this.textEditor.value.substring(end + 2, len);
+				} else {
+					insert = '~~' + selectedText + '~~';
+					this.textEditor.value =
+						this.textEditor.value.substring(0, start) +
+						insert +
+						this.textEditor.value.substring(end, len);
+				}
 				break;
 			case 'edit-header1':
 				insert = '# ' + selectedText + '\n';
diff --git a/resources/views/includes/options.blade.php b/resources/views/includes/options.blade.php
index 067ccc3..0aaeb43 100644
--- a/resources/views/includes/options.blade.php
+++ b/resources/views/includes/options.blade.php
@@ -30,15 +30,15 @@ if(isset($page['uuid']))
 ?>
 
 <div role="toolbar" aria-label="page options" aria-orientation="horizontal">
-    <button id="option-menu-pin" class="option-inactive post-option-btn" data-active="{{$menu}}" title='Pin to Menu' aria-label="pin to menu">
+    <button id="option-menu-pin" class="option-inactive post-option-btn" aria-pressed="{{$menu}}" data-active="{{$menu}}" title='Pin to Menu' aria-label="pin to menu">
         <svg id="option-menu-pin" class="icon">
             <use id="option-menu-pin" xlink:href="/assets/images/global/sprite.svg#entypo-pin" />
         </svg>
-    </button><button id="option-feature" class="option-inactive post-option-btn" data-active="{{$featured}}" title='Feature' aria-label="feature post toggle">
+    </button><button id="option-feature" class="option-inactive post-option-btn" aria-pressed="{{$featured}}" data-active="{{$featured}}" title='Feature' aria-label="feature post toggle">
         <svg id="option-feature-icon" class="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' aria-label="publish post toggle">
+    </button><button id="option-published" class="option-inactive post-option-btn" aria-pressed="{{$published}}" data-active="{{$published}}" title='Published' aria-label="publish post toggle">
         <svg id="option-published-icon" class="icon">
             <use id="option-published-icon" xlink:href="/assets/images/global/sprite.svg#entypo-globe" />
         </svg>