Alpha: Clarify difference between Ends on and Ends fields

Problem/Motivation

I think the UI of the Alpha widget could be improved. The difference between the Ends on and Ends fields are not immediately apparent. I've linked another issue caused by this confusion.

This is what the Alpha widget looks like currently in Claro. Ignore the missing option for the event to never end. I removed that using form alter for my specific use case.

By copying the date-recur-modular-alpha-widget.html.twig template to a custom module and modifying it, I was able to make the UI look like this. I think this is much more obvious.

I'll paste my template file below, but I realize getting this into the module is not so easy as changing a template. The reason is that the CSS classes I've used in the template are Claro specific. Ideally we would want to use the fieldset.html.twig file from the active theme. However the only way I know how to do that is via the form API on the PHP side. This would essentially mean there is almost nothing left in the template, or perhaps we would need one template for the contents of each fieldset.

date-recur-modular-alpha-widget.html.twig

<div{{ attributes }}>
  <fieldset class="first-occurrence fieldset">
    <legend class="fieldset__legend ">
      <span class="fieldset__label">{{ 'First occurrence'|t }}</span>
    </legend>
    <div class="fieldset__wrapper">
      <div class="fieldset__description">{{ 'Set the start and end date/time for the first occurrence of this event.'|t }}</div>
      <div class="date">{{ widget.start }}</div>
      <div class="date">{{ widget.end }}</div>
      <div class="date">{{ widget.time_zone }}</div>
    </div>
  </fieldset>
  <fieldset class="occurrences fieldset">
    <legend class="fieldset__legend ">
      <span class="fieldset__label">{{ 'Occurrences'|t }}</span>
    </legend>
    <div class="fieldset__wrapper">
      <div class="fieldset__description">{{ 'Configure whether/how this event should repeat.'|t }}</div>
      <div class="container-inline">
        {{ widget.mode }}
        {{ widget.daily_count }}
      </div>

      {{ widget.weekdays }}
      {{ widget.ordinals }}
      <div class="ends">
        <div>
          {{ widget.ends_mode }}
        </div>
        <div>
          {{ widget.ends_count }}
          {{ widget.ends_date }}
        </div>
      </div>
    </div>
  </fieldset>
</div>

Steps to reproduce

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes