feat(date-picker): add date picker component #550
Conversation
gregtyler
added
the
staging:request
|
🚀 Deploying to staging environment Username: |
github-actions
bot
added
staging:active
| &--fixed-width { | ||
| .moj-datepicker-input__wrapper { | ||
| width: 215px; | ||
| } | ||
| } |
There was a problem hiding this comment.
Rather than fixing the width of the wrapper, we should let people set the input width with the existing GDS classes (e.g. govuk-input--width-10)
| <div class="moj-datepicker__dialog__navbuttons"> | ||
| <button class="js-datepicker-prev-year" aria-label="previous year" data-button="button-datepicker-prevyear"> | ||
| <span class="govuk-visually-hidden">Previous year</span> | ||
| <svg focusable="false" class="moj-datepicker-icon" aria-hidden="true" role="img"><use href="/assets/images/icons.stack.svg#double_chevron_left"></use></svg> |
There was a problem hiding this comment.
We don't have icons.stack.svg so will need to define these SVGs inline
| Datepicker.prototype.createDialogMarkup = function (titleId) { | ||
| return `<div class="moj-datepicker__dialog__header "> | ||
| <div class="moj-datepicker__dialog__navbuttons"> | ||
| <button class="js-datepicker-prev-year" aria-label="previous year" data-button="button-datepicker-prevyear"> |
There was a problem hiding this comment.
js-datepicker-prev-year needs to be moj- namespaced
aria-label isn't needed if <span class="govuk-visually-hidden">Previous year</span> is included below
I don't think data-button="button-datepicker-prevyear" is used
I wonder if we could/should use secondary GDS buttons as a basis here
| // position the dialog | ||
| this.dialogElement.style.left = `${this.$input.offsetWidth + 16}px` |
There was a problem hiding this comment.
If the button is on the right-hand side of the window, this overflows and stretches the page width (or is inaccessible if in an unscrollable container). We'll need to fix that so it's definitely visible, perhaps by floating it underneath the button in this situation:
| value: params.value, | ||
| autocomplete: "off", | ||
| attributes: { | ||
| "maxlength": "10", |
There was a problem hiding this comment.
GDS advise against creating hard-restrictions for users like this, it should be handled by post-submission validation instead
| </button> | ||
| </div> | ||
|
|
||
| <h2 id="${titleId}" class="moj-datepicker__dialog__title js-datepicker-month-year" aria-live="polite">June 2020</h2> |
There was a problem hiding this comment.
This also needs to namespace the js-datepicker-month-year class
| <caption class="moj-datepicker__dialog__table-caption">You can use the arrow keys to select a date</caption> | ||
| <thead> | ||
| <tr> | ||
| <th scope="col" abbr="Monday">Mo</th> |
There was a problem hiding this comment.
Should probably add aria-label to these to avoid screenreaders announcing "Mo"
| // create cell (day) | ||
| const cell = document.createElement('td') | ||
| const dateButton = document.createElement('button') | ||
| dateButton.dataset.form = 'date-select' |
There was a problem hiding this comment.
I'm not sure what .dataset.form is doing here or if it's needed.
We might need to add aria-label to explain what the button does (e.g. "28th January 2024"), but I'm not sure what state of the art is here
There was a problem hiding this comment.
Some general thoughts:
- The popup doesn't close on clickaway, which could lead to a violation of WCAG 2.2 Focus Not Obscured
- If JavaScript isn't available, it doesn't gracefully degrade as the button is still visible. The button should be added by JavaScript rather than in the template HTML.
- In general, I think the template shouldn't contain form groups, error messages, etc. It should just be
{{ govukInput({attributes: {'data-module': 'moj-date-picker'}}) }}
- In general, I think the template shouldn't contain form groups, error messages, etc. It should just be
- Whilst we haven't back-filled it to existing components, we should make sure this has localisation support for all text on release
Can be initialised in Nunjucks with the `mojDatePicker` macro, or in JavaScript with the `data-module="moj-date-picker"` attribute. Fixes MDS-72
gregtyler
force-pushed
the
MDS-72-add-date-picker
branch
from
f9c79aa
to
a35d795
Compare
github-actions
bot
removed
the
staging:active
Can be initialised in Nunjucks with the
mojDatePickermacro, or in JavaScript with thedata-module="moj-date-picker"attribute.Fixes MDS-72