a11y-outline

commit

2b53aaa4c5af473c2c7ff42af22a13fd798a332b

parent

88c7c32f74727c6daa632b314c6211c33647101c

Author

Tobias Bengfort <tobias.bengfort@posteo.de>

Date

2022-10-10 18:57

add explicit close button

Diffstat

2 files changed, 29 insertions, 4 deletions

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

@@ -104,6 +104,9 @@ var updateVisiblePane = function(select, dialog) {
  104   104 var quickNav = function() {
  105   105 	var dialog = createDialog();
  106   106 
   -1   107 	var header = document.createElement('header');
   -1   108 	dialog.appendChild(header);
   -1   109 
  107   110 	var select = document.createElement('select');
  108   111 	select.innerHTML =
  109   112 		'<option value="landmark">Landmarks</option>' +
@@ -112,7 +115,17 @@ var quickNav = function() {
  112   115 	select.addEventListener('change', function(event) {
  113   116 		updateVisiblePane(select, dialog);
  114   117 	});
  115    -1 	dialog.appendChild(select);
   -1   118 	select.autofocus = true;
   -1   119 	header.appendChild(select);
   -1   120 
   -1   121 	var close = document.createElement('button');
   -1   122 	close.addEventListener('click', () => dialog.close());
   -1   123 	close.textContent = '✕';
   -1   124 	close.title = 'Close';
   -1   125 	close.setAttribute('aria-label', 'Close');
   -1   126 	close.className = 'close';
   -1   127 	close.tabIndex = -1;
   -1   128 	header.appendChild(close);
  116   129 
  117   130 	var style = document.createElement('link');
  118   131 	style.rel = 'stylesheet';

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

@@ -6,6 +6,7 @@ $color-tint: #eee;
    6     6 
    7     7 %button-base {
    8     8 	font-size: inherit;
   -1     9 	line-height: 1.2;
    9    10 	color: inherit;
   10    11 	padding: 0.5em;
   11    12 	background-color: $color-tint;
@@ -32,11 +33,22 @@ $color-tint: #eee;
   32    33 	border-radius: 0.3em;
   33    34 	box-shadow: 0 0 0.5em rgba(0,0,0,0.3);
   34    35 
   35    -1 	select {
   -1    36 	header {
   -1    37 		display: flex;
   -1    38 		gap: 0.5em;
   -1    39 		margin: 0 0 1em;
   -1    40 	}
   -1    41 
   -1    42 	.close {
   36    43 		@extend %button-base;
   -1    44 		box-sizing: content-box;
   -1    45 		min-width: 1.2em;
   -1    46 		text-align: center;
   -1    47 	}
   37    48 
   38    -1 		width: 100%;
   39    -1 		margin: 0 0 1em;
   -1    49 	select {
   -1    50 		@extend %button-base;
   -1    51 		flex-grow: 1;
   40    52 	}
   41    53 
   42    54 	ul {