[FEATURE] Control for Split Date Input

[killerrin]

Required information

Is your feature request related to a problem? Please describe.

We are currently in the process of releasing a new application for the Canada.ca website, however we are being told by our CX team that the default Browser Date Picker <input type="date"/> (Documented within WET here: https://wet-boew.github.io/v4.0-ci/demos/datepicker/datepicker-en.html) is too confusing for end users and results in them receiving several Major Accessibility Complaints whenever they are used.

As a result, they would like us to build a new custom Date Picker that utilizes three drop-downs for Year, Month and Day instead.

Describe the solution you'd like

Considering that we are seeing this kind of control pop up in requirements for multiple different apps, we were wondering if WET would be interested in building and adding to the toolkit a Custom Element (https://developer.mozilla.org/en-US/docs/Web/API/Web_Components/Using_custom_elements) for doing a Split Date selector.

We've taken a look at other Government of Canada Websites and we've noticed that other sites which include a Split Date Picker, the common style guide (though undocumented) tends to follow the same layout of three select boxes, each with a label. With everything wrapped inside of either a fieldset for the main header, or a secondary label which is referenced with aria-labelledby to enable multiple labels on those select elements.

From what I've seen when a Year/Month is selected, these split date pickers will generally also list the number of days inside of that month in the day column, and will take into account a leap year for February.

This is an example of the one we've been asked to replicate (https://etatpasseport-passportstatus.service.canada.ca/en/status).

However we've also seen examples of a Split Date Picker which uses a numeric number for the Year column.

Who shall do the work?
I am asking for Principal publisher to please do the work

Additional information (optional)

I feel that this would be important for WET to have so that Web Developers would be able to have a standard control they can pull from that matches the Government of Canada style guides when designing their pages without having to resort to writing this custom control, and handling all of its logic for displaying, validating and converting them to a JavaScript Date Object for every single app they make where it is required.

Unfortunately, due to the tight timelines we have for our project, we won't be able to wait for this issues completion. However given we have been asked on multiple occasions across multiple apps for this kind of custom control, I wanted to open this dialogue to discuss if perhaps it would be time to get something official into WET. Since if we've seen this request multiple times, I'm almost certain it's going to show up again.