Add aria-label prop for navigation button (wojtekmaj#538)

navwire · Aug 19, 2021 · c1cbe07 · c1cbe07
1 parent b2f9d9b
commit c1cbe07
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -108,6 +108,7 @@ Displays a complete, interactive calendar.
 |minDate|Minimum date that the user can select. Periods partially overlapped by minDate will also be selectable, although React-Calendar will ensure that no earlier date is selected.|n/a|Date: `new Date()`|
 |minDetail|The least detailed view that the user shall see. Can be `"month"`, `"year"`, `"decade"` or `"century"`.|`"century"`|`"decade"`|
 |navigationAriaLabel|`aria-label` attribute of a label rendered on calendar navigation bar.|n/a|`"Go up"`|
+|navigationAriaLive|`aria-live` attribute of a label rendered on calendar navigation bar.|`"off"`|`"polite"`|
 |navigationLabel|Content of a label rendered on calendar navigation bar.|(default label)|``({ date, label, locale, view }) => `Current view: ${view}, date: ${date.toLocaleDateString(locale)}` ``|
 |nextAriaLabel|`aria-label` attribute of the "next" button on the navigation pane.|n/a|`"Next"`|
 |nextLabel|Content of the "next" button on the navigation pane. Setting the value explicitly to null will hide the icon.|`"›"`|<ul><li>String: `"›"`</li><li>React element: `<NextIcon />`</li></ul>|

diff --git a/src/Calendar.jsx b/src/Calendar.jsx
@@ -569,6 +569,7 @@ export default class Calendar extends Component {
       maxDate,
       minDate,
       navigationAriaLabel,
+      navigationAriaLive,
       navigationLabel,
       next2AriaLabel,
       next2Label,
@@ -591,6 +592,7 @@ export default class Calendar extends Component {
         maxDate={maxDate}
         minDate={minDate}
         navigationAriaLabel={navigationAriaLabel}
+        navigationAriaLive={navigationAriaLive}
         navigationLabel={navigationLabel}
         next2AriaLabel={next2AriaLabel}
         next2Label={next2Label}

diff --git a/src/Calendar/Navigation.jsx b/src/Calendar/Navigation.jsx
@@ -29,6 +29,7 @@ export default function Navigation({
   maxDate,
   minDate,
   navigationAriaLabel = '',
+  navigationAriaLive = 'off',
   navigationLabel,
   next2AriaLabel = '',
   next2Label = '»',
@@ -127,6 +128,7 @@ export default function Navigation({
     return (
       <button
         aria-label={navigationAriaLabel}
+        aria-live={navigationAriaLive}
         className={labelClassName}
         disabled={!drillUpAvailable}
         onClick={drillUp}
@@ -212,6 +214,7 @@ Navigation.propTypes = {
   maxDate: PropTypes.instanceOf(Date),
   minDate: PropTypes.instanceOf(Date),
   navigationAriaLabel: PropTypes.string,
+  navigationAriaLive: PropTypes.string,
   navigationLabel: PropTypes.func,
   next2AriaLabel: PropTypes.string,
   next2Label: PropTypes.node,