Contributors/Projects/Accessible editing buttons

As part of the Editing team's work in improving editing tools, the main button controls on the desktop edit page are going to change. They will be more accessible, and be consistent with the majority of the rest of the user interfaces provided in MediaWiki.

This will affect the main 2010 wikitext editor, which almost all desktop users use to edit wikitext. It also affects the 2003 and 2006 ones which are much less used. This change may break some old gadgets and user scripts used for editing. These changes have already been implemented in VisualEditor, ContentTranslation, and Flow. This page gives some information about the change, and some advice about how to fix any affected scripts.

What is changing?
The visual appearance of the buttons used to finish an edit are changing. This includes (or ),, , and Cancel. From the perspective of an editor, the buttons are going to be bigger and more brightly shaded. You will still be able to Tab to the buttons and use the Return key to click the buttons without taking your hands off the keyboard. You can also use the same keyboard shortcuts.

You can try out and compare the before and after states on this wiki.

Why is it changing?
These changes improve accessibility, make the user experience internally consistent and similar across platforms, and make it easier for developers and local gadget and script writers to write and maintain code. This work is another step in the incremental migration to use the OOjs UI library in MediaWiki software, which was announced in 2014.

Although the colour and the size of the buttons is changing, this is not fundamentally an aesthetic change. This is a change to how the button is created in the software.

When are the buttons changing?
This will happen in the next few months. We're staging the deployment so that local users have time to fix their scripts and can learn from how other wikis are fixing their scripts. The schedule has not been finalized, but this is the initial proposal:


 * 1) Persian Wikipedia (volunteered) and mediawiki.org ✅, May 2017
 * 2) French, Spanish, Japanese, Russian, Italian, Portuguese Wikipedias and Meta (larger communities with more access to technical skills)
 * 3) All other Wikipedias (including the English and German Wikipedias, which have many old scripts that will need to be updated)
 * 4) All other WMF sites

Test if you need to fix anything
Test your scripts by adding  to the URL when you edit. See if your script behaves as expected. Many scripts (e.g., Twinkle, as far as anyone knows) will work normally. If something is broken, but you don't know which specific script needs repaired, then see Help:Locating broken scripts.

Borrow fixes from other scripts
If your script doesn't work, then you may want to look at these diffs to see whether any of these repairs might be applicable:
 * https://fa.wikipedia.org/w/index.php?title=MediaWiki:Gadget-AutoSign.js&diff=19721655&oldid=17851577
 * https://fa.wikipedia.org/w/index.php?title=MediaWiki:Gadget-Extra-Editbuttons.js&diff=prev&oldid=19721614
 * https://fa.wikipedia.org/w/index.php?title=MediaWiki:Gadget-defaultsummaries.js&diff=prev&oldid=19719303
 * https://fa.wikipedia.org/w/index.php?title=MediaWiki:Gadget-ProveIt.js&diff=prev&oldid=19719265
 * https://fa.wikipedia.org/w/index.php?title=MediaWiki:YandexTranslatorHelper.js&diff=prev&oldid=19719264
 * https://fa.wikipedia.org/w/index.php?title=MediaWiki:Common.js/edit.js&diff=prev&oldid=19719224
 * https://fa.wikipedia.org/w/index.php?title=MediaWiki:Gadget-MediawikiEditSummary.js&diff=prev&oldid=19719219
 * https://en.wikipedia.org/w/index.php?title=User:Anomie/ajaxpreview.js&diff=778525484&oldid=640095512
 * https://de.wikipedia.org/wiki/Spezial:Diff/165185124/165636979?title=Benutzer:Schnark/js/syntaxhighlight.js

Change how your code interacts with the page
When you are working with the values of the, and you are not really interested in its UI, you can also make use of form access. For instance the value from the input element of the summary is:. This will be the same in both old and new style of the forms, unlike  (which in the new code, refers to the decorative wrapper around the actual   input element).

If you successfully repair a user script or gadget in a different way, then please post the diff here. If you wrote or maintain a script that has been copied to other wikis, then please try to share your updates with those wikis.

Other updates
Please also consider updating screenshots on help pages to show the new style.