Skip to content

Commit 5bbfcef

Browse files
ds26gtejpolitz
ds26gte
authored and
jpolitz
committed
Added screenreader-only class.
Added focusCarousel field to editor, and method CPO.cycleFocus() which moves focus to prev/next element in the carousel. Function populateFocusCarousel() is used to initialize the carousel to the major regions on the IDE window when ready. Added keybindings F6 and Shift-F6 (cycle focus forward & backward), F7 (Run), F8 (Stop), F9 (Share/Publish), F11 (Insert). replContainer gets tabIndex=-1. displayResult() uses updateItems() to keep track of items in history, including results and errors. Each prompt/interaction is spoken as it's happening. Alt-n reports the interaction n prompts back (exception: Alt-0 is the 10th item). Left & Right arrows on current prompt input reads character following cursor. Helper procedures: say(), sayAndForget(), speakHistory(), speakChar(). Added aria-label for Publish button. Added aria-labels to logo and Run dropdown. speakChar() should say "space" for space character, instead of being mute. updateItems(): check for replTextOutput (in addition to replOutput). Generate aria-labels for images, numbers (rationals and non-), nothing, booleans, strings, and collection objects (e.g., lists). updateItems(): for errors, mention the offending snippet (input expression). Added comment for repl interaction history: items[] and updateItems() Interaction history is also set when clicking Run (= when loading Definitions window). (This should also erase previous history.) Voicing of current interaction moved to afterRun(). Recite parsing errors also (whether in int and def window). Recite roughnum as '<num>, roughly'. Errors from definitions window should have aria-hidden=true to avoid error being recited twice. Set aria-hidden=true for textarea, .output, #repl; to reduce noise. Better aria-labels for rational numbers: read solidus as 'over'. If output as decimal number, identify repeating digits if any. Rational-number toggle click event was not bound: fix. Repeating digits audio-enclosed in "with ... repeating". If immediately following decimal point, "with" dropped. Recite strings without the enclosing quotes. For non-errors, interaction history data consists only of relevant indices into the REPL DOM. This allows for history recitation to use the current form of past output. (E.g., rational-number output formats could have been toggled by user.) Check blocks with failing tests should have proper audio. Added subroutine outputText() to abstract recital of one program unit. Recite check-block's test results more relaxedly. Recitation for failing check-blocks improved. Added aria-text for table values. Added CSS for nav [ul [li]] and .lhs Added aria for opening page. Canonicalize HTML5 for editor page (makes for easier a11y). Add ids #bonniemenuli and #filemenuli for menubar list items containing the bonnie and the File menu, so submenu focusing can be triggered When menubar submenu is made visible, do not add it to end of <body>, as it ruins the tab order. When a submenu is clicked, so that it either becomes visible or not, change the tabIndex of the enclosed elements accordingly Addes submenuFocus() which keeps track of when user focus (not the same as JS focus) enters/leaves a submenu, and sets off concomitant tabIndex changes. Add CSS for rewritten, ARIA-enhanced, nested <ul>-based toolbar. Tool menubar rewritten to support ARIA navigation. Added JS/jQuery for navigating toolbar with arrows and escape. up/dn arrows in a submenu should wrap around on hitting the ends. Have tabindex=0 rove within the menu system as focus moves. - menu system should not respond to hover. - when traversing menubar horizontally, update element's aria-expanded, aria-hidden, .showmenu .focus and .blur handlers on focusable elements kept separate from arrow-traversal handlers. This allows any focus in/out (e.g., to outside regions) to be treated correctly. Add class .toptier to top-level menubar <li>s for easy JS/jQ manipulation. Top-tier navbar items react to mouse click just as if they received focus via arrowing (i.e., other submenus should be closed). On cycling focus to navbar region (F6), any key focuses first (or previously focused) item. Tab/esc cycle focus out. Any and only keys not handled by a focusable item are bubbled to navbar. Helper function switchTopMenuItem() moves focus within navbar, taking care to hide previous submenu and show new submenu when necessary. Moving to Run Dropdown tab does not automatically open Run Options submenu: click needed. (This submenu is too beta for easy access.) Left and right arrows on menubar wrap around the edges. Space on a submenu item is equivalent to clicking it (or pressing Enter). Ensure margin, padding =0 on navbar constituents. Change background-color when focusing .focusable element. Ensure right-flush elements on the menubar respond to arrows in the order visible to the user. updateItems: lastOutput could be nil for empty defn window. speakHistory: could be a load of empty defn window, in which case history item may not have anything to extract: say something appropriate. Remove additional borderline alert when hovering on a menubar item Add id for each top-tier <li> in toolbar. Top-tier <li>s in toolbar with submenus toggle submenu visibility on click. No need for #runDropdown click event. It's part of the general focusable element click protocol. When choosing something from the run dropdown, augment the hiding of the dropdown with corresponding aria-{expanded,hidden} updates. - "Connect to Google Drive" should retain focus after failure and give focus to Toolbar after success. - On entering Toolbar, Tab and Esc cycle-focus out. Any arrow key go to first available focusable item (which could have been what was in focus when leaving Toolbar last). - Be diligent about closing submenus when focus veers away for any reason, in particular clicks outside the Toolbar.
1 parent be87627 commit 5bbfcef

File tree

10 files changed

+1139
-127
lines changed

10 files changed

+1139
-127
lines changed

‎src/web/css/editor.css

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1266,6 +1266,11 @@ code div {
12661266
margin: 0;
12671267
}
12681268

1269+
#run-dropdown-content li {
1270+
background: #317BCF;
1271+
}
1272+
1273+
/*
12691274
.dropdown {
12701275
background: #317BCF;
12711276
padding-top: 12px;
@@ -1283,7 +1288,7 @@ code div {
12831288
top: 40px;
12841289
margin: 0;
12851290
width: 172px;
1286-
display: none;
1291+
display: none;
12871292
}
12881293
12891294
#run-dropdown-content li {
@@ -1307,6 +1312,7 @@ code div {
13071312
box-shadow: 0px -5px 10px 5px rgba(0, 0, 0, 0.3);
13081313
background:#0060CE;
13091314
}
1315+
*/
13101316

13111317
.module-info-hover {
13121318
width: 30em;
@@ -1928,3 +1934,11 @@ button.controller {
19281934
.hidden {
19291935
display: none
19301936
}
1937+
.screenreader-only {
1938+
position: absolute !important;
1939+
height: 1px;
1940+
width: 1px;
1941+
overflow: hidden;
1942+
clip: rect(1px 1px 1px 1px);
1943+
clip: rect(1px, 1px, 1px, 1px);
1944+
}

‎src/web/css/shared.css

Lines changed: 127 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -171,6 +171,7 @@ em {
171171
box-shadow: 0px 1px 2px rgba(0,0,0,0.6);
172172
}
173173

174+
/*
174175
#header div a {
175176
width: 100px;
176177
margin-top: 15px;
@@ -182,6 +183,102 @@ em {
182183
color: #111;
183184
font-family: sans-serif;
184185
}
186+
*/
187+
188+
nav {
189+
/* height: 100%; */
190+
padding: 0;
191+
margin: 0;
192+
}
193+
194+
/*
195+
nav:hover {
196+
border-left: thin solid red;
197+
}
198+
*/
199+
200+
nav ul a, nav ul button {
201+
/* width: 100px; */
202+
/* margin-top: 15px; */
203+
float: left;
204+
padding-right: 2em;
205+
}
206+
207+
nav a, nav button {
208+
color: #111;
209+
font-family: sans-serif;
210+
}
211+
212+
nav > ul {
213+
height: 100%;
214+
margin: 0;
215+
padding: 0;
216+
list-style-type: none;
217+
}
218+
219+
nav > ul > li {
220+
height: 100%;
221+
margin: 0;
222+
padding: 0;
223+
position: relative;
224+
/* border: thin solid green; */
225+
list-style-type: none;
226+
}
227+
228+
nav > ul > li ul {
229+
position: absolute;
230+
top: 2.5em;
231+
margin: 0;
232+
padding: 0;
233+
left: 0;
234+
aria-hidden: true;
235+
display: none;
236+
list-style-type: none;
237+
}
238+
239+
nav > ul > li:focus ul {
240+
aria-hidden: false;
241+
display: block;
242+
}
243+
244+
nav > ul ul > li {
245+
/* height: 20px; */
246+
float: none;
247+
position: static;
248+
margin: 0;
249+
padding: 0;
250+
/* border: thin solid blue; */
251+
overflow: hidden;
252+
list-style-type: none;
253+
}
254+
255+
ul[role="menu"] > li {
256+
padding: 0;
257+
}
258+
259+
nav > ul ul > li > div {
260+
margin: 0;
261+
padding: 0;
262+
/* border: thin solid cyan; */
263+
overflow: hidden;
264+
}
265+
266+
.menuitemtitle > button {
267+
padding-left: 1em;
268+
padding-right: 1em;
269+
}
270+
271+
.menuButton {
272+
overflow: hidden;
273+
margin: 0;
274+
padding: 0;
275+
}
276+
277+
nav > ul ul a, nav > ul ul button {
278+
float: none;
279+
display: block;
280+
overflow: hidden;
281+
}
185282

186283
#logo{
187284
height:100%;
@@ -192,6 +289,11 @@ em {
192289
width: 60px;
193290
}
194291

292+
li.lhs > div,
293+
li.rhs > div {
294+
float: none;
295+
}
296+
195297
.logo{
196298
height: 30px;
197299
width: 30px;
@@ -204,9 +306,15 @@ em {
204306
display: inline-block;
205307
height: 100%;
206308
vertical-align: top;
207-
float:left;
309+
float:left; /*latest*/
208310
}
209311

312+
/*
313+
.menu, .menuContents {
314+
float: none;
315+
}
316+
*/
317+
210318
#toolbar {
211319
position: fixed;
212320
z-index: 8000;
@@ -230,6 +338,7 @@ em {
230338
/* darker blue option #2a348b */
231339
background-color: rgba(0,0,0,0.3);
232340
border: none;
341+
border-right: thin solid black;
233342
border-radius: 0px;
234343
color: #fff;
235344
text-align: center;
@@ -256,6 +365,10 @@ em {
256365
box-shadow: none;
257366
}
258367

368+
.lhs {
369+
float: left;
370+
}
371+
259372
.rhs {
260373
float: right;
261374
}
@@ -337,3 +450,16 @@ code {
337450
top: -.15em;
338451
vertical-align: top;
339452
}
453+
454+
.showmenu {
455+
display: block;
456+
}
457+
458+
.focusable {
459+
margin: 0;
460+
padding: 0;
461+
}
462+
463+
.focusable:focus {
464+
background: rgba(0,0,0,0.3);
465+
}

0 commit comments

Comments
 (0)