diff --git a/CHANGELOG.md b/CHANGELOG.md index a754a65cbda..ab8213f372f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,7 @@ **Bug fixes** - Fixed a `EuiDataGrid` sizing bug which didn't account for a horizontal scrollbar ([#5478](https://github.com/elastic/eui/pull/5478)) +- Fixed a `EuiDatePicker` a11y bug where axe-core reported missing ARIA and role attributes ([#5501](https://github.com/elastic/eui/pull/5501)) - Fixed `EuiModalHeaderTitle` to conditionally wrap title strings in an H1 ([#5494](https://github.com/elastic/eui/pull/5494)) **Deprecations** diff --git a/src/components/date_picker/__snapshots__/date_picker.test.tsx.snap b/src/components/date_picker/__snapshots__/date_picker.test.tsx.snap index 6698add1947..c977e76b4bb 100644 --- a/src/components/date_picker/__snapshots__/date_picker.test.tsx.snap +++ b/src/components/date_picker/__snapshots__/date_picker.test.tsx.snap @@ -183,7 +183,7 @@ exports[`EuiDatePicker localization accepts the locale prop 1`] = `
30
1
2
3
4
5
6
@@ -243,42 +250,49 @@ exports[`EuiDatePicker localization accepts the locale prop 1`] = `
7
8
9
10
11
12
13
@@ -289,42 +303,49 @@ exports[`EuiDatePicker localization accepts the locale prop 1`] = `
14
15
16
17
18
19
20
@@ -335,42 +356,49 @@ exports[`EuiDatePicker localization accepts the locale prop 1`] = `
21
22
23
24
25
26
27
@@ -381,42 +409,49 @@ exports[`EuiDatePicker localization accepts the locale prop 1`] = `
28
29
30
31
1
2
3
@@ -551,7 +586,7 @@ exports[`EuiDatePicker localization inherits locale from context 1`] = `
1
2
3
4
5
6
7
@@ -611,42 +653,49 @@ exports[`EuiDatePicker localization inherits locale from context 1`] = `
8
9
10
11
12
13
14
@@ -657,42 +706,49 @@ exports[`EuiDatePicker localization inherits locale from context 1`] = `
15
16
17
18
19
20
21
@@ -703,42 +759,49 @@ exports[`EuiDatePicker localization inherits locale from context 1`] = `
22
23
24
25
26
27
28
@@ -749,42 +812,49 @@ exports[`EuiDatePicker localization inherits locale from context 1`] = `
29
30
31
1
2
3
4
diff --git a/src/components/date_picker/react-datepicker/src/day.js b/src/components/date_picker/react-datepicker/src/day.js index f2f3557480b..8aa35b9f69a 100644 --- a/src/components/date_picker/react-datepicker/src/day.js +++ b/src/components/date_picker/react-datepicker/src/day.js @@ -217,6 +217,7 @@ export default class Day extends React.Component { onClick={this.handleClick} onMouseEnter={this.handleMouseEnter} aria-label={`day-${getDate(this.props.day)}`} + role="option" > {this.props.renderDayContents ? this.props.renderDayContents(getDate(this.props.day)) diff --git a/src/components/date_picker/react-datepicker/src/month.js b/src/components/date_picker/react-datepicker/src/month.js index fdc5bb5b21b..3a9c481a0a1 100644 --- a/src/components/date_picker/react-datepicker/src/month.js +++ b/src/components/date_picker/react-datepicker/src/month.js @@ -253,7 +253,7 @@ export default class Month extends React.Component { className={this.getClassNames()} onMouseLeave={this.handleMouseLeave} role="listbox" - aria-label={"month-" + this.props.day.format("YYYY-MM")} + aria-label={this.props.day.format("MMMM, YYYY")} tabIndex={this.props.accessibleMode ? 0 : -1} onKeyDown={this.onInputKeyDown} onFocus={this.onFocus} diff --git a/src/components/date_picker/react-datepicker/src/time.js b/src/components/date_picker/react-datepicker/src/time.js index 996f16b7f22..9ab7664db66 100644 --- a/src/components/date_picker/react-datepicker/src/time.js +++ b/src/components/date_picker/react-datepicker/src/time.js @@ -374,6 +374,7 @@ export default class Time extends React.Component { onBlur={this.onBlur} >