projects/fipamo
projects/fipamo
1
0
Fork 0
Code Issues 4 Pull requests Projects Releases 24 Packages Wiki Activity Actions

accessbility improvements for issue #109

Browse source 
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
This commit is contained in:
RXP 2025-05-13 10:58:21 -06:00
parent 714485c6a6
commit 6c44f58448
Signed by: ro
GPG key ID: 976711B5057688B7
3 changed files with 50 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
public/assets/scripts/dash/app/controllers/PageEditor.js
View file

@ -167,9 +167,13 @@ export default class PostEditor {
} }
if (currentOption != null) { if (currentOption != null) {
let active = currentOption.getAttribute('data-active'); let active = currentOption.getAttribute('data-active');
active == 'false' if (active == 'false') {
? currentOption.setAttribute('data-active', 'true') currentOption.setAttribute('data-active', 'true');
: currentOption.setAttribute('data-active', 'false'); currentOption.setAttribute('aria-pressed', 'true');
} else {
currentOption.setAttribute('data-active', 'false');
currentOption.setAttribute('aria-pressed', 'false');
}
} }
} }
handleEditorOptions(e) { handleEditorOptions(e) {

56
public/assets/scripts/dash/app/ui/TextEditor.js
View file

@ -124,30 +124,54 @@ class TextEditor extends EventEmitter {
let end = this.textEditor.selectionEnd; let end = this.textEditor.selectionEnd;
let selectedText = this.textEditor.value.substring(start, end); let selectedText = this.textEditor.value.substring(start, end);
let formatText = this.textEditor.value.substring(start - 1, end + 1);
let insert = ''; let insert = '';
switch (e.target.id) { switch (e.target.id) {
case 'edit-bold': case 'edit-bold':
insert = '**' + selectedText + '**'; if (formatText.includes('*')) {
this.textEditor.value = insert = selectedText;
this.textEditor.value.substring(0, start) + this.textEditor.value =
insert + this.textEditor.value.substring(0, start - 2) +
this.textEditor.value.substring(end, len); 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; break;
case 'edit-italic': case 'edit-italic':
insert = '*' + selectedText + '*'; if (formatText.includes('*')) {
//console.log(this.textEditor); insert = selectedText;
this.textEditor.value = this.textEditor.value =
this.textEditor.value.substring(0, start) + this.textEditor.value.substring(0, start - 1) +
insert + insert +
this.textEditor.value.substring(end, len); 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; break;
case 'edit-strikethrough': case 'edit-strikethrough':
insert = '~~' + selectedText + '~~'; if (formatText.includes('~')) {
this.textEditor.value = insert = selectedText;
this.textEditor.value.substring(0, start) + this.textEditor.value =
insert + this.textEditor.value.substring(0, start - 2) +
this.textEditor.value.substring(end, len); 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; break;
case 'edit-header1': case 'edit-header1':
insert = '# ' + selectedText + '\n'; insert = '# ' + selectedText + '\n';

6
resources/views/includes/options.blade.php
View file

@ -30,15 +30,15 @@ if(isset($page['uuid']))
?> ?>
<div role="toolbar" aria-label="page options" aria-orientation="horizontal"> <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"> <svg id="option-menu-pin" class="icon">
<use id="option-menu-pin" xlink:href="/assets/images/global/sprite.svg#entypo-pin" /> <use id="option-menu-pin" xlink:href="/assets/images/global/sprite.svg#entypo-pin" />
</svg> </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"> <svg id="option-feature-icon" class="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 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"> <svg id="option-published-icon" class="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>