Page MenuHomePhabricator

HTML elements with strong native semantics shouldn't carry role="button"
Closed, ResolvedPublic

Description

Starting form Special:Search contains <button role="button"> which is default and not recommended in HTML5:

https://validator.w3.org/nu/?showsource=yes&useragent=Validator.nu%2FLV+http%3A%2F%2Fvalidator.w3.org%2Fservices&doc=https%3A%2F%2Fwww.mediawiki.org%2Fwiki%2FSpecial%3ASearch#l42c494 reports:

Warning: The button role is unnecessary for element button.
From line 42, column 1554; to line 42, column 1692
utWidget'><button type='submit' tabindex='0' aria-disabled='false' value='' role='button' class='oo-ui-inputWidget-input oo-ui-buttonElement-button'><span

For the [[https://www.w3.org/TR/html5/forms.html#the-button-element | element <button>]] the attribute role="button" is not recommended to set because it is the default value.

The elements with strong native semantics which are not supposed to carry role=button:

  • <button>
  • <input type="button">
  • <input type="image">
  • <input type="reset">
  • <input type="submit">

Event Timeline

Change 311995 had a related patch set uploaded (by Prtksxna):
ButtonElement: Remove role="button" as it is the default value

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

Volker_E renamed this task from Special:Search contains <button role="button"> which is default and not recommended in HTML5 to HTML elements with strong native semantics shouldn't carry role="button".Oct 20 2016, 2:37 AM
Volker_E updated the task description. (Show Details)

Is there any benefit to the user other than a few fewer bytes in the DOM?

A few bytes here, a few bytes there. Redundancy everywhere.

We're currently featuring in demos (both in widgets and dialogs) besides ButtonElements on <a> the following other possible elements:

  • <input type="button" tabindex="0" aria-disabled="false" class="oo-ui-inputWidget-input oo-ui-buttonElement-button" role="button" value="Another button">
  • <button type="button" tabindex="0" aria-disabled="false" class="oo-ui-inputWidget-input oo-ui-buttonElement-button" role="button"><span class="oo-ui-iconElement-icon"></span><span class="oo-ui-labelElement-label">Another button</span><span class="oo-ui-indicatorElement-indicator"></span></button>
  • <input type="submit" tabindex="0" aria-disabled="false" class="oo-ui-inputWidget-input oo-ui-buttonElement-button" role="button" value="Submit the form">
  • <button type="submit" tabindex="0" aria-disabled="false" class="oo-ui-inputWidget-input oo-ui-buttonElement-button" name="login" role="button"><span class="oo-ui-iconElement-icon oo-ui-icon-check oo-ui-image-invert"></span><span class="oo-ui-labelElement-label">Log in</span><span class="oo-ui-indicatorElement-indicator oo-ui-image-invert"></span></button>

Every element besides <a> carries the role attribute unnecessary redundantely. PS 4 only sets role when encountered on an anchor.

Change 311995 merged by jenkins-bot:
ButtonElement: Add role="button" only when needed

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