Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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.- Loading branch information
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -171,6 +171,7 @@ em { | |
| box-shadow: 0px 1px 2px rgba(0,0,0,0.6); | ||
| } | ||
|
|
||
| /* | ||
| #header div a { | ||
| width: 100px; | ||
| margin-top: 15px; | ||
|
|
@@ -182,6 +183,102 @@ em { | |
| color: #111; | ||
| font-family: sans-serif; | ||
| } | ||
| */ | ||
|
|
||
| nav { | ||
| /* height: 100%; */ | ||
| padding: 0; | ||
| margin: 0; | ||
| } | ||
|
|
||
| /* | ||
| nav:hover { | ||
| border-left: thin solid red; | ||
| } | ||
| */ | ||
|
|
||
| nav ul a, nav ul button { | ||
| /* width: 100px; */ | ||
| /* margin-top: 15px; */ | ||
| float: left; | ||
| padding-right: 2em; | ||
| } | ||
|
|
||
| nav a, nav button { | ||
| color: #111; | ||
| font-family: sans-serif; | ||
| } | ||
|
|
||
| nav > ul { | ||
| height: 100%; | ||
| margin: 0; | ||
| padding: 0; | ||
| list-style-type: none; | ||
| } | ||
|
|
||
| nav > ul > li { | ||
| height: 100%; | ||
| margin: 0; | ||
| padding: 0; | ||
| position: relative; | ||
| /* border: thin solid green; */ | ||
| list-style-type: none; | ||
| } | ||
|
|
||
| nav > ul > li ul { | ||
| position: absolute; | ||
| top: 2.5em; | ||
| margin: 0; | ||
| padding: 0; | ||
| left: 0; | ||
| aria-hidden: true; | ||
| display: none; | ||
| list-style-type: none; | ||
| } | ||
|
|
||
| nav > ul > li:focus ul { | ||
| aria-hidden: false; | ||
| display: block; | ||
| } | ||
|
|
||
| nav > ul ul > li { | ||
| /* height: 20px; */ | ||
| float: none; | ||
| position: static; | ||
| margin: 0; | ||
| padding: 0; | ||
| /* border: thin solid blue; */ | ||
| overflow: hidden; | ||
| list-style-type: none; | ||
| } | ||
|
|
||
| ul[role="menu"] > li { | ||
| padding: 0; | ||
| } | ||
|
|
||
| nav > ul ul > li > div { | ||
| margin: 0; | ||
| padding: 0; | ||
| /* border: thin solid cyan; */ | ||
| overflow: hidden; | ||
| } | ||
|
|
||
| .menuitemtitle > button { | ||
| padding-left: 1em; | ||
| padding-right: 1em; | ||
| } | ||
|
|
||
| .menuButton { | ||
| overflow: hidden; | ||
| margin: 0; | ||
| padding: 0; | ||
| } | ||
|
|
||
| nav > ul ul a, nav > ul ul button { | ||
| float: none; | ||
| display: block; | ||
| overflow: hidden; | ||
| } | ||
|
|
||
| #logo{ | ||
| height:100%; | ||
|
|
@@ -192,6 +289,11 @@ em { | |
| width: 60px; | ||
| } | ||
|
|
||
| li.lhs > div, | ||
| li.rhs > div { | ||
| float: none; | ||
| } | ||
|
|
||
| .logo{ | ||
| height: 30px; | ||
| width: 30px; | ||
|
|
@@ -204,9 +306,15 @@ em { | |
| display: inline-block; | ||
| height: 100%; | ||
| vertical-align: top; | ||
| float:left; /*latest*/ | ||
| } | ||
|
|
||
| /* | ||
| .menu, .menuContents { | ||
| float: none; | ||
| } | ||
| */ | ||
|
|
||
| #toolbar { | ||
| position: fixed; | ||
| z-index: 8000; | ||
|
|
@@ -230,6 +338,7 @@ em { | |
| /* darker blue option #2a348b */ | ||
| background-color: rgba(0,0,0,0.3); | ||
| border: none; | ||
| border-right: thin solid black; | ||
| border-radius: 0px; | ||
| color: #fff; | ||
| text-align: center; | ||
|
|
@@ -256,6 +365,10 @@ em { | |
| box-shadow: none; | ||
| } | ||
|
|
||
| .lhs { | ||
| float: left; | ||
| } | ||
|
|
||
| .rhs { | ||
| float: right; | ||
| } | ||
|
|
@@ -337,3 +450,16 @@ code { | |
| top: -.15em; | ||
| vertical-align: top; | ||
| } | ||
|
|
||
| .showmenu { | ||
| display: block; | ||
| } | ||
|
|
||
| .focusable { | ||
This comment has been minimized.
Sorry, something went wrong.
This comment has been minimized.
Sorry, something went wrong.
This comment has been minimized.
Sorry, something went wrong. 
ds26gte
Author
Contributor
|
||
| margin: 0; | ||
| padding: 0; | ||
| } | ||
|
|
||
| .focusable:focus { | ||
| background: rgba(0,0,0,0.3); | ||
| } | ||
Oops, something went wrong.
I was just chasing down a visual issue in horizon; this rule is gets rid of the very thin gray gap between Bonnie menu, File, Insert, etc. Is it necessary? I don't see the style requirement mentioned in the commit message (though I see the reason for the focus styling below). I think this also motivated the UI change of adding the single-pixel black border on the blueButton class, which I don't find strictly necessary. Thanks!