diff --git a/packages/clay-date-picker/src/Button.js b/packages/clay-date-picker/src/Button.js index 2f3593f542..f764c37261 100644 --- a/packages/clay-date-picker/src/Button.js +++ b/packages/clay-date-picker/src/Button.js @@ -15,6 +15,7 @@ import Icon from './Icon'; * @return {React.createElement} */ function Button({ + ariaLabel, className, icon, monospaced, @@ -31,13 +32,19 @@ function Button({ }); return ( - ); } Button.propTypes = { + ariaLabel: PropTypes.string, className: PropTypes.string, icon: PropTypes.string, monospaced: PropTypes.bool, diff --git a/packages/clay-date-picker/src/ClayDatePicker.js b/packages/clay-date-picker/src/ClayDatePicker.js index 110cd9d847..49846b36ad 100644 --- a/packages/clay-date-picker/src/ClayDatePicker.js +++ b/packages/clay-date-picker/src/ClayDatePicker.js @@ -25,7 +25,7 @@ import WeekdayHeader from './WeekdayHeader'; * @return {React.createElement} */ function ClayDatePicker({ - ariaLabel, + ariaLabels, dateFormat, expanded: initialExpanded, firstDayOfWeek, @@ -130,7 +130,7 @@ function ClayDatePicker({
{ @@ -218,10 +219,15 @@ function ClayDatePicker({ ClayDatePicker.propTypes = { /** - * Aria label attribute for the button element. + * Labels for the aria attributes * @default undefined */ - ariaLabel: PropTypes.string, + ariaLabels: PropTypes.shape({ + buttonDot: PropTypes.string, + buttonNextMonth: PropTypes.string, + buttonPreviousMonth: PropTypes.string, + input: PropTypes.string, + }), /** * Set the format of how the date will appear in the input element. @@ -337,6 +343,11 @@ ClayDatePicker.propTypes = { const DateNow = new Date(); ClayDatePicker.defaultProps = { + ariaLabels: { + buttonDot: 'Select current date', + buttonNextMonth: 'Select the next month', + buttonPreviousMonth: 'Select the previous month', + }, dateFormat: 'YYYY-MM-DD', expanded: false, firstDayOfWeek: 0, diff --git a/packages/clay-date-picker/src/DateNavigation.js b/packages/clay-date-picker/src/DateNavigation.js index f89afdbba5..82ae9981d8 100644 --- a/packages/clay-date-picker/src/DateNavigation.js +++ b/packages/clay-date-picker/src/DateNavigation.js @@ -17,6 +17,7 @@ import Select from './Select'; * @return {React.createElement} */ function DateNavigation({ + ariaLabels, currentMonth, months, onDotClicked, @@ -106,6 +107,7 @@ function DateNavigation({