#a11y-headings - Add Themes

[Cheffheid]

#a11y-headings

There are a few things happening on this screen:

• The feature filter columns probably won't need to be headings. Especially since they are hidden until the Feature Filter button is triggered
• All themes are h3s, should either be removed or bumped up to h2
• Like on the "Add Plugins" page, there's another h2 on the page unrelated to the theme list called "Add New Theme" - which is actually hidden and seems to be a separate block:

When a theme is selected for preview, a new heading is added at the bottom with the name of the theme that's being previewed. Landing it squarely as a subheading under "Add New Theme", which kind of works but seems a little unnecessary:

Not too sure what to do here. Having everything at h2 makes having headings a bit moot.

The hidden "Add New Theme" h2 seems like a good candidate for removal, but I can't say if there is anything on the page that will make it re-appear at all.

Even if it's just removed as a heading, we'll then have duplicate headings whenever a theme is being previewed.

I'm inclined to say to remove all the headings but the h1.

Any thoughts?

[afercia]

I'd say this screen is maybe one of the most complicated and has a few issues worth discussing, as @Cheffheid pointed out.

1. Feature Filter: I'd say each feature group should be a <fieldset> and so the current h4 are perfect candidates to be the fieldsets legend. Also, I don't see the need to have the feature group marked up as an ordered list.
2. Themes list: what I see here is a... list. Would be appropriate to use a list (maybe a definition list <dl>?). I understand this would require to rework many things (PHP and JS templates) so maybe we could just switch the <h3> to <h2> for now.
3. The hidden "Add New Theme" h2: as far as I see it's added via JavaScript and only needed in the "Installed Themes" screen. Here it's hidden but maybe, to be a bit more clean, we should avoid to inject it just checking for ! themes.isInstall in /wp-admin/js/theme.js
4. The h3 added when a theme is selected for preview: as far as I see it's the theme name in the preview overlay. In my opinion, if we want to consider the preview overlay like a "full-size modal" we should make sure to hide all the other content from assistive technologies and then the preview would be the only content available; at this point this heading should be a h1 as done in (almost) all the other admin modals.

[afercia]

We should also consider the headings we would like to add and we're discussing in #32147 see the screenshot in the comment 11: https://core.trac.wordpress.org/ticket/32147#comment:11
Same for the Add Plugin screen, see #33818

[Cheffheid]

That's fair.

So then maybe we add a heading (visibly hidden or otherwise) that says "Available Themes" at h2 for the list of themes. That way we can leave those what they are for the time being.

Changing the feature filters to fieldsets seems reasonable to me too, should clean up the heading list too.

Is there already a similar ticket for the overlays?

[afercia]

Replying to Cheffheid:

Is there already a similar ticket for the overlays?

I think there's no ticket yet. Thinking at the Theme preview/installer, the media views modal, the Customizer, and all the other modal dialogs in the admin, maybe we should discuss them a bit and open new tickets.

To move on with this ticket we'd really need a feedback about #32147.

[afercia]

Consider for example the Themes install screen before applying the patch from #32147, see the screenshot on the left. The headings hierarchy clearly misses some headings to identify the main sections, most noticeably the Themes list.
Then see the screenshot on the right: the filters section has now its own heading, the Themes list too. We should change just the "feature filter" H4. The new headings are exactly what we'd need and they're already proposed in the #32147 patch. This applies also to the Plugin install screen, see #33818.

[afercia]

First pass. The feature filter groups legend position needs to be tested in modern IE, cc @Cheffheid :). I'd say it would be fine to have some small visual difference between browsers as long as it doesn't break in IE.

Here's the new headings hierarchy with the patch applied:

[afercia]

Forgot one thing: I'd suggest to don't set the feature filter font size to 12px. Is really too small. The default 13px would also better align checkboxes and labels. Any thoughts more than welcome.

[afercia]

As far as I see there are a couple of UI things left here that would need some UI feedback:

• test in modern IE, especially about the Feature Filter legend position, which is a bit tricky in IE. We could wrap the fieldsets in a <div> and style the div instead of the fieldset but I'd like to avoid adding markup just to solve browsers bugs. Any thoughts more than welcome.
• consider to increase the checkbox labels font size from 12px to 13px (which is the default: i.e. remove the font-size declaration)

cc @helen :)

[afercia]

Related to the font size, screenshot with the current 12px:

And the proposed 13px (default):

[tyxla]

I've tested 33819.patch and both the fieldsets and their corresponding legends look fine in IE9, IE10 and IE Edge (tested on Windows 8.1, IE version 11.0.9600.18053).

[afercia]

Looks like just in IE 8 the legends are a bit misplaced, see screenshot below. I'd rather avoid hacks to fix a small visual glitch in just IE 8.

[afercia]

Refreshed patch, agreed with @helen to don't fix the legend color for IE 8 to keep things cleaner and because at some point we have to start accepting small visual glitches in outdated browsers, as long as they don't harm anything.

P.S. any other visual change is out of the scope of this ticket, about the proposed font-size change from 12px to 13px feel free to open a separate ticket.

[afercia]

In 35273:

Accessibility: Improve the headings hierarchy in the Add Themes screen.

Fixes #33819.