add isDateDisabled prop and styling

[mayank99]

Changes

• Added disabled text styling for aria-disabled and removed extra hover interactions.
• Added isDateDisabled prop which takes a function which must return a boolean. If true, the date will have aria-disabled='true' and will also disable click/Enter handlers.
• Previous/next month and year buttons will be automatically disabled when the last or first date in it is disabled.

Testing

Tested in storybook. Will test more permutations in playgrounds tomorrow.

Added new unit test, visual tests.

Docs

Added changeset, new story and jsdoc for new prop.

[gretanausedaite]

Code looks good

Is it possible to make screen reader announce that it's a date?
Also, saying "selected" when date is not selected.

[mayank99]

Is it possible to make screen reader announce that it's a date? Also, saying "selected" when date is not selected.

That is outside the scope for this PR. I think the pattern was copied from APG which also only announces the current date.

Also it doesn't say "selected" for me. When using VoiceOver, make sure you're testing in Safari.

For the purposes of this PR, all that matters is that disabled state is conveyed, which is indeed working correctly. VoiceOver announces it as "dimmed".

[mayank99]

Is it possible to make screen reader announce that it's a date?

That is outside the scope for this PR. I think the pattern was copied from APG which also only announces the current date.

Actually this is not true. APG uses a table, which first announces the name of the column ("Tuesday") and subsequently only announces the day when you're in the same column.

@veekeys Do you remember the research/sources used for our datepicker?

[veekeys]

APG

Are you asking only about the a11y part? I want to say that I did check some of the attributes from W3 as usual, but the DOM structure is different so not all of those were applied. Date picker was never tested thoughtfully with the screen readers AFAIK.

[mayank99]

We'll need to test all our components in at least NVDA and VoiceOver. I've created a separate issue to track that: #1148

---

I think this PR should be good to merge now. I've tested visuals, mouse and keyboard behavior for a few different permutations in the vite playground. Here's the code if anyone else feels like testing:

Disable all dates before today

import * as React from 'react';
import { DatePicker } from '@itwin/itwinui-react';

let today = new Date();
today = new Date(today.getFullYear(), today.getMonth(), today.getDate());

const App = () => {
  const [dateValue, setDateValue] = React.useState<Date>(today);
  return (
    <>
      <DatePicker
        date={dateValue}
        onChange={(date) => setDateValue(date)}
        isDateDisabled={(date) => date < today}
      />
      <pre>{dateValue?.toLocaleDateString()}</pre>
    </>
  );
};

export default App;

Two date pickers (range) with connected min/max values

import * as React from 'react';
import { Button, DatePicker } from '@itwin/itwinui-react';

let today = new Date();
today = new Date(today.getFullYear(), today.getMonth(), today.getDate());

const App = () => {
  const [fromValue, setFromValue] = React.useState<Date>();
  const [toValue, setToValue] = React.useState<Date>();

  return (
    <>
      <DatePicker
        date={fromValue}
        onChange={(date) => setFromValue(date)}
        isDateDisabled={(date) => (toValue ? date > toValue : false)}
      />
      <DatePicker
        date={toValue || fromValue}
        onChange={(date) => setToValue(date)}
        isDateDisabled={(date) => (fromValue ? date < fromValue : false)}
      />

      <pre>
        {fromValue?.toLocaleDateString()} - {toValue?.toLocaleDateString()}
      </pre>
      <Button
        onClick={() => {
          setFromValue(undefined);
          setToValue(undefined);
        }}
      >
        Clear
      </Button>
    </>
  );
};

export default App;

Only allow next two weeks

import * as React from 'react';
import { DatePicker } from '@itwin/itwinui-react';

const today = new Date();

const App = () => {
  const [dateValue, setDateValue] = React.useState<Date>(today);
  return (
    <>
      <DatePicker
        date={dateValue}
        onChange={(date) => setDateValue(date)}
        isDateDisabled={(date) => {
          if (date < today) {
            return true;
          }

          const daysDiff =
            Math.abs(
              Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()) -
                Date.UTC(
                  today.getFullYear(),
                  today.getMonth(),
                  today.getDate(),
                ),
            ) /
            (1000 * 60 * 60 * 24);
          if (daysDiff > 14) {
            return true;
          }

          return false;
        }}
      />
      <pre>{dateValue?.toLocaleDateString()}</pre>
    </>
  );
};

export default App;