Use <button> rather than role="button" where possible

[Mike Gifford]

Steps to reproduce

1. Starting from Drupal 8.1's admin screen
2. View the source of the buttons

Expected result

<li data-drupal-ckeditor-button-name="JustifyRight" class="ckeditor-button ui-sortable-handle"><button>justify right</button></li>

Actual result

<li data-drupal-ckeditor-button-name="JustifyRight" class="ckeditor-button ui-sortable-handle"><a href="#" class="cke-icon-only cke_ltr" role="button" title="justify right" aria-label="justify right"><span class="cke_button_icon cke_buttonjustifyright_icon">justify right</span></a></li>

Other details (browser, OS, CKEditor version, installed plugins)

Coming from ​https://www.drupal.org/node/2738667 & ​https://www.drupal.org/node/2735421

First rule of ARIA use (never forget):

If you can use a native HTML element [HTML5] or attribute with the semantics and behaviour you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so.

​http://w3c.github.io/aria-in-html/#rule1

[Jakub Ś]

We had similar issue like that some time ago - #9988. I think that Reinmar has made some pretty interesting points in ​comment:7 and ​comment:9. In general it works, there are no problems with older browsers, quirks mode and screen readers (provided there are any of these issues left). I also agree that making a change just for the sake of making change is an overkill.

Having said all that I have also checked ​http://nightly.ckeditor.com/16-06-29-06-06/full/samples/toolbarconfigurator/index.html#basic and to my surprise I wasn't able to tab my way to buttons which is quite a serious issue imho. When I click one of the buttons I'm able to tab through them but that initial click is needed.

@mgifford if this is about conversion from link to button then this is a duplicate of #9988. If this is about making toolbar configurator accessible for keyboard then this should probably reported in separate ticket. What do you think? I believe this is about conversion but still the configurator needs a fix.

[Mike Gifford]

I'm pretty sure this isn't just about stylistic concerns as #9988 at least begins with.

There are places where use of ARIA reduces accessibility:

​https://www.paciellogroup.com/blog/2014/10/aria-in-html-there-goes-the-neighborhood/

​http://webmaster.tamu.edu/2015/01/28/making-accessibility-better-with-aria-not-worse/#.V3PuC47O6nc

[Marek Lewandowski]

Hello @mgifford, there's no doubt that semantical element are a better choice, if possible. Looking at #9988 it requests for using semantic markup whenever possible (it mentioned also non-semantic spans, but we'd not use that). In that regard, this issue is a duplicate of #9988, which is more generic than this one.

With that in mind we're setting this issue as a duplicate and let's keep an eye on #9988.

[Jakub Ś]

NOTE: About the configurator not being accessible. I have created a separate ticket here: #14711.