feat: enable navigation to, selecting & give accessible message for c…

…alendar disabled dates (#1978)

Co-authored-by: Konstantinos Norgias <[email protected]>

.changeset/blue-boats-arrive.md

@@ -0,0 +1,9 @@
+---
+'@lion/ui': patch
+---
+
+[calendar] updates:
+
+- Enables focus to disabled dates to make it more reasonable for screen readers
+- Do not automatically force selection of a valid date
+- Add helper functions to find next/previous/nearest enabled date

docs/components/calendar/use-cases.md

@@ -190,3 +190,42 @@ export const combinedDisabledDates = () => {
   `;
 };
 ```
+
+### Finding enabled dates
+
+The next available date may be multiple days/month in the future/past.
+For that we offer convenient helpers as
+
+- `findNextEnabledDate()`
+- `findPreviousEnabledDate()`
+- `findNearestEnabledDate()`
+
+```js preview-story
+export const findingEnabledDates = () => {
+  function getCalendar(ev) {
+    return ev.target.parentElement.querySelector('.js-calendar');
+  }
+  return html`
+    <style>
+      .demo-calendar {
+        border: 1px solid #adadad;
+        box-shadow: 0 0 16px #ccc;
+        max-width: 500px;
+      }
+    </style>
+    <lion-calendar
+      class="demo-calendar js-calendar"
+      .disableDates=${day => day.getDay() === 6 || day.getDay() === 0}
+    ></lion-calendar>
+    <button @click="${ev => getCalendar(ev).focusDate(getCalendar(ev).findNextEnabledDate())}">
+      focus findNextEnabledDate
+    </button>
+    <button @click="${ev => getCalendar(ev).focusDate(getCalendar(ev).findPreviousEnabledDate())}">
+      focus findPreviousEnabledDate
+    </button>
+    <button @click="${ev => getCalendar(ev).focusDate(getCalendar(ev).findNearestEnabledDate())}">
+      focus findNearestEnabledDate
+    </button>
+  `;
+};
+```

docs/components/input-datepicker/use-cases.md

@@ -6,6 +6,7 @@ import { MinMaxDate, IsDateDisabled } from '@lion/ui/form-core.js';
 import { loadDefaultFeedbackMessages } from '@lion/ui/validate-messages.js';
 import { formatDate } from '@lion/ui/localize.js';
 import '@lion/ui/define/lion-input-datepicker.js';
+loadDefaultFeedbackMessages();
 ```
 
 ## Minimum and maximum date
@@ -35,6 +36,7 @@ export const disableSpecificDates = () => html`
   <lion-input-datepicker
     label="IsDateDisabled"
     help-text="You're not allowed to choose any 15th."
+    .modelValue=${new Date('2023/06/15')}
     .validators=${[new IsDateDisabled(d => d.getDate() === 15)]}
   ></lion-input-datepicker>
 `;