[BpkCalendar] Accessibility roles (#3699)

[BpkCalendar] Accessibility roles (#3699)

* feat: make Calendar conform to grid for easier navigation
* chore: remove commented code
* fix: remove unused prop
* fix failing tests since disabled dates are no longer aria-hidden

Author: gert-janvercauteren

packages/bpk-component-calendar/src/BpkCalendarContainer-test.tsx

@@ -111,7 +111,7 @@ describe('BpkCalendarContainer', () => {
 
     // dates in March are outside current month
     const outsideDate = screen.getByRole('button', {
-      name: /1st March 2010/i,
+      name: /Monday, 1st March/i,
     });
     waitFor(() =>
       expect(outsideDate.classList.contains('bpk-calendar-date--outside')).toBe(
@@ -125,7 +125,7 @@ describe('BpkCalendarContainer', () => {
 
     // dates in March are within current month
     const currentDate = screen.getByRole('button', {
-      name: /1st March 2010/i,
+      name: /Monday, 1st March/i,
     });
     waitFor(() =>
       expect(currentDate.classList.contains('bpk-calendar-date--outside')).toBe(
@@ -300,20 +300,20 @@ describe('BpkCalendarContainer', () => {
 
     await fireEvent.keyDown(getDate(originStr), { key: 'ArrowRight' });
     expect(
-      getDate(/2nd March/).classList.contains('bpk-calendar-date--focused'),
+      getDate(/Tuesday, 2nd March/).classList.contains('bpk-calendar-date--focused'),
     ).toBe(true);
 
-    await fireEvent.keyDown(getDate(/2nd March/i), { key: 'ArrowDown' });
+    await fireEvent.keyDown(getDate(/Tuesday, 2nd March/i), { key: 'ArrowDown' });
     expect(
-      getDate(/9th March/i).classList.contains('bpk-calendar-date--focused'),
+      getDate(/Tuesday, 9th March/i).classList.contains('bpk-calendar-date--focused'),
     ).toBe(true);
 
-    await fireEvent.keyDown(getDate(/9th March/i), { key: 'ArrowLeft' });
+    await fireEvent.keyDown(getDate(/Tuesday, 9th March/i), { key: 'ArrowLeft' });
     expect(
-      getDate(/8th March/i).classList.contains('bpk-calendar-date--focused'),
+      getDate(/Monday, 8th March/i).classList.contains('bpk-calendar-date--focused'),
     ).toBe(true);
 
-    await fireEvent.keyDown(getDate(/8th March/i), { key: 'ArrowUp' });
+    await fireEvent.keyDown(getDate(/Monday, 8th March/i), { key: 'ArrowUp' });
     expect(
       getDate(originStr).classList.contains('bpk-calendar-date--focused'),
     ).toBe(true);
@@ -378,7 +378,7 @@ describe('BpkCalendarContainer', () => {
 
     await fireEvent.keyDown(getDate(/28th February/i), { key: 'ArrowRight' });
     expect(
-      getDate(/1st March/i).classList.contains('bpk-calendar-date--focused'),
+      getDate(/Monday, 1st March/i).classList.contains('bpk-calendar-date--focused'),
     ).toBe(true);
     expect(onMonthChange.mock.calls.length).toEqual(1);
     expect(onMonthChange.mock.calls[0][1]).toEqual({

packages/bpk-component-calendar/src/BpkCalendarDate.tsx

@@ -193,7 +193,6 @@ class BpkCalendarDate extends PureComponent<Props> {
         type="button"
         style={style}
         className={classNames.join(' ')}
-        aria-hidden={isBlocked}
         aria-label={`${date.getDate()}`}
         disabled={isBlocked}
         tabIndex={isKeyboardFocusable && isFocused ? 0 : -1}

packages/bpk-component-calendar/src/BpkCalendarGrid.tsx

@@ -177,8 +177,8 @@ class BpkCalendarGrid extends Component<Props, State> {
     const classNames = getClassName('bpk-calendar-grid', className);
 
     return (
-      <div className={classNames} aria-hidden={!isKeyboardFocusable}>
-        <div>
+      <div className={classNames} aria-hidden={!isKeyboardFocusable} role="grid" >
+        <div role="rowgroup">
           {calendarMonthWeeks.map((dates) => (
             <BpkCalendarWeek
               key={dates[0].isoLabel}

packages/bpk-component-calendar/src/BpkCalendarWeek.tsx

@@ -385,7 +385,7 @@ class BpkCalendarWeek extends Component<Props> {
     }
 
     return (
-      <div className={getClassName('bpk-calendar-week')}>
+      <div className={getClassName('bpk-calendar-week')} role="row">
         {this.props.dates.map((date) => {
           const isBlocked =
             minDate && maxDate
@@ -404,7 +404,6 @@ class BpkCalendarWeek extends Component<Props> {
             <DateContainer
               className={cellClassName}
               isEmptyCell={!isSameMonth(date.val, month) && ignoreOutsideDate!}
-              isBlocked={isBlocked}
               key={date.val.getDate()}
               selectionType={dateSelectionType}
             >
@@ -436,7 +435,6 @@ class BpkCalendarWeek extends Component<Props> {
 type DateContainerProps = {
   children: ReactElement;
   className?: string | null;
-  isBlocked: boolean;
   isEmptyCell: boolean;
   selectionType: string;
 };
@@ -446,7 +444,6 @@ type DateContainerProps = {
 const DateContainer = ({
   children,
   className = null,
-  isBlocked,
   isEmptyCell,
   selectionType,
 }: DateContainerProps) => {
@@ -457,7 +454,7 @@ const DateContainer = ({
   );
 
   return (
-    <div aria-hidden={isEmptyCell || isBlocked} className={classNames}>
+    <div aria-hidden={isEmptyCell} className={classNames} role="gridcell">
       {children}
     </div>
   );