[a11y] Newsletter placeholder vs. required (in non-default locales)

[janbrasna]

Description

Once more locales are added to automated a11y testing, some new issues may surface, stemming from different controls being selected or appearing in localised order et al.

Newsletter form on homepage (above the footer):

When used in German, the first option for preferred language ("Deutsch") gets selected, and being the first value in a required field, this is triggered:

Error: The first child option element of a select element with a required attribute, and without a multiple attribute, and without a size attribute whose value is greater than 1, must have either an empty value attribute, or must have no text content. Consider either adding a placeholder option label, or adding a size attribute with a value equal to the number of option elements.
From line 1614, column 3; to line 1614, column 30
_lang">↩ Deutsc

Also some more trivial warnings for implicit roles:

Warning: Attribute aria-required is unnecessary for elements that have attribute required.
From line 1061, column 14; to line 1061, column 93

↩ <op Warning: Attribute aria-required is unnecessary for elements that have attribute required. From line 1613, column 14; to line 1613, column 87 ↩ <op

(Others were moved out of this issue:)

Navigation (EDIT: This is basically what upstream in #14770 resolved…)

This is the loudest error in automated testing right now, being marked as "critical":

CRITICAL: Elements Must Only Use Allowed ARIA Attributes More Info
Fix the following: ARIA attribute is not allowed: aria-expanded="false" for <div class="c-navigation-items" id="c-navigation-items" data-testid="navigation-menu-items" aria-expanded="false">

The div doesn't have the implicit role for being expandable, so this may need either adding a button role of sorts, or marking up menu, menubar, menuitem roles and using aria-haspopup for the dropdowns perhaps.

CTD sections (EDIT: Being fixed in #14965)

Also in German version, the CTD sections & macros seem to have more closing tags than necessary, making the content hierarchy crossed with unclosed elements:

Error: End tag div seen, but there were open elements.
From line 748, column 3; to line 748, column 8
v>↩ ↩ ↩ ↩</
Error: Unclosed element section.
From line 722, column 7; to line 722, column 63
x">↩

↩ ↩
Error: Stray end tag section.
From line 752, column 3; to line 752, column 12
ction>↩↩

↩↩↩ ↩

[alexgibson]

@janbrasna thanks for filing this issue. I had hoped that we could get the a11y scanner up and running first before using the results to file issues. Ideally I'd like to get some good failures to test reporting against, as opposed to fixing them too early.

It is totally fine and expected that the test runs will fail initially. i appreciate your enthusiasm to fix stuff :)

[janbrasna]

@alexgibson I've only filed this from exploratory testing axe introspection before I forget;) I do not intend to look into fixing these anytime soon as they need a broader consensus first — and the nav probably needs adding all the roles upstream in Protocol anyways.

(It's more of a note that various locales might trigger more issues than the /en* itself when various controls get different content, so just raising this to demonstrate;)…)

[alexgibson]

Thanks @janbrasna - yep we'll be including more than just en en-US home page when it's ready.