Page MenuHomePhabricator

Provide and enforce labels for all interactive widgets like ButtonWidgets (icon), PopupButtonWidget…
Closed, ResolvedPublic

Description

Wether the label as such is directly visible or not, we should enforce that all interaction elements are constructed with a label. (or at least warn if in debug mode and we are not adding a label)

For instance, try figuring out what the (i) symbol does on the demo page right now, before clicking it. :)

Event Timeline

TheDJ raised the priority of this task from to Needs Triage.
TheDJ updated the task description. (Show Details)
TheDJ added projects: OOUI, Accessibility.
TheDJ added a subscriber: TheDJ.

Do you mean adding an aria-label for buttons that don't have any text?
I am guessing by (i) you mean -

I mean label as the concept, not the technical way in which it is represented.

title=, <label> <button>content</button>, aria-label

Can all be good solutions, but there should be a label, and it should not be possible that you create an input element without a label. aria-label should be the last fallback for situations where we cannot otherwise create a label.

Jdforrester-WMF set Security to None.

Hello Everyone,
I'm part of the group of senior CS students wanting to contribute to this project. we previously worked on issue T161612, and would like to contribute to this task next. So, any advice regarding what part of the code we should focus on for this task or any other advice would be greatly appreciated.

@JazielPauda Thanks for your interest!
The widgets in concern in this task in OOUI are the icon-only and indicator-only ButtonWidgets, both framed and frameless.

We've got ways to visually hide labels – but still making it readable/'visible' to screenreaders. In MW core's mediawiki.mixins.less there's .mixin-screen-reader-text() mixin.
My approach would be to

  • add a similar mixin to OOUI's common.less,
  • output the labels (currently on title attribute of bespoken buttons) into label without invoking .oo-ui-labelElement on the button itself and
  • use above mixin on .oo-ui-labelElement-label of those 4 types of buttons.
  • add a similar mixin to OOUI's common.less,

@Volker_E are you talking about mediawiki/skins/Vector/components/common.less ?

  • add a similar mixin to OOUI's common.less,

@Volker_E are you talking about mediawiki/skins/Vector/components/common.less ?

I think he is referring to src/styles/common.less in OOUI.

Volker_E raised the priority of this task from Medium to High.Apr 12 2018, 10:59 PM

We're currently featuring a misbehaviour on all

  • ToggleButtonWidgets,
  • PopupButtonWidgets,
  • NumberInputWidget buttons,
  • any ButtonWidget that isn't provided with a title

Currently, a button with only a title fails even in latest VoiceOver.

@Volker_E, just to clarify, our situation isn't the same as the one that you link to, right? The linked code is not a button with title but a button with an image that has a title:

<button>
    <img src='1234.png' title='This is image title'>
</button>

Whereas, in case of a ButtonWidget with icon only (but with a title):

new OO.ui.ButtonWidget( { icon: 'help', title: 'Icon only, framed' } );

the markup has an anchor with a title with empty spans:

<a class="oo-ui-buttonElement-button" role="button" title="Icon only, framed" tabindex="0" aria-disabled="false" rel="nofollow">
    <span class="oo-ui-iconElement-icon oo-ui-icon-help"></span>
    <span class="oo-ui-labelElement-label"></span>
    <span class="oo-ui-indicatorElement-indicator"></span>
</a>

I am guessing this is worse?

Change 431635 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[oojs/ui@master] NumberInputWidget: Add aria-hidden to buttons

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

Change 431635 merged by jenkins-bot:
[oojs/ui@master] NumberInputWidget: Add aria-hidden to buttons

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

Volker_E renamed this task from Enforce labels for all interactive controls to Provide and enforce labels for all interactive widgets like ButtonWidgets (icon), PopupButtonWidget….May 7 2018, 8:04 PM
Volker_E removed a project: Patch-For-Review.

Let's clarify scope: Changing this to be the parent task, providing labels sub-task in T94749 and enforcing will be handled in a task to be filed.

The last bits of this have actually been resolved in OOUI v0.29.3 and the demos follow-up patches. Have updated https://www.mediawiki.org/wiki/OOUI/Widgets/Buttons_and_Switches to reflect invisibleLabel: true config option.

Volker_E claimed this task.
Volker_E moved this task from Next-up to OOUI-0.30.0 on the OOUI board.
Volker_E edited projects, added OOUI (OOUI-0.30.0); removed OOUI.