[Multiple Bundled Themes] Add theme support for navigation-widgets

[Hareesh Pillai]

#48170 introduced a theme support feature to wrap widgets displaying a lists of links within the <nav> element. All core WordPress themes should support this feature to improve semantics and accessibility.

[Hareesh Pillai]

Comparison of the HTML structure before and after applying the patch for Twenty Twenty theme

[Hareesh Pillai]

Twenty Thirteen and later themes have declared HTML5 support.
51445.diff adds navigation-widgets type to the html5 feature.

[justinahinon]

51445.diff applies and works fine for the 2013 and later theme.

[afercia]

WordPress 5.5 introduced the navigation-widgets theme support, it would be nice to showcase this new feature in all the official themes at the next themes update.

To my understanding, bundled themes can now be released independently from core so I'm not sure which milestone would be the more appropriate for this ticket. Setting it to 5.6 for visibility.

[helen]

I don't think this is strongly tied to the 5.6 release process so I'm not going to punt for the moment but I would need a declaration from bundled themes maintainers that this a) doesn't break anything in those themes, and b) that this is okay to keep on their radar as they prep the bundled themes for 5.6 release.

[SergeyBiryukov]

See [48349] for some more context.

Looks like this only improves semantics and accessibility, but does not affect the appearance. Should be safe to commit after confirming.

[williampatton]

I did a cursory scan over all the default themes for this in my test environment a few days back and there seemed to be no visual changes at all. I did not search the CSS of the themes to ensure there was no selectors that relied on there _not_ being an extra element: IE:

.widget-content > ul

[SergeyBiryukov]

In 49208:

Bundled Themes: Declare support for the html5 feature navigation-widgets.

Widgets that output a list of links are now wrapped within <nav> elements to improve semantics and accessibility.

The <nav> elements are native landmark regions, which helps assistive technology users to navigate through them.

Follow-up to [48349], [49177].

Props hareesh-pillai, justinahinon, afercia, williampatton.
Fixes #51445.

[SergeyBiryukov]

Replying to williampatton:

I did a cursory scan over all the default themes for this in my test environment a few days back and there seemed to be no visual changes at all. I did not search the CSS of the themes to ensure there was no selectors that relied on there _not_ being an extra element: IE:

.widget-content > ul

Found this in Twenty Twenty:

.widget-content > div > *:first-child {
	margin-top: 0;
}

.widget-content > div > *:last-child {
	margin-bottom: 0;
}

Let's see if it needs any adjustment.

[sabernhardt]

screenshots of each theme from Twenty Thirteen to Twenty Twenty, plus a page for comparing before/after [49208]

[sabernhardt]

optional change for Twenty Fifteen and Twenty Sixteen

[sabernhardt]

There are no visible differences in my tests with Firefox (Windows), trying LTR and RTL languages and two screen/browser widths.

While Twenty Fifteen and Twenty Sixteen ul styles do have a bottom margin they didn't have before, the new margin does not increase the .widget container's greater bottom margin. If we want to remove this margin anyway, 51445.2.diff​ can do that for these two themes. Otherwise, this ticket could be re-closed, as is.

Twenty Twenty

There are three selectors involving the divs:
.widget-content > div > *:first-child
.widget-content > div > *:last-child
.widget_nav_menu .widget-content > div > ul

However, the widget's list styles have a margin of 0 (all directions) both before and after the change, ​due to this:

.widget_archive ul, .widget_categories ul, .widget_pages ul, .widget_meta ul, .widget_nav_menu ul, .widget_recent_comments ul, .widget_recent_entries ul, .widget_rss ul {
    list-style: none;
    margin: 0;
}

Also the tag cloud doesn't use the list tags in Twenty Twenty, so no change is necessary for that either.

Twenty Sixteen

The tag cloud list had a bottom margin and still does. The other widget lists now have a margin that the following used to override, though it's not noticeable.

.widget > :last-child {
    margin-bottom: 0;
}

Twenty Fifteen

Similarly to Twenty Sixteen, the tag cloud and most other navigation widget ul lists have a margin with the new markup. The RSS widget, however, retains the zero-margin:

.widget_rss ul {
	list-style: none;
	margin: 0;
}

[SergeyBiryukov]

In 49469:

Twenty Fifteen: Ensure the <nav> elements in widgets do not affect bottom margin.

Follow-up to [49208].

Props sabernhardt.
See #51445.

[SergeyBiryukov]

In 49470:

Twenty Sixteen: Ensure the <nav> elements in widgets do not affect bottom margin.

Follow-up to [49208].

Props sabernhardt.
Fixes #51445.