Fixes #1483 - Replace ariaLabel by ariaLabels to pass all necessary a…

…rias for the component
liferay · Jan 28, 2019 · 10c3537 · 10c3537
1 parent e918ce8
commit 10c3537
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 6 deletions.
diff --git 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 className={classNames} onClick={onClick} type={type}>
+		<button
+			aria-label={ariaLabel}
+			className={classNames}
+			onClick={onClick}
+			type={type}
+		>
 			<Icon spritemap={spritemap} symbol={icon} />
 		</button>
 	);
 }
 
 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
@@ -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({
 		<div className="input-group" id={id} ref={elementRef}>
 			<div className="input-group-item">
 				<InputDate
-					ariaLabel={ariaLabel}
+					ariaLabel={ariaLabels.input}
 					currentTime={currentTime}
 					dateFormat={dateFormat}
 					inputName={inputName}
@@ -161,6 +161,7 @@ function ClayDatePicker({
 					<React.Fragment>
 						<div className="date-picker">
 							<DateNavigation
+								ariaLabels={ariaLabels}
 								currentMonth={currentMonth}
 								months={months}
 								onDotClicked={() => {
@@ -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
@@ -17,6 +17,7 @@ import Select from './Select';
  * @return {React.createElement}
  */
 function DateNavigation({
+	ariaLabels,
 	currentMonth,
 	months,
 	onDotClicked,
@@ -106,6 +107,7 @@ function DateNavigation({
 			</form>
 			<div className="date-picker-navigation">
 				<Button
+					ariaLabel={ariaLabels.buttonPreviousMonth}
 					icon="angle-left"
 					monospaced={true}
 					onClick={handlePreviousMonthClicked}
@@ -114,14 +116,16 @@ function DateNavigation({
 					style="unstyled"
 				/>
 				<Button
-					icon="live"
+					ariaLabel={ariaLabels.buttonDot}
+					icon="simple-circle"
 					monospaced={true}
 					onClick={onDotClicked}
 					size="sm"
 					spritemap={spritemap}
 					style="unstyled"
 				/>
 				<Button
+					ariaLabel={ariaLabels.buttonNextMonth}
 					icon="angle-right"
 					monospaced={true}
 					onClick={handleNextMonthClicked}
@@ -135,6 +139,11 @@ function DateNavigation({
 }
 
 DateNavigation.propTypes = {
+	ariaLabels: PropTypes.shape({
+		buttonDot: PropTypes.string,
+		buttonNextMonth: PropTypes.string,
+		buttonPreviousMonth: PropTypes.string,
+	}),
 	currentMonth: PropTypes.instanceOf(Date).isRequired,
 	months: PropTypes.array,
 	onDotClicked: PropTypes.func,