WordPress.org

Make WordPress Core

Opened 5 years ago

Closed 5 years ago

Last modified 4 years ago

#31443 closed defect (bug) (fixed)

Press This: Mega checkboxes in IE and Firefox

Reported by: Michael Arestad Owned by: azaozz
Milestone: 4.2 Priority: normal
Severity: normal Version: 4.2
Component: Press This Keywords: has-patch
Focuses: ui Cc:
PR Number:

Description

https://cldup.com/ywdsAkspps.png

This is due to an attempt at focus styles on the categories list. The best thing to do would be to change the categories list markup to li elements.

Pros:

  • full style control
  • A11y win (list tells how many items are in it)
  • removal of super hacky CSS targeting browsers

Working example: http://test.cita.uiuc.edu/aria/checkbox/checkbox1.php

Attachments (4)

31443.patch (6.1 KB) - added by azaozz 5 years ago.
31443.2.patch (8.9 KB) - added by Michael Arestad 5 years ago.
31443.3.patch (9.4 KB) - added by azaozz 5 years ago.
31443.4.patch (9.5 KB) - added by Michael Arestad 5 years ago.

Download all attachments as: .zip

Change History (17)

#1 @SergeyBiryukov
5 years ago

  • Milestone changed from Awaiting Review to 4.2

This ticket was mentioned in Slack in #core by michaelarestad. View the logs.


5 years ago

#3 @helen
5 years ago

  • Keywords needs-patch added

@azaozz
5 years ago

#4 @azaozz
5 years ago

In 31443.patch:

  • Add option to output only list items (no checkboxes) in wp_terms_checklist().
  • Update the JS to use the list items instead of checkboxes.

Needs styling.

#5 follow-up: @Michael Arestad
5 years ago

Started styling this. I'm attaching what I've done so far, but as you'll see, there is some serious padding issues due to the nesting. Any way we could change the layout a little? Something like this would work:

<ul>
  <li>
    <div aria and checkbox stuff>Category name</div>
    <ul>
      <li>
        <div aria and checkbox stuff>Category name</div>
      </li>
    </ul>
  </li>
</ul>

Current screenshot of janky padding:
https://cldup.com/k_ldVaUwVu.png

@azaozz
5 years ago

#6 in reply to: ↑ 5 @azaozz
5 years ago

Replying to Michael Arestad:

Any way we could change the layout a little?

Done in 31443.3.patch :)

#7 @Michael Arestad
5 years ago

  • Keywords has-patch added; needs-patch removed

Added patch works pretty well.

Firefox and IE8:
https://cldup.com/LKuuk9KbDG.png

#8 @azaozz
5 years ago

  • Owner set to azaozz
  • Resolution set to fixed
  • Status changed from new to closed

In 31765:

PressThis: simplify and restyle the categories drop-down, remove the checkboxes and use JS to get the selected categories on submitting the form.
Part prop: Michael-Arestad. Fixes #31443.

#9 @azaozz
5 years ago

In 31775:

PressThis: add a wrapped with role = application to the categories section.
Props: afercia. See #31443.

#10 @azaozz
5 years ago

In 31907:

Press This: remove role="application" from the Categories list wrapper. This doesn't make it work better in screen readers.
See #31443.

#11 @rianrietveld
5 years ago

In addition to comment 10 by @azaozz: Screen reader test results for role="application" are at https://make.wordpress.org/accessibility/2015/03/26/usertest-extra-small-test-about-roleapplication-in-press-this/

#13 @DrewAPicture
4 years ago

In 34368:

Docs: Move a duplicate hook comment accidentally left behind when its corresponding filter was relocated in [31765].

See #31443. See #32246.

Note: See TracTickets for help on using tickets.