Skip to content

Commit eefe11d

Browse files
jacobdeverajacobdevera
authored
fix: remove derived state from Calendar, add aria-live (#926)
* fix: remove derived state from datepicker * fix: current date displayed * fix: custom date empty * fix: remove dateClick from state * fix: cleanup * fix: form message aria-live * fix: snapshots
1 parent 483b102 commit eefe11d

File tree

4 files changed

+44
-58
lines changed

4 files changed

+44
-58
lines changed

‎src/Calendar/Calendar.js‎

Lines changed: 33 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -13,16 +13,29 @@ class Calendar extends Component {
1313
constructor(props) {
1414
super(props);
1515

16+
let currentDateDisplayed = moment().startOf('day');
17+
let selectedDateOrDates = !props.enableRangeSelection ? moment({ year: 0 }) : [];
18+
19+
const customDateEmpty = (!props.customDate || (props.customDate && props.customDate.length === 0));
20+
21+
if (!customDateEmpty) {
22+
selectedDateOrDates = props.customDate;
23+
currentDateDisplayed = props.customDate;
24+
25+
if (props.customDate.length) {
26+
currentDateDisplayed = props.customDate[0];
27+
}
28+
}
29+
1630
this.state = {
1731
todayDate: moment().startOf('day'),
1832
gridBoundaryContext: null,
19-
refocusGrid: this.props.focusOnInit,
20-
currentDateDisplayed: moment().startOf('day'),
21-
arrSelectedDates: [],
22-
selectedDate: moment({ year: 0 }),
33+
refocusGrid: props.focusOnInit,
34+
currentDateDisplayed: currentDateDisplayed,
35+
arrSelectedDates: props.enableRangeSelection ? selectedDateOrDates : [],
36+
selectedDate: !props.enableRangeSelection ? selectedDateOrDates : null,
2337
showMonths: false,
24-
showYears: false,
25-
dateClick: false
38+
showYears: false
2639
};
2740

2841
this.tableRef = React.createRef();
@@ -35,36 +48,6 @@ class Calendar extends Component {
3548
this.gridManager = new GridManager(this.getGridOptions());
3649
}
3750

38-
// sync the selected date of the calendar with the date picker
39-
static getDerivedStateFromProps(updatedPropsParent, previousStates) {
40-
const { customDate, enableRangeSelection } = updatedPropsParent;
41-
42-
if (typeof customDate === 'undefined') {
43-
return null;
44-
}
45-
46-
if (!previousStates.dateClick) {
47-
if (typeof enableRangeSelection !== 'undefined') {
48-
if (customDate !== previousStates.arrSelectedDates) {
49-
if (!customDate || !customDate.length) {
50-
// reset calendar state when date picker input is empty and did not click on a date
51-
return ({ currentDateDisplayed: moment().startOf('day'), arrSelectedDates: [], selectedDate: moment({ year: 0 }) });
52-
}
53-
// update calendar state with date picker input
54-
return ({ currentDateDisplayed: customDate[0], arrSelectedDates: customDate, selectedDate: moment({ year: 0 }) });
55-
}
56-
} else if (customDate !== previousStates.currentDateDisplayed) {
57-
if (!customDate) {
58-
// reset calendar state when date picker input is empty and did not click on a date
59-
return ({ currentDateDisplayed: moment().startOf('day'), selectedDate: moment({ year: 0 }) });
60-
}
61-
// update calendar state with date picker input
62-
return ({ currentDateDisplayed: customDate, selectedDate: customDate });
63-
}
64-
}
65-
return ({ dateClick: false });
66-
}
67-
6851
componentDidUpdate = (prevProps, prevState) => {
6952
// if switching picker view or switching to a new month or year, reconstruct grid
7053
const newView = this.state.showMonths !== prevState.showMonths || this.state.showYears !== prevState.showYears;
@@ -117,7 +100,7 @@ class Calendar extends Component {
117100
firstFocusedCoordinates = { row: firstFocusedRow, col: firstFocusedCol };
118101
}
119102

120-
this.setState({ gridBoundaryContext: null, refocusGrid: false, dateClick: true });
103+
this.setState({ gridBoundaryContext: null, refocusGrid: false });
121104

122105
return {
123106
gridNode: this.tableRef.current,
@@ -136,8 +119,7 @@ class Calendar extends Component {
136119
showMonths = () => {
137120
this.setState({
138121
showMonths: !this.state.showMonths,
139-
showYears: false,
140-
dateClick: true
122+
showYears: false
141123
});
142124
}
143125

@@ -169,8 +151,7 @@ class Calendar extends Component {
169151
showYears = () => {
170152
this.setState({
171153
showMonths: false,
172-
showYears: !this.state.showYears,
173-
dateClick: true
154+
showYears: !this.state.showYears
174155
});
175156
}
176157

@@ -181,8 +162,7 @@ class Calendar extends Component {
181162

182163
this.setState({
183164
currentDateDisplayed: newDate,
184-
showMonths: false,
185-
dateClick: true
165+
showMonths: false
186166
});
187167
}
188168

@@ -191,15 +171,14 @@ class Calendar extends Component {
191171

192172
this.setState({
193173
currentDateDisplayed: newDate,
194-
showYears: false,
195-
dateClick: true
174+
showYears: false
196175
});
197176
}
198177

199178
onPassGridBoundary = ({ currentCell, directionX, directionY }) => {
200179
if (!this.state.showMonths && !this.state.showYears) {
201180
currentCell.element.setAttribute('tabindex', -1);
202-
this.setState({ gridBoundaryContext: { currentCell, directionX, directionY }, dateClick: true });
181+
this.setState({ gridBoundaryContext: { currentCell, directionX, directionY } });
203182

204183
if (directionX === -1 || directionY === -1) {
205184
this.handlePrevious();
@@ -222,8 +201,7 @@ class Calendar extends Component {
222201
newDate.date(newDate.daysInMonth() < focusedDate ? newDate.daysInMonth() : focusedDate);
223202
this.setState({
224203
currentDateDisplayed: newDate,
225-
refocusGrid: true,
226-
dateClick: true
204+
refocusGrid: true
227205
});
228206
break;
229207
case 'page down':
@@ -232,8 +210,7 @@ class Calendar extends Component {
232210
newDate.date(newDate.daysInMonth() < focusedDate ? newDate.daysInMonth() : focusedDate);
233211
this.setState({
234212
currentDateDisplayed: newDate,
235-
refocusGrid: true,
236-
dateClick: true
213+
refocusGrid: true
237214
});
238215
break;
239216
default:
@@ -364,21 +341,21 @@ class Calendar extends Component {
364341
const { currentDateDisplayed } = this.state;
365342
if (this.state.showYears) {
366343
const newDate = moment(currentDateDisplayed).add(12, 'year');
367-
this.setState({ currentDateDisplayed: newDate, dateClick: true });
344+
this.setState({ currentDateDisplayed: newDate });
368345
} else {
369346
const newDate = moment(currentDateDisplayed).add(1, 'month');
370-
this.setState({ currentDateDisplayed: newDate, dateClick: true });
347+
this.setState({ currentDateDisplayed: newDate });
371348
}
372349
}
373350

374351
handlePrevious = () => {
375352
const { currentDateDisplayed } = this.state;
376353
if (this.state.showYears) {
377354
const newDate = moment(currentDateDisplayed).subtract(12, 'year');
378-
this.setState({ currentDateDisplayed: newDate, dateClick: true });
355+
this.setState({ currentDateDisplayed: newDate });
379356
} else {
380357
const newDate = moment(currentDateDisplayed).subtract(1, 'month');
381-
this.setState({ currentDateDisplayed: newDate, dateClick: true });
358+
this.setState({ currentDateDisplayed: newDate });
382359
}
383360
}
384361

@@ -398,8 +375,7 @@ class Calendar extends Component {
398375
this.setState({
399376
currentDateDisplayed: day,
400377
selectedDate: day,
401-
arrSelectedDates: selectedDates,
402-
dateClick: true
378+
arrSelectedDates: selectedDates
403379
}, function() {
404380
if (isRangeEnabled) {
405381
this.props.onChange(selectedDates);
@@ -430,7 +406,7 @@ class Calendar extends Component {
430406

431407
return (
432408
<header className='fd-calendar__header'>
433-
<div aria-live='polite' className='fd-calendar__navigation'>
409+
<div aria-live='assertive' className='fd-calendar__navigation'>
434410
<div className='fd-calendar__action'>
435411
<Button
436412
aria-label={previousButtonLabel}

‎src/Forms/_FormMessage.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,10 @@ const FormMessage = React.forwardRef(({ type, children, className, disableStyles
2222
return (
2323
<div
2424
{...props}
25+
aria-live='assertive'
2526
className={formMessageClasses}
26-
ref={ref}>
27+
ref={ref}
28+
role='alert'>
2729
{children}
2830
</div>
2931
);

‎src/Forms/__snapshots__/FormMessage.test.js.snap‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@
22

33
exports[`<FormMessage /> create form message 1`] = `
44
<div
5+
aria-live="assertive"
56
className="fd-form-message fd-form-message--information"
7+
role="alert"
68
>
79
Pellentesque metus lacus commodo eget justo ut rutrum varius nunc
810
</div>

‎src/Select/__snapshots__/Select.test.js.snap‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -145,7 +145,9 @@ exports[`<Select /> create Select component 4`] = `
145145
/>
146146
</div>
147147
<div
148+
aria-live="assertive"
148149
className="fd-form-message fd-form-message--warning"
150+
role="alert"
149151
>
150152
Test validation state
151153
</div>
@@ -188,7 +190,9 @@ exports[`<Select /> create Select component 5`] = `
188190
/>
189191
</div>
190192
<div
193+
aria-live="assertive"
191194
className="fd-form-message fd-form-message--error"
195+
role="alert"
192196
>
193197
Test validation state
194198
</div>
@@ -231,7 +235,9 @@ exports[`<Select /> create Select component 6`] = `
231235
/>
232236
</div>
233237
<div
238+
aria-live="assertive"
234239
className="fd-form-message fd-form-message--information"
240+
role="alert"
235241
>
236242
Test validation state
237243
</div>

0 commit comments

Comments
 (0)