| MLRodrigue | |
| May 13 2022, 7:19 AM |
| F35156117: image.png | |
| May 19 2022, 9:33 PM |
| F35156130: image.png | |
| May 19 2022, 9:33 PM |
| F35156132: image.png | |
| May 19 2022, 9:33 PM |
| F35156128: image.png | |
| May 19 2022, 9:33 PM |
| F35156123: image.png | |
| May 19 2022, 9:33 PM |
| F35156125: image.png | |
| May 19 2022, 9:33 PM |
| F35156121: image.png | |
| May 19 2022, 9:33 PM |
| F35156119: image.png | |
| May 19 2022, 9:33 PM |
Keyboard focus in VisualEditor starts with the help-link (question-mark icon) instead of the beginning of the editor bar. This is caused by the toolbar being composed of a left and right section, but they are floated "in-reverse", i.e., the "actions"-div is set to "float:right".
<div class="oo-ui-toolbar-actions">...</div> <div class="oo-ui-toolbar-tools">...</div>
To achieve correct tab order, the tools-div should be rendered before the actions-div.
| Subject | Repo | Branch | Lines +/- | |
|---|---|---|---|---|
| Update OOUI to v0.44.1 | mediawiki/core | master | +1 K -822 | |
| Toolbar: Fix DOM order of tools and actions for tabbing | oojs/ui | master | +6 -4 |
We haven't really put much thought into the keyboard accessibility of the toolbar, on the assumption that users will use keyboard shortcuts most of the time, and because there aren't really established conventions for it.
That said, it looks like we can fix this easily, so we should if it makes someone's life easier.
If we just change the order of the elements in the DOM, the toolbar is still displayed the same, except when your window is narrow and the toolbar is forced to wrap over multiple lines, but in this case the new behavior actually looks better to me:
(testing on https://en.wikipedia.org/wiki/The_Fighting_Temeraire?veaction=edit)
| Before | After | |
|---|---|---|
| Wide |  |  |
| Narrow |  |  |
| Very narrow |  |  |
| Unreasonably narrow |  |  |
Change 793551 had a related patch set uploaded (by Bartosz Dziewoński; author: Bartosz Dziewoński):
[oojs/ui@master] Toolbar: Fix DOM order of tools and actions for tabbing
Change 793551 merged by jenkins-bot:
[oojs/ui@master] Toolbar: Fix DOM order of tools and actions for tabbing
Change 813630 had a related patch set uploaded (by Jforrester; author: Jforrester):
[mediawiki/core@master] Update OOUI to v0.44.1
Keyboard focus is in the correct order such that the VE tools toolbar is visited before the actions toolbar i.e left before right. See https://photos.app.goo.gl/2wsMvBzN11Br1EZG7
Before fix: VE tools toolbar is visited after the actions toolbar has been visited i.e right before left. See https://photos.app.goo.gl/gnttKYk3bLD4Y59fA