Skip to content

Commit 7e71b87

Browse files
SupremeyhSupremeyh
authored
[ACC-632][BpkCalendarGrid]: Fix accessibility issue - grid has no accessible name (#3752)
* [ACC-632][BpkCalendarGrid]: Fix accessibility issue - grid has no accessible name * add formatMonth into defaultProps * formatMonth typecheck
1 parent d3dc33e commit 7e71b87

9 files changed

+63
-8
lines changed

‎examples/bpk-component-calendar/examples.js

+1
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,7 @@ const CalendarGridExample = () => (
7070
weekStartsOn={1}
7171
onDateClick={action('Clicked day')}
7272
formatDateFull={formatDateFull}
73+
formatMonth={formatMonth}
7374
DateComponent={BpkCalendarDate}
7475
preventKeyboardFocus
7576
/>

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

+9-2
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import PropTypes from 'prop-types';
2020

2121
import { render, screen } from '@testing-library/react';
2222
import userEvent from '@testing-library/user-event';
23-
import { addMonths, isWeekend } from 'date-fns';
23+
import { addMonths, isWeekend, format } from 'date-fns';
2424

2525
import {
2626
colorMonteverde,
@@ -32,12 +32,15 @@ import { formatDateFull } from '../test-utils';
3232
import BpkCalendarDate from './BpkCalendarDate';
3333
import BpkCalendarGrid from './BpkCalendarGrid';
3434

35+
const formatMonth = (date: Date) => format(date, 'MMMM yyyy');
36+
3537
describe('BpkCalendarGrid', () => {
3638
it('should render correctly with a different "weekStartsOn" attribute', () => {
3739
const { asFragment } = render(
3840
<BpkCalendarGrid
3941
month={new Date('2016-10')}
4042
formatDateFull={formatDateFull}
43+
formatMonth={formatMonth}
4144
DateComponent={BpkCalendarDate}
4245
weekStartsOn={3}
4346
minDate={new Date('2016-01')}
@@ -55,6 +58,7 @@ describe('BpkCalendarGrid', () => {
5558
<BpkCalendarGrid
5659
month={new Date('2016-10')}
5760
formatDateFull={formatDateFull}
61+
formatMonth={formatMonth}
5862
DateComponent={BpkCalendarDate}
5963
weekStartsOn={1}
6064
dateModifiers={modifiers}
@@ -68,7 +72,7 @@ describe('BpkCalendarGrid', () => {
6872
it('should render correctly with a custom date component', () => {
6973
const MyCustomDate = (props: any) => {
7074
const cx = {
71-
backgroundColor: (colorPanjin as string),
75+
backgroundColor: colorPanjin as string,
7276
width: '50%',
7377
height: '50%',
7478
borderRadius: '5rem',
@@ -86,6 +90,7 @@ describe('BpkCalendarGrid', () => {
8690
<BpkCalendarGrid
8791
month={new Date('2016-10')}
8892
formatDateFull={formatDateFull}
93+
formatMonth={formatMonth}
8994
DateComponent={MyCustomDate}
9095
weekStartsOn={1}
9196
minDate={new Date('2016-01')}
@@ -102,6 +107,7 @@ describe('BpkCalendarGrid', () => {
102107
<BpkCalendarGrid
103108
month={new Date('2016-10')}
104109
formatDateFull={formatDateFull}
110+
formatMonth={formatMonth}
105111
DateComponent={BpkCalendarDate}
106112
weekStartsOn={0}
107113
onDateClick={onDateClick}
@@ -125,6 +131,7 @@ describe('BpkCalendarGrid', () => {
125131
<BpkCalendarGrid
126132
month={new Date('2016-10')}
127133
formatDateFull={formatDateFull}
134+
formatMonth={formatMonth}
128135
DateComponent={BpkCalendarDate}
129136
weekStartsOn={0}
130137
minDate={new Date('2016-01')}

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

+14-1
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ import {
2929
getCalendar,
3030
getCalendarNoCustomLabel,
3131
isSameMonth,
32+
format,
3233
} from './date-utils';
3334

3435
import type { DateModifiers, SelectionConfiguration } from './custom-proptypes';
@@ -56,6 +57,11 @@ type DefaultProps = {
5657
minDate: Date;
5758
onDateClick: () => void;
5859
onDateKeyDown: () => void;
60+
/**
61+
* A function to format a human-readable month, for example: "January 2018":
62+
* If you just need to quickly prototype, use the following from [`date-fns`](https://date-fns.org/docs/format#usage)
63+
*/
64+
formatMonth: (month: Date) => string;
5965
preventKeyboardFocus: boolean;
6066
/**
6167
* An object to indicate which configuration of the calendar is being used. Choices are `single` date selection or `range` date selection.
@@ -102,6 +108,7 @@ class BpkCalendarGrid extends Component<Props, State> {
102108
minDate: new Date(),
103109
onDateClick: () => {},
104110
onDateKeyDown: () => {},
111+
formatMonth: (month: Date) => format(month, 'MMMM yyyy'),
105112
preventKeyboardFocus: false,
106113
selectionConfiguration: {
107114
type: CALENDAR_SELECTION_TYPE.single,
@@ -158,6 +165,7 @@ class BpkCalendarGrid extends Component<Props, State> {
158165
dateModifiers,
159166
dateProps,
160167
focusedDate,
168+
formatMonth,
161169
ignoreOutsideDate,
162170
isKeyboardFocusable,
163171
markOutsideDays,
@@ -177,7 +185,12 @@ class BpkCalendarGrid extends Component<Props, State> {
177185
const classNames = getClassName('bpk-calendar-grid', className);
178186

179187
return (
180-
<div className={classNames} aria-hidden={!isKeyboardFocusable} role="grid" >
188+
<div
189+
className={classNames}
190+
aria-hidden={!isKeyboardFocusable}
191+
role="grid"
192+
aria-label={formatMonth(month)}
193+
>
181194
<div role="rowgroup">
182195
{calendarMonthWeeks.map((dates) => (
183196
<BpkCalendarWeek

‎packages/bpk-component-calendar/src/__snapshots__/BpkCalendarContainer-test.tsx.snap

+6
Original file line numberDiff line numberDiff line change
@@ -180,6 +180,7 @@ exports[`BpkCalendarContainer should focus the correct date when \`initiallyFocu
180180
/>
181181
<div
182182
aria-hidden="false"
183+
aria-label="February 2010"
183184
class="bpk-calendar-grid bpk-calendar-grid-transition__grid"
184185
role="grid"
185186
>
@@ -1032,6 +1033,7 @@ exports[`BpkCalendarContainer should focus the correct date when \`initiallyFocu
10321033
</div>
10331034
<div
10341035
aria-hidden="true"
1036+
aria-label="March 2010"
10351037
class="bpk-calendar-grid bpk-calendar-grid-transition__grid"
10361038
role="grid"
10371039
>
@@ -2081,6 +2083,7 @@ exports[`BpkCalendarContainer should render correctly 1`] = `
20812083
/>
20822084
<div
20832085
aria-hidden="false"
2086+
aria-label="February 2010"
20842087
class="bpk-calendar-grid bpk-calendar-grid-transition__grid"
20852088
role="grid"
20862089
>
@@ -2933,6 +2936,7 @@ exports[`BpkCalendarContainer should render correctly 1`] = `
29332936
</div>
29342937
<div
29352938
aria-hidden="true"
2939+
aria-label="March 2010"
29362940
class="bpk-calendar-grid bpk-calendar-grid-transition__grid"
29372941
role="grid"
29382942
>
@@ -3982,6 +3986,7 @@ exports[`BpkCalendarContainer should render correctly in range mode 1`] = `
39823986
/>
39833987
<div
39843988
aria-hidden="false"
3989+
aria-label="February 2010"
39853990
class="bpk-calendar-grid bpk-calendar-grid-transition__grid"
39863991
role="grid"
39873992
>
@@ -4834,6 +4839,7 @@ exports[`BpkCalendarContainer should render correctly in range mode 1`] = `
48344839
</div>
48354840
<div
48364841
aria-hidden="true"
4842+
aria-label="March 2010"
48374843
class="bpk-calendar-grid bpk-calendar-grid-transition__grid"
48384844
role="grid"
48394845
>

‎packages/bpk-component-calendar/src/__snapshots__/BpkCalendarGrid-test.tsx.snap

+4
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ exports[`BpkCalendarGrid should render correctly with "weekDayKey" attribute set
44
<DocumentFragment>
55
<div
66
aria-hidden="false"
7+
aria-label="October 2016"
78
class="bpk-calendar-grid"
89
role="grid"
910
>
@@ -847,6 +848,7 @@ exports[`BpkCalendarGrid should render correctly with a "dateModifiers" attribut
847848
<DocumentFragment>
848849
<div
849850
aria-hidden="false"
851+
aria-label="October 2016"
850852
class="bpk-calendar-grid"
851853
role="grid"
852854
>
@@ -1690,6 +1692,7 @@ exports[`BpkCalendarGrid should render correctly with a custom date component 1`
16901692
<DocumentFragment>
16911693
<div
16921694
aria-hidden="false"
1695+
aria-label="October 2016"
16931696
class="bpk-calendar-grid"
16941697
role="grid"
16951698
>
@@ -2113,6 +2116,7 @@ exports[`BpkCalendarGrid should render correctly with a different "weekStartsOn"
21132116
<DocumentFragment>
21142117
<div
21152118
aria-hidden="false"
2119+
aria-label="October 2016"
21162120
class="bpk-calendar-grid"
21172121
role="grid"
21182122
>

‎packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGrid.tsx

+7-5
Original file line numberDiff line numberDiff line change
@@ -47,14 +47,16 @@ const BpkScrollableCalendarGrid = ({
4747
return (
4848
<div className={classNames}>
4949
<span className={getClassName('bpk-scrollable-calendar-grid__title')}>
50-
<BpkText
51-
tagName="h1"
52-
textStyle={TEXT_STYLES.heading4}
53-
>
50+
<BpkText tagName="h1" textStyle={TEXT_STYLES.heading4}>
5451
{formatMonth(month)}
5552
</BpkText>
5653
</span>
57-
<BpkCalendarGrid month={month} ignoreOutsideDate {...rest} />
54+
<BpkCalendarGrid
55+
month={month}
56+
ignoreOutsideDate
57+
formatMonth={formatMonth}
58+
{...rest}
59+
/>
5860
</div>
5961
);
6062
};

‎packages/bpk-component-scrollable-calendar/src/__snapshots__/BpkScrollableCalendar-test.tsx.snap

+8
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,7 @@ exports[`BpkScrollableCalendar should render correctly 1`] = `
9999
</span>
100100
<div
101101
aria-hidden="false"
102+
aria-label="February 2010"
102103
class="bpk-calendar-grid"
103104
role="grid"
104105
>
@@ -691,6 +692,7 @@ exports[`BpkScrollableCalendar should render correctly 1`] = `
691692
</span>
692693
<div
693694
aria-hidden="false"
695+
aria-label="March 2010"
694696
class="bpk-calendar-grid"
695697
role="grid"
696698
>
@@ -1456,6 +1458,7 @@ exports[`BpkScrollableCalendar should render ranges correctly 1`] = `
14561458
</span>
14571459
<div
14581460
aria-hidden="false"
1461+
aria-label="February 2010"
14591462
class="bpk-calendar-grid"
14601463
role="grid"
14611464
>
@@ -2048,6 +2051,7 @@ exports[`BpkScrollableCalendar should render ranges correctly 1`] = `
20482051
</span>
20492052
<div
20502053
aria-hidden="false"
2054+
aria-label="March 2010"
20512055
class="bpk-calendar-grid"
20522056
role="grid"
20532057
>
@@ -2813,6 +2817,7 @@ exports[`BpkScrollableCalendar should support arbitrary props 1`] = `
28132817
</span>
28142818
<div
28152819
aria-hidden="false"
2820+
aria-label="February 2010"
28162821
class="bpk-calendar-grid"
28172822
role="grid"
28182823
>
@@ -3405,6 +3410,7 @@ exports[`BpkScrollableCalendar should support arbitrary props 1`] = `
34053410
</span>
34063411
<div
34073412
aria-hidden="false"
3413+
aria-label="March 2010"
34083414
class="bpk-calendar-grid"
34093415
role="grid"
34103416
>
@@ -4170,6 +4176,7 @@ exports[`BpkScrollableCalendar should support custom class names 1`] = `
41704176
</span>
41714177
<div
41724178
aria-hidden="false"
4179+
aria-label="February 2010"
41734180
class="bpk-calendar-grid"
41744181
role="grid"
41754182
>
@@ -4762,6 +4769,7 @@ exports[`BpkScrollableCalendar should support custom class names 1`] = `
47624769
</span>
47634770
<div
47644771
aria-hidden="false"
4772+
aria-label="March 2010"
47654773
class="bpk-calendar-grid"
47664774
role="grid"
47674775
>

‎packages/bpk-component-scrollable-calendar/src/__snapshots__/BpkScrollableCalendarGrid-test.tsx.snap

+4
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ exports[`BpkCalendarScrollGrid should render correctly with a "dateModifiers" at
1616
</span>
1717
<div
1818
aria-hidden="false"
19+
aria-label="October 2016"
1920
class="bpk-calendar-grid"
2021
role="grid"
2122
>
@@ -718,6 +719,7 @@ exports[`BpkCalendarScrollGrid should render correctly with a custom date compon
718719
</span>
719720
<div
720721
aria-hidden="false"
722+
aria-label="October 2016"
721723
class="bpk-calendar-grid"
722724
role="grid"
723725
>
@@ -1154,6 +1156,7 @@ exports[`BpkCalendarScrollGrid should render correctly with a different "weekSta
11541156
</span>
11551157
<div
11561158
aria-hidden="false"
1159+
aria-label="October 2016"
11571160
class="bpk-calendar-grid"
11581161
role="grid"
11591162
>
@@ -1816,6 +1819,7 @@ exports[`BpkCalendarScrollGrid should render correctly with no optional props se
18161819
</span>
18171820
<div
18181821
aria-hidden="false"
1822+
aria-label="October 2016"
18191823
class="bpk-calendar-grid"
18201824
role="grid"
18211825
>

0 commit comments

Comments
 (0)