WordPress.org

Make WordPress Themes

Opened 9 months ago

Closed 7 months ago

#39917 closed theme (live)

THEME: Foxhound – 1.0.3

Reported by: ryelle Owned by: grapplerulrich
Priority: new theme Keywords: theme-foxhound accessibility-ready
Cc: fantastic.fall@…

Description

Foxhound - 0.0.1

A react-based theme, bringing single-page app goodness to your WordPress blog!

Theme URL - https://themes.redradar.net/foxhound/page/about/
Author URL - https://themes.redradar.net

SVN - https://themes.svn.wordpress.org/foxhound/0.0.1
ZIP - https://wordpress.org/themes/download/foxhound.0.0.1.zip?nostats=1

History:

Ticket Summary Status Resolution Owner
#39917 THEME: Foxhound – 1.0.3 closed live grapplerulrich

(this ticket)


https://themes.svn.wordpress.org/foxhound/0.0.1/screenshot.png
Theme Check Results:

  • RECOMMENDED: No reference to add_editor_style() was found in the theme. It is recommended that the theme implement editor styling, so as to make the editor content match the resulting post output in the theme, for a better user experience.
  • RECOMMENDED: No reference to the_post_thumbnail() was found in the theme. It is recommended that the theme implement this functionality instead of using custom fields for thumbnails.

Change History (21)

#1 @themetracbot
9 months ago

  • Summary changed from THEME: Foxhound – 0.0.1 to THEME: Foxhound – 1.0.0

#2 @grapplerulrich
9 months ago

  • Keywords changed from theme-foxhound, accessibility-ready to theme-foxhound accessibility-ready
  • Owner set to grapplerulrich
  • Status changed from new to reviewing

#3 @grapplerulrich
9 months ago

I reviewed the theme before it was uploaded as it is a special exception it is JS theme that uses the REST API. The theme is ready to be set live it just needs a a11y-ready review.

Ping @joedolson :)

#4 @joedolson
9 months ago

Well, this should be interesting! Thanks for pinging me @grapplerulrich!

#5 @joedolson
9 months ago

Here's your accessibility ready review! It's in pretty good shape, despite the number of items I'm citing; the overall intent is sound.

Bug noted: if I perform a search from the widget search form for a set of space separated terms, the spaces are stripped before the search is performed

1) Keyboard Navigation - Fail

  • Drop down menus not visible on :focus
  • Could not operate menu toggle either via mouse or keyboard - Bug?
  • Search submit button can receive focus, but does not become visible on focus. A tab stop with no - visible location creates user confusion
  • After submitting widget search form, focus moves to top of page, but *after* the Skip to Content link. - Focus should land either before the Skip to Content link or at the beginning of the search results.
  • After posting a comment, focus remains on the 'Post Comment' button, but reads comments posted. Suggest including a specific ARIA message to indicate that the comment has been posted, to provide improved context.

2) Controls - Pass

3) Skip Links - Pass

4) Forms - Pass

5) Headings - Fail

  • "Leave a Reply" skips the H2 heading level if not in content.

6) ARIA Landmark Roles - Pass

  • It's preferable if you don't use <aside> for individual widgets, as that results in the addition of an extra complementary landmark for every instance. This can quickly result in an unusable landmark navigation, due to an excessive number of landmarks.

7) Link Text - Default Pass; could not reproduce a 'continue reading' link on term archives, search results, or excerpts

8) Contrasts - Fail

  • Almost everything is fine, but the search widget is not visible to low contrast; the border gives a contrast of 1.34:1 (https://www.joedolson.com/tools/color-contrast.php?type=rgb&color=43%2C36%2C36&color2=252%2C251%2C248&alpha=.15 ), and the placeholder text is also below color contrast. It's acceptable for placeholder text to be under contrast, because it needs to be clear that text is not an entered search term; but *something* of the search form must be visible. As this currently is, somebody with poor color perception may not be able to find the search form at all.

9) Images - Fail

  • Featured images on posts do not include alt attribute text

10) Media - Default pass; nothing found to test

11) Not Allowed - Default pass; nothing found to text

Theme Accessibility Guidelines & Tips:
https://make.wordpress.org/themes/handbook/review/accessibility/required/

#6 @ryelle
9 months ago

  • Drop down menus not visible on :focus
  • Could not operate menu toggle either via mouse or keyboard - Bug?

What browser are you using? Both of these work fine for me in Chrome & Safari, and I believe I tested this on IE as well

  • After submitting widget search form, focus moves to top of page, but *after* the Skip to Content link. - Focus should land either before the Skip to Content link or at the beginning of the search results.

The focus should land at the beginning of the search results -- technically right above the "Search results for ___" heading, approximately where the skip to content link would drop the user. To me, that made sense as it's not a whole-page reload, the focus would move back up to the top of what changed. This is what happens on every page render, the focus is brought to the top of the #main element. Is it just the search page that this is unexpected, because you're brought above the search form? (happy to DM about this in slack if I'm not explaining clearly)

For headings, does it make sense to add a screen-reader h2 in the sidebar, as a "parent" for the h3 widget-titles?

I'll work on the rest of these, thanks for the review :)

#7 @joedolson
8 months ago

I couldn't operate the menu or toggle on both Chrome & Firefox on Windows 10 - but no console error or indicator of a problem. Just nothing. This was using the 'Testing' menu shipped in the theme unit test data.

Search: on this re-test, it seems to be working as expected...so I'm not sure what I was experiencing there. Don't worry about it, I guess!

For headings, yes, that would be a valid solution.

I have this installed in a publicly accessible site at http://dev.josephdolson.com/wp-test/, if you want to take a look and see if there's anything wonky about the specific set up.

Thanks!

#8 @ryelle
8 months ago

Just wanted to leave a note that I'm working on this, and should have an update in a few days. Thanks again for the feedback :)

This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.


8 months ago

#10 @themetracbot
8 months ago

  • Summary changed from THEME: Foxhound – 1.0.0 to THEME: Foxhound – 1.0.1

#11 @ryelle
8 months ago

@joedolson I've addressed all your feedback in the latest version. You can also see the the changes on github which adds some context on how I fixed things, if you're interested.

#12 @ryelle
8 months ago

Oh, I almost forgot —

I have this installed in a publicly accessible site at http://dev.josephdolson.com/wp-test/, if you want to take a look and see if there's anything wonky about the specific set up.

The issue here was that the theme recommends using the WP API Menus plugin, and while the fallback worked visually, the keyboard nav wasn't set up. It is now, but you'll still have a slightly better experience with the plugin active.

#13 @joedolson
8 months ago

Once I noticed that that was a recommended addition, I suspect it was the case; but the themes need to work without recommended plug-ins as well, so it still needed to be fixed. I always review first with no added plugins, to make sure that nothing extra is required!

I'll follow up on this as soon as possible. Thanks!

#14 @themetracbot
8 months ago

  • Summary changed from THEME: Foxhound – 1.0.1 to THEME: Foxhound – 1.0.2

#15 @ryelle
8 months ago

I just noticed my last update was missing a new file 😣

All this update does is add the missing file.

#16 @joedolson
8 months ago

Thanks! I'll get on this ASAP. I'm traveling right now, so that'll probably be Sunday.

#17 @joedolson
8 months ago

Follow up review:

1) Keyboard Navigation - Fail

No longer strictly a keyboard navigation issue, but the comments now have a larger problem. You've added an aria field to expose errors and success of posting comments, but it's nested inside #main, which is also and aria live region. Because the two aria regions are nested, the change in the lower region is *also* a change in the larger region. Because the larger region has aria-atomic='true', changes to the region are read as a whole. Contact me if you want help testing this while you work, rather than going back and forth.

Changing the aria-atomic value on main to 'false' should fix this issue, but it would benefit from screen reader testing.

8) Color Contrast - Fail

I should have caught this on the first review, but the underline color (presented via shadow) on content links doesn't meet contrast requirements. An underlined link avoids contrast requirements for links, *but* the underline needs to itself be visible. The underline being at #dddfde gives a 1.34:1 contrast. I think you could get away with as low as 3:1; it's not text, so it's hard to judge it according to text size standards, but 1.34:1 is too low.

Theme Accessibility Guidelines & Tips:
https://make.wordpress.org/themes/handbook/review/accessibility/required/

#18 @themetracbot
7 months ago

  • Summary changed from THEME: Foxhound – 1.0.2 to THEME: Foxhound – 1.0.3

#19 @ryelle
7 months ago

The aria-atomic and comment status issues: I've fixed this by removing the atomic attribute, and changing how the user is notified of comment status. I was trying to avoid the comments from interrupting when they load, since they load after the screen reader has started reading the post, and the aria-live=assertive picking up on it. It seems to work now that I've set the comments to be polite, but I can only test on VoiceOver.

As for the color contrast, I've updated the underline color.

Thanks for your feedback :)

This ticket was mentioned in Slack in #themereview by acosmin. View the logs.


7 months ago

#21 @joedolson
7 months ago

  • Resolution set to live
  • Status changed from reviewing to closed

Love it. At least testing with NVDA, that worked fabulously.

Passed for accessibility-ready! :)

I'm going to go ahead and push this live now, since @grapplerulrich has already reviewed and approved it.

Note: See TracTickets for help on using tickets.