Merge pull request #1138 from WonSong/wosong/carousel

Adds aria-label options for Carousel buttons

Author: AJIXuMuK

src/controls/carousel/Carousel.tsx

@@ -66,6 +66,8 @@ export class Carousel extends React.Component<ICarouselProps, ICarouselState> {
       loadingComponentContainerStyles,
       prevButtonIconName = 'ChevronLeft',
       nextButtonIconName = 'ChevronRight',
+      prevButtonAriaLabel = 'Previous item',
+      nextButtonAriaLabel = 'Next item',
       loadingComponent = <Spinner />,
       pauseOnHover,
       interval,
@@ -88,7 +90,7 @@ export class Carousel extends React.Component<ICarouselProps, ICarouselState> {
             onClick={() => { if (!prevButtonDisabled) { this.onCarouselButtonClicked(false); } }} >
             <IconButton
               className={this.getMergedStyles(this.getButtonStyles(false), prevButtonStyles)}
-              iconProps={{ iconName: prevButtonIconName }}
+              iconProps={{ iconName: prevButtonIconName, ariaLabel: prevButtonAriaLabel }}
               disabled={prevButtonDisabled}
               onClick={() => { this.onCarouselButtonClicked(false); }} />
           </div>
@@ -115,7 +117,7 @@ export class Carousel extends React.Component<ICarouselProps, ICarouselState> {
             onClick={() => { if (!nextButtonDisabled) { this.onCarouselButtonClicked(true); } }}>
             <IconButton
               className={this.getMergedStyles(this.getButtonStyles(true), nextButtonStyles)}
-              iconProps={{ iconName: nextButtonIconName }}
+              iconProps={{ iconName: nextButtonIconName, ariaLabel: nextButtonAriaLabel }}
               disabled={nextButtonDisabled}
               onClick={() => { this.onCarouselButtonClicked(true); }} />
           </div>

src/controls/carousel/ICarouselProps.ts

@@ -122,6 +122,15 @@ export interface ICarouselProps {
    * Name of the icon to be used for NextItem button. Default 'ChevronRight'.
    */
   nextButtonIconName?: string;
+  /**
+   * Aria label of the PreviousItem button. Default 'Previous item'.
+   */
+  prevButtonAriaLabel?: string;
+
+  /**
+   * Aria label of the NextItem button. Default 'Next item'.
+   */
+  nextButtonAriaLabel?: string;
   /**
    * Triggers parent control to provide new element to be displayed. After the method is executed, carousel control switches to processing mode and loadingComponent is displayed.
    */