Quantcast
Channel: Issues for Drupal core
Viewing all articles
Browse latest Browse all 295320

Datetime and Datelist elements should render as fieldsets

$
0
0

Problem/Motivation

datetime-wrapper.html.twig element label uses an <h4> tag instead of the <label> tag.

This is problematic for assistive tech, since the "label" is not associated with anything.

For example, any node form in core has an "Authored on" datetime form element. The individual date and time inputs already have <label for>. For assistive tech, these are programmatically labelled as "date" and "time". However there's no programmatically-determinable association between these inputs and the phrase "authored on".

This <h4> also helps breaks #states support for datetime elements, but that's being addressed in #2419131: [PP-1] #states attribute does not work on #type datetime, not here.

Proposed resolution

Option A: Nested fieldsets:

Option A is now the agreed upon solution, with sign-off from @andrewmacpherson and @lauriii.

The "authored on" group would be improved by treating it as a fieldset with at legend, instead of a <h4>.

In the case of a single datetime field (Field API, datetime module) we already get a fieldset, using the the field name as a legend. The individual date and time inputs have <label for>, so screen reader users skipping through form elements will hear "preferred date, date" (for example). That's great for a single-value datetime field.

In the case of a datetime range field (datetime_range module), the field name is treated as a legend, but the start and end each have a h4 from the datetime-wrapper. This might be better with nested fieldsets (field_name (legend) > start date (legend) > date (label). Nested fieldsets are sometimes confusing for screen reader users though, so we'd want to tread carefully here.

Nested fieldsets would also be ugly and potentially confusing once #2625136: Fix label visibility and add wrapper container for exposed numeric/date filters with multiple form elements lands, too.

Option B: WAI-ARIA labeledby + group

Nice thought, but rejected. See #27 for reference.

Remaining tasks

  1. Discuss and agree on an approach. Option A it is.
  2. Fix implementation to not generate duplicate IDs and other problems with patch #35
  3. Figure out how to properly deprecate the datetime-wrapper template + pipeline: #3157353: Provide a mechanism to mark entire twig templates as deprecated
  4. Update / add tests as needed.
  5. Fix any accessibility concerns with nested fieldsets.
  6. Fix obvious visual stuff we can do to make this prettier by default.
  7. Reviews:
    • General implementation / code review
    • Needs accessibility review
    • Needs usability review
  8. Write change record about the render array changes, deprecation of the datetime-wrapper template, etc
  9. RTBC.
  10. Commit.
  11. Unblock #2419131: [PP-1] #states attribute does not work on #type datetime (which is thankfully mostly solved by this approach, but will need some follow-up fixes)

User interface changes

Definitely something. Exact changes TBD.

API changes

None.

Data model changes

None.

Release notes snippet

TBD.

Original report by @tormi

datetime-wrapper.html.twig element label uses <h4> tag instead of default <label> tag.


Viewing all articles
Browse latest Browse all 295320

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>