Menu Customizer: empty elements get announced by screen readers

[afercia]

Sometimes the Customizer outputs empty elements, see screenshot below. An empty paragraph (first part of the screenshot) would be a minor issue. Empty lists (second part of the screenshot) get announced by screen readers though. They're also invalid code. Bit confusing for users when they hear "Lists with 0 items".

[ocean90]

The reason for the empty .customize-section-description element is because the element is a p tag but $description includes p tags too, see trunk/src/wp-includes/class-wp-customize-nav-menus.php#L422​.

[afercia]

Mostly concerned about the ul because an empty p doesn't get announced by screen readers but an empty ul does, as "Lists with 0 items".
As far as I see that ul is used as sort of placeholder when dragging menu items so it can't be removed. Maybe we could try to hide it until it's actually needed?

[valendesigns]

So we just need to hide the ul when it's empty to stop the screen readers from announcing it?

[afercia]

Replying to valendesigns:

So we just need to hide the ul when it's empty to stop the screen readers from announcing it?

Yes, display: none or visibility: hidden would work for screen readers. Would be invalid code yet but I guess we can live with that?

[valendesigns]

I'll see if it can be added on the fly without any issues, but I suspect that's tied to something dynamic that's expecting it to always be there and might not be removable.

[valendesigns]

Patch 32843.diff​ changes the p to a div for customize-section-description and adds styles so it appears the same as it did when it was a p tag. You can't add paragraphs inside a paragraph. As well, I've added CSS that hides menu-item-transport when it's empty. Should work correctly now, but needs testing with a screen reader.

[celloexpressions]

Patch looks good to me. Html in section descriptions is generally discouraged, but it's allowed, and it's encouraged in panel descriptions. This should be ready for commit as soon as it's tested with a screen reader.

[afercia]

Tested with ChromeVox and it works nicely. For reference, see in the screenshot below what was happening before the patch when arrowing around elements. ChromeVox also highlights with an (ugly) orange outline the element being announced so it's pretty clear:

And after the patch nothing gets read out between the menu items:

[ocean90]

I think we should move .menu-item .menu-item-transport:empty { display: none; } to nav-menus.css since we have the placeholder there too.

[valendesigns]

@ocean90 why would we move it into the Admin Menus CSS file, and does that file even load when you view the Customizer?

[westonruter]

Screenshot prior to patch

[westonruter]

With 32843.diff applied

[westonruter]

Margins need to be updated on the CSS.

[valendesigns]

Move CSS

[westonruter]

In 33282:

Customizer: Hide the transport list when it's empty, especially for screen readers.

Also prevent invalid markup for .customize-section-description.

Props valendesigns.
Fixes #32843.