a11y-outline

commit

a5f10d5d253b497545ed81e6ee0ae9646bcca42f

parent

0884300434ab1075fa09007b6a28e722d9113005

Author

Tobias Bengfort <tobias.bengfort@posteo.de>

Date

2022-10-11 06:43

highlight target on focus/hover

Diffstat

3 files changed, 51 insertions, 2 deletions

diff --git a/outline.js b/outline.js

@@ -16,11 +16,21 @@ var focus = function(el) {
   16    16 	}
   17    17 };
   18    18 
   -1    19 var setTarget = function(target) {
   -1    20 	document.querySelectorAll('.a11y-outline-target').forEach(el => {
   -1    21 		el.classList.remove('a11y-outline-target');
   -1    22 	});
   -1    23 	if (target) {
   -1    24 		target.classList.add('a11y-outline-target');
   -1    25 	}
   -1    26 };
   -1    27 
   19    28 var createDialog = function() {
   20    29 	var dialog = document.createElement('dialog');
   21    30 	dialog.id = DIALOG_ID;
   22    31 	dialog.addEventListener('close', function() {
   23    32 		dialog.remove();
   -1    33 		setTarget(null);
   24    34 	});
   25    35 	document.body.appendChild(dialog);
   26    36 	return dialog;
@@ -82,11 +92,39 @@ var renderTree = function(role, dialog) {
   82    92 
   83    93 			var href = event.target.getAttribute('href');
   84    94 			var i = parseInt(href.substr(1), 10);
   85    -1 			var el = matches[i];
   -1    95 			var target = matches[i];
   -1    96 
   -1    97 			focus(target);
   -1    98 		}
   -1    99 	});
   86   100 
   87    -1 			focus(el);
   -1   101 	var getTarget = function(a) {
   -1   102 		var href = a.getAttribute('href');
   -1   103 		var i = parseInt(href.substr(1), 10);
   -1   104 		return matches[i];
   -1   105 	};
   -1   106 
   -1   107 	var targetSelected = function() {
   -1   108 		var target = null;
   -1   109 
   -1   110 		if (ul === document.activeElement) {
   -1   111 			var selected = ul.querySelector('[aria-selected="true"] a');
   -1   112 			target = getTarget(selected);
   -1   113 		}
   -1   114 
   -1   115 		setTarget(target);
   -1   116 	};
   -1   117 
   -1   118 	ul.addEventListener('mouseover', event => {
   -1   119 		if (event.target.matches('a')) {
   -1   120 			var target = getTarget(event.target);
   -1   121 			setTarget(target);
   88   122 		}
   89   123 	});
   -1   124 	ul.addEventListener('mouseout', targetSelected);
   -1   125 	ul.addEventListener('focus', targetSelected);
   -1   126 	ul.addEventListener('select', targetSelected);
   -1   127 	ul.addEventListener('blur', targetSelected);
   90   128 
   91   129 	dialog.appendChild(ul);
   92   130 };

diff --git a/src/outline.scss b/src/outline.scss

@@ -8,6 +8,14 @@
    8     8 	border-radius: 0;
    9     9 }
   10    10 
   -1    11 .a11y-outline-target {
   -1    12 	outline: 5px solid #26c !important;
   -1    13 
   -1    14 	@media (prefers-color-scheme: dark) {
   -1    15 		outline-color: #3ae !important;
   -1    16 	}
   -1    17 }
   -1    18 
   11    19 #a11y-outline {
   12    20 	--color-bg: #fff;
   13    21 	--color-fg: #111;

diff --git a/treeview.js b/treeview.js

@@ -31,6 +31,9 @@ var select = function(item) {
   31    31 			old.setAttribute('aria-selected', false);
   32    32 		}
   33    33 		item.setAttribute('aria-selected', true);
   -1    34 
   -1    35 		var event = new CustomEvent('select', {bubbles: true});
   -1    36 		item.dispatchEvent(event);
   34    37 	}
   35    38 };
   36    39