Add tabindex to Special:Upload
Closed, ResolvedPublic

Description

To quote the user on Wikimedia Commons: "I usually use the "tab" key on the keyboard to navigate the form on MediaWiki's Special:Upload page. One issue I have is that now, when I want to get from the "permission" field to the categories, I have to "tab" my way through the entire special chars menu (or of course, use the dreaded "cursor"). It would be neat if the "tab" could skip the special chars on its way down towards the "upload" button."

I agree with the user. This can be easily done by setting "tabindex" property of the upload field.

We could set tabindex=0 on .mw-editTools and -1 on everything else inside. That way the Insert form will take up only one tab, and we can manage the rest with Javascript, ie, hit enter on .mw-editTools and then tab through that form.


Version: 1.17.x
Severity: enhancement

Details

Reference
bz23238
bzimport raised the priority of this task from to Low.
bzimport set Reference to bz23238.
bzimport added a subscriber: Unknown Object (MLST).
TheDJ created this task.Apr 18 2010, 7:10 PM

Bryan.TongMinh wrote:

Note that the upload button has its own short key (ctrl-alt-s from the top of my memory).

TheDJ added a comment.Apr 20 2010, 8:32 PM

Created attachment 7315
Tabindex for Upload

Patch that adds tabindex to the Upload page.

Adds partial support for tabindex to HTMLForm.php. Not supported for all fields, and not supported yet for the submit button.

Should I add a setSubmitTabIndex() ? How then to handle the other buttons ? keep counting ?

Could also not get the tabindex to work for the license selector for some reason. almost seems if setAttribute for XmlSelect just doesn't do a thing.

Attached:

sumanah wrote:

+need-review inferring from "Should I add a setSubmitTabIndex() ? How then to handle the other buttons ? keep counting ?" that Derk-Jan would like some design review

sumanah wrote:

Jan, could I ask you to take a look at this and see whether it would be worth updating & putting into Gerrit? Thanks.

jgerber: Could you review comment 2 here, please?

jgerber wrote:

This is more a question about accessibility, is tabindex used for other forms?

Also, now that UploadWizard is the default uploag page, is Special:Upload still used? It comes only up for uploading a new version as far as I know.

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptDec 22 2015, 10:23 AM
Danny_B moved this task from Unsorted to Tabindex on the Accessibility board.Jan 22 2016, 9:14 PM

Setting positive numbers as tabindex to make the tab order different from the element order is a bad idea. I was thinking we could set tabindex=0 on .mw-editTools and -1 on everything else inside. That way the Insert form will take up only one tab, and we can manage the rest with Javascript, ie, hit enter on .mw-editTools and then tab through that form.

This is a good task for Google-Code-in-2017, @TheDJ would you like to co-mentor?

Aklapper updated the task description. (Show Details)Nov 20 2017, 10:24 PM
Aklapper removed a subscriber: wikibugs-l-list.
Aklapper updated the task description. (Show Details)Nov 20 2017, 10:28 PM
Aklapper moved this task from Proposed tasks to Imported in GCI Site on the Google-Code-in-2017 board.

Imported as https://codein.withgoogle.com/tasks/5634219759894528/

Regarding mw-editTools,

$:acko\> grep -r editTools .
./includes/htmlform/fields/HTMLEditTools.php:			'<div class="mw-editTools">' .
./includes/htmlform/fields/HTMLEditTools.php:		return '<div class="mw-editTools">' . $msg->parseAsBlock() . '</div>';
./includes/EditPage.php:		$this->context->getOutput()->addHTML( '<div class="mw-editTools">' .

Thanks!

Regarding mw-editTools,

$:acko\> grep -r editTools .
./includes/htmlform/fields/HTMLEditTools.php:			'<div class="mw-editTools">' .
./includes/htmlform/fields/HTMLEditTools.php:		return '<div class="mw-editTools">' . $msg->parseAsBlock() . '</div>';
./includes/EditPage.php:		$this->context->getOutput()->addHTML( '<div class="mw-editTools">' .

Sorry, I am not sure what you're trying to say here @Aklapper

divadsn claimed this task.Dec 5 2017, 12:19 PM

Sorry for the long delay, I will push my changes to Gerrit today :)

So reading the previous messages and the proposed patch by @TheDJ, I will need to add a tabindex parameter and then handle that for the Special:Upload page, right? :)

TheDJ added a comment.EditedDec 7 2017, 10:17 AM

@divadsn sorry, that information is outdated. You should focus on the last description as given by @Prtksxna

We could set tabindex=0 on .mw-editTools and -1 on everything else inside. That way the Insert form will take up only one tab, and we can manage the rest with Javascript, ie, hit enter on .mw-editTools and then tab through that form.

  • So .mw-edittools will become tabindex="0"
    • that means you can still reach/focus it with the tab key
  • All links inside of mw-edittools will get tabindex="-1"
    • This makes it so that they initially will not be reachable/focusable by using tab
  • When .mw-editTools receives focus, we check if the user presses the spacebar or the enter key (to make it 'active')
  • When made active, those elements which we initially made -1, now become 0
  • the focus of .mw-editTools moves to the first subelement with 0
  • when none of the links inside .mw-editTools are focused any longer (the user 'left' the block), then we make them -1 again.

For this you can add JS code to: resources/src/mediawiki.special/mediawiki.special.upload.js
The eventual code should probably be moved into a separate module, but we can explain that later.

BTW. You should use prop('tabIndex') to make all these changes, not attr( 'tabindex' )

That's more tricky than it was before, so as far as I've got was the HTML part in PHP.

we check if the user presses the spacebar and the enter key (to make it 'active')

Do you mean space + enter as key combination or both seperately?

TheDJ added a comment.Dec 7 2017, 10:21 AM

@divadsn separate (i had already corrected my post, but not quick enough I guess :) )

divadsn added a comment.EditedDec 7 2017, 10:29 AM

Oh, haven't seen that, sorry :)

So in the end the initial tabindex should be done in JS or PHP? (Edit: JS seems to be the best choice I think)

TheDJ added a comment.EditedDec 7 2017, 10:59 AM

Yes, this approach depends on JS for major parts, the initial state can also be modified with JS and no changes to the PHP code are required in my opinion.

Change 395999 had a related patch set uploaded (by Divadsn; owner: Divadsn):
[mediawiki/core@master] Add tabindex to Special:Upload in mw-editTools

https://gerrit.wikimedia.org/r/395999

Change 395999 merged by jenkins-bot:
[mediawiki/core@master] Add tabindex to Special:Upload in mw-editTools

https://gerrit.wikimedia.org/r/395999

matmarex closed this task as Resolved.Dec 8 2017, 9:12 PM
matmarex removed a project: Patch-For-Review.
matmarex added a subscriber: matmarex.

I didn't sign up as a Google Code-in mentor this year, so I can't mark this as completed on the GCI site – probably @Aklapper can do it if @Prtksxna is not around.

Thank you @matmarex for your review :)