Bryan.TongMinh wrote:

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

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.

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?

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">' .

In T25238#3776105, @Aklapper wrote:

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

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

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? :)

@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?

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

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)

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

Good work @divadsn!

Thank you @matmarex for your review :)