Page MenuHomePhabricator

FlaggedRevs review status popup buttons do not use correct semantics
Open, Needs TriagePublicBUG REPORT

Description

Current HTML code of default FlaggedRevs review status popup has multiple accessibility issues.

Example link here: https://uk.wikipedia.org/wiki/Лідихівка (but you need review permissions to show all the buttons)

Review link

  • Review...
<button class="cdx-button cdx-button--action-progressive cdx-button--weight-primary cdx-button--size-medium cdx-dialog__footer__primary-action" onclick="window.open(' //ru.wikipedia.org/w/index.php?title=%D0%97%D0%B0%D0%B3%D0%BB%D0%B0%D0%B2%D0%BD%D0%B0%D1%8F_%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D0%B0&amp;diff=cur&amp;oldid=138627140 ');" type="submit">Review...</button>

This is a semantically unacceptable way to create a link. The button should be modified to actually represent a link, if this is technically possible. If this is not technically possible, Codex should be improved to make it technically possible.

Other buttons

  • X
<button class="cdx-button cdx-button--action-default cdx-button--weight-quiet cdx-button--size-medium cdx-button--icon-only cdx-dialog__header__close-button" aria-label="Close" onclick="document.getElementById(&quot;mw-fr-revision-details&quot;).style.display = &quot;none&quot;;" type="submit"><span class="cdx-icon cdx-icon--medium cdx-fr-css-icon--close"></span></button>
  • Cancel
<button class="cdx-dialog__footer__default-action cdx-button cdx-button--default" onclick="document.getElementById(&quot;mw-fr-revision-details&quot;).style.display = &quot;none&quot;;" type="submit">Cancel</button>

These buttons should not have type="submit" since they don’t actually submit anything. The appropriate button type in this case is type="button".

I should also note that using onclick="" is an incredibly hacky way to write JS code that should ideally be avoided.

cc @Dogu as the person responsible

Event Timeline

Restricted Application added subscribers: Base, Aklapper. · View Herald Transcript
stjn renamed this task from FlaggedRevs popup buttons do not use correct semantics to FlaggedRevs review status popup does not use correct semantics.Sep 4 2024, 4:22 PM
stjn updated the task description. (Show Details)

Maybe Codex "link buttons" are the way to go here. Someone mentioned it on Discord

<a class="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled">

https://doc.wikimedia.org/codex/latest/components/demos/button.html#link-buttons-and-other-elements

I agree that using JavaScript to turn <button>s into links seems like a code smell.

Novem_Linguae renamed this task from FlaggedRevs review status popup does not use correct semantics to FlaggedRevs review status popup buttons do not use correct semantics.Sep 6 2024, 9:50 AM

Change #1071157 had a related patch set uploaded (by Novem Linguae; author: Novem Linguae):

[mediawiki/extensions/FlaggedRevs@master] FlaggedRevsHTML: replace "Review..." <button> with <a>

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

Change #1071157 merged by jenkins-bot:

[mediawiki/extensions/FlaggedRevs@master] FlaggedRevsHTML: replace "Review..." <button> with <a>

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