@innovaccer/design-system 2.5.0 → 2.7.0-0

package/core/common.type.tsx

@@ -0,0 +1,22 @@
+import { OverlayFooterProps } from '@/components/molecules/overlayFooter';
+
+export type AccentAppearance =
+  | 'primary'
+  | 'secondary'
+  | 'alert'
+  | 'warning'
+  | 'success'
+  | 'accent1'
+  | 'accent2'
+  | 'accent3'
+  | 'accent4';
+
+export type HeadingAppearance = 'default' | 'subtle' | 'disabled' | 'white';
+export type MessageAppearance = 'default' | 'alert' | 'info' | 'success' | 'warning';
+export type FileStatus = 'uploading' | 'completed' | 'error';
+export type FooterOptions = {
+  actions: OverlayFooterProps['actions'];
+};
+export type AutoComplete = 'on' | 'off';
+export type NumberRange = [number, number];
+export type ChangeEvent = React.ChangeEvent<HTMLInputElement>;

package/core/components/atoms/_chip/__tests__/__snapshots__/_chip.test.tsx.snap

@@ -44,7 +44,7 @@ exports[`Chip component
         events_round
       </i>
       <span
-        class="Text Text--default Text--regular"
+        class="Text Text--link Text--regular"
         data-test="DesignSystem-GenericChip--Text"
       >
         ChipLabel
@@ -91,14 +91,14 @@ exports[`Chip component
       data-test="DesignSystem-GenericChip--GenericChipWrapper"
     >
       <i
-        class="material-icons material-icons-round Icon Icon--disabled Chip-icon Chip-icon--left"
+        class="material-icons material-icons-round Icon Icon--info Chip-icon Chip-icon--left"
         data-test="DesignSystem-GenericChip--Icon"
         style="font-size: 16px; width: 16px;"
       >
         events_round
       </i>
       <span
-        class="Text Text--disabled Text--regular"
+        class="Text Text--link Text--regular"
         data-test="DesignSystem-GenericChip--Text"
       >
         ChipLabel
@@ -118,7 +118,7 @@ exports[`Chip component
       data-test="DesignSystem-GenericChip--GenericChipWrapper"
     >
       <i
-        class="material-icons material-icons-round Icon Icon--default Chip-icon Chip-icon--left"
+        class="material-icons material-icons-round Icon Chip-icon Chip-icon--left"
         data-test="DesignSystem-GenericChip--Icon"
         style="font-size: 16px; width: 16px;"
       >
@@ -131,9 +131,11 @@ exports[`Chip component
         ChipLabel
       </span>
       <i
-        class="material-icons material-icons-round Icon Icon--subtle Chip-icon Chip-icon--right cursor-pointer"
+        class="material-icons material-icons-round Icon Chip-icon Chip-icon--right cursor-pointer"
         data-test="DesignSystem-GenericChip--clearButton"
+        role="button"
         style="font-size: 16px; width: 16px;"
+        tabindex="0"
       >
         clear_round
       </i>
@@ -159,7 +161,7 @@ exports[`Chip component
         events_round
       </i>
       <span
-        class="Text Text--default Text--regular"
+        class="Text Text--link Text--regular"
         data-test="DesignSystem-GenericChip--Text"
       >
         ChipLabel
@@ -167,7 +169,9 @@ exports[`Chip component
       <i
         class="material-icons material-icons-round Icon Icon--info Chip-icon Chip-icon--right cursor-pointer"
         data-test="DesignSystem-GenericChip--clearButton"
+        role="button"
         style="font-size: 16px; width: 16px;"
+        tabindex="0"
       >
         clear_round
       </i>
@@ -201,7 +205,9 @@ exports[`Chip component
       <i
         class="material-icons material-icons-round Icon Icon--disabled Chip-icon Chip-icon--right"
         data-test="DesignSystem-GenericChip--clearButton"
+        role="button"
         style="font-size: 16px; width: 16px;"
+        tabindex="0"
       >
         clear_round
       </i>
@@ -220,22 +226,24 @@ exports[`Chip component
       data-test="DesignSystem-GenericChip--GenericChipWrapper"
     >
       <i
-        class="material-icons material-icons-round Icon Icon--disabled Chip-icon Chip-icon--left"
+        class="material-icons material-icons-round Icon Icon--info Chip-icon Chip-icon--left"
         data-test="DesignSystem-GenericChip--Icon"
         style="font-size: 16px; width: 16px;"
       >
         events_round
       </i>
       <span
-        class="Text Text--disabled Text--regular"
+        class="Text Text--link Text--regular"
         data-test="DesignSystem-GenericChip--Text"
       >
         ChipLabel
       </span>
       <i
-        class="material-icons material-icons-round Icon Icon--disabled Chip-icon Chip-icon--right"
+        class="material-icons material-icons-round Icon Icon--info Chip-icon Chip-icon--right"
         data-test="DesignSystem-GenericChip--clearButton"
+        role="button"
         style="font-size: 16px; width: 16px;"
+        tabindex="0"
       >
         clear_round
       </i>

package/core/components/atoms/_chip/index.tsx

@@ -4,6 +4,7 @@ import Icon from '@/components/atoms/icon';
 import Text from '@/components/atoms/text';
 import { Name } from '../chip/Chip';
 import { BaseProps, extractBaseProps } from '@/utils/types';
+import { IconProps, TextProps } from '@/index.type';
 
 export interface GenericChipProps extends BaseProps {
   label: string;
@@ -37,7 +38,22 @@ export const GenericChip = (props: GenericChipProps) => {
     if (onClick) onClick();
   };
 
+  const iconAppearance = classNames({
+    ['disabled']: disabled && !selected,
+    ['info']: selected,
+    ['subtle']: !disabled && !selected && !clearButton && !icon,
+    ['default']: !disabled && !selected && !clearButton && icon,
+  }) as IconProps['appearance'];
+
+  const textAppearance = classNames({
+    ['disabled']: disabled && !selected,
+    ['link']: selected,
+    ['default']: !disabled && !selected,
+  }) as TextProps['appearance'];
+
   return (
+    // TODO(a11y)
+    // eslint-disable-next-line
     <div
       data-test="DesignSystem-GenericChip--GenericChipWrapper"
       {...baseProps}
@@ -48,18 +64,18 @@ export const GenericChip = (props: GenericChipProps) => {
         <Icon
           data-test="DesignSystem-GenericChip--Icon"
           name={icon}
-          appearance={disabled ? 'disabled' : selected ? 'info' : 'default'}
+          appearance={iconAppearance}
           className={iconClass('left')}
         />
       )}
-      <Text data-test="DesignSystem-GenericChip--Text" appearance={disabled ? 'disabled' : 'default'}>
+      <Text data-test="DesignSystem-GenericChip--Text" appearance={textAppearance}>
         {label}
       </Text>
       {clearButton && (
         <Icon
           data-test="DesignSystem-GenericChip--clearButton"
           name="clear"
-          appearance={disabled ? 'disabled' : selected ? 'info' : 'subtle'}
+          appearance={iconAppearance}
           className={iconClass('right')}
           onClick={onCloseHandler}
         />

package/core/components/atoms/avatar/Avatar.tsx

@@ -3,25 +3,15 @@ import classNames from 'classnames';
 import { Text, Tooltip, Icon } from '@/index';
 import { BaseProps, extractBaseProps } from '@/utils/types';
 import { TooltipProps } from '@/index.type';
+import { AccentAppearance } from '@/common.type';
 
-export type Appearance =
-  | 'primary'
-  | 'secondary'
-  | 'alert'
-  | 'warning'
-  | 'success'
-  | 'accent1'
-  | 'accent2'
-  | 'accent3'
-  | 'accent4';
-
-export type Size = 'regular' | 'tiny';
+export type AvatarSize = 'regular' | 'tiny';
 
 export interface AvatarProps extends BaseProps {
   /**
    * Color of the `Avatar`
    */
-  appearance?: Appearance;
+  appearance?: AccentAppearance;
   /**
    * **Only first 2 characters are rendered (SOON TO BE DEPRECATED)**
    */
@@ -45,7 +35,7 @@ export interface AvatarProps extends BaseProps {
   /**
    * Determines size of `Avatar`
    */
-  size: Size;
+  size: AvatarSize;
 }
 
 const initialsLength = 2;

package/core/components/atoms/avatar/__stories__/variants/Appearance.story.tsx

@@ -1,12 +1,13 @@
 import * as React from 'react';
-import Avatar, { Appearance } from '../../Avatar';
+import Avatar from '../../Avatar';
 import Text from '@/components/atoms/text';
+import { AccentAppearance } from '@/common.type';
 
 // CSF format story
 export const appearance = () => {
   const weight = 'strong';
 
-  const appearances: Appearance[] = [
+  const appearances: AccentAppearance[] = [
     'primary',
     'secondary',
     'alert',

package/core/components/atoms/avatar/__tests__/Avatar.test.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { render } from '@testing-library/react';
-import Avatar, { AvatarProps as Props, Appearance, Size } from '../Avatar';
+import Avatar, { AvatarProps as Props, AvatarSize } from '../Avatar';
+import { AccentAppearance } from '@/common.type';
 import { testHelper, filterUndefined, valueHelper, testMessageHelper } from '@/utils/testHelper';
 
-const appearances: Appearance[] = [
+const appearances: AccentAppearance[] = [
   'primary',
   'alert',
   'warning',
@@ -14,7 +15,7 @@ const appearances: Appearance[] = [
   'accent4',
 ];
 
-const sizes: Size[] = ['regular', 'tiny'];
+const sizes: AvatarSize[] = ['regular', 'tiny'];
 
 describe('Avatar component', () => {
   const mapper = {
@@ -52,7 +53,11 @@ describe('Avatar component', () => {
 
 describe('Avatar component', () => {
   it('renders initials when firstName,lastName,children are given', () => {
-    const { getByTestId } = render(<Avatar firstName="Design" lastName="System" children="Hey" />);
+    const { getByTestId } = render(
+      <Avatar firstName="Design" lastName="System">
+        Hey
+      </Avatar>
+    );
     expect(getByTestId('DesignSystem-Avatar').textContent).toMatch('He');
   });
 
@@ -67,7 +72,7 @@ describe('Avatar component', () => {
   });
 
   it('renders initials when only children is given', () => {
-    const { getByTestId } = render(<Avatar children="Design System" />);
+    const { getByTestId } = render(<Avatar>Design System</Avatar>);
     expect(getByTestId('DesignSystem-Avatar').textContent).toMatch('De');
   });
 
@@ -84,7 +89,7 @@ describe('Avatar component', () => {
 
 describe('Avatar component tagName', () => {
   it('renders tagName', () => {
-    const { getByTestId } = render(<Avatar children="Design System" />);
+    const { getByTestId } = render(<Avatar>Design System</Avatar>);
     expect(getByTestId('DesignSystem-Avatar').tagName).toMatch('SPAN');
   });
 });
@@ -99,7 +104,7 @@ describe('Avatar Component with overwrite class', () => {
 describe('Avatar component with prop:appearance', () => {
   appearances.forEach((color) => {
     it(`should have the Avatar--${color} class when appearance=${color} `, () => {
-      const { getByTestId } = render(<Avatar children="Design" appearance={color} />);
+      const { getByTestId } = render(<Avatar appearance={color}>Design</Avatar>);
       expect(getByTestId('DesignSystem-Avatar')).toHaveClass(`Avatar--${color}`);
     });
   });
@@ -107,12 +112,12 @@ describe('Avatar component with prop:appearance', () => {
 
 describe('Avatar component with prop:size', () => {
   it('should have the Avatar--regular class when size is regular', () => {
-    const { getByTestId } = render(<Avatar children="Design" />);
+    const { getByTestId } = render(<Avatar>Design</Avatar>);
     expect(getByTestId('DesignSystem-Avatar')).toHaveClass('Avatar--regular');
   });
 
   it('should have the Avatar--tiny class when size is tiny', () => {
-    const { getByTestId } = render(<Avatar children="Design" size={'tiny'} />);
+    const { getByTestId } = render(<Avatar size={'tiny'}>Design</Avatar>);
     expect(getByTestId('DesignSystem-Avatar')).toHaveClass('Avatar--tiny');
   });
 });

package/core/components/atoms/avatarGroup/AvatarGroup.tsx

@@ -4,15 +4,13 @@ import { BaseProps, extractBaseProps } from '@/utils/types';
 import { Avatar, Popover, Text } from '@/index';
 import { AvatarProps, PopoverProps } from '@/index.type';
 
-export type Size = 'regular' | 'tiny';
-
 interface AvatarData extends Record<string, any> {
   firstName?: string;
   lastName?: string;
   appearance?: AvatarProps['appearance'];
 }
 
-interface PopperProps {
+interface AvatarPopperProps {
   popperRenderer?: (names: AvatarData[]) => JSX.Element;
   appendToBody?: PopoverProps['appendToBody'];
   dark?: PopoverProps['dark'];
@@ -48,7 +46,7 @@ export interface AvatarGroupProps extends BaseProps {
    * **Popover for +x avatar**
    *
    * <pre className="DocPage-codeBlock">
-   * PopperProps: {
+   * AvatarPopperProps: {
    *   popperRenderer?: (names: AvatarData[]) => JSX.Element;
    *   appendToBody?: boolean;
    *   dark?: boolean;
@@ -70,7 +68,7 @@ export interface AvatarGroupProps extends BaseProps {
    * </pre>
    *
    */
-  popoverOptions: PopperProps;
+  popoverOptions: AvatarPopperProps;
   /**
    * Position to place the tooltip on `Avatars` shown before +x
    */

package/core/components/atoms/badge/Badge.tsx

@@ -1,23 +1,13 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { BaseProps, extractBaseProps } from '@/utils/types';
-
-export type Appearance =
-  | 'primary'
-  | 'secondary'
-  | 'alert'
-  | 'warning'
-  | 'success'
-  | 'accent1'
-  | 'accent2'
-  | 'accent3'
-  | 'accent4';
+import { AccentAppearance } from '@/common.type';
 
 export interface BadgeProps extends BaseProps {
   /*
    * Color of the `Badge`
    */
-  appearance: Appearance;
+  appearance: AccentAppearance;
   /**
    * Makes `Badge` appearance subtle
    */

package/core/components/atoms/badge/__tests__/Badge.test.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { render } from '@testing-library/react';
-import Badge, { BadgeProps as Props, Appearance } from '../Badge';
+import Badge, { BadgeProps as Props } from '../Badge';
 import { testHelper, filterUndefined, valueHelper, testMessageHelper } from '@/utils/testHelper';
+import { AccentAppearance } from '@/common.type';
 
-const appearances: Appearance[] = [
+const appearances: AccentAppearance[] = [
   'primary',
   'alert',
   'warning',
@@ -35,14 +36,20 @@ describe('Badge component', () => {
 
 describe('Badge component', () => {
   it('renders children', () => {
-    const { getByTestId } = render(<Badge children="Badge" subtle={true} appearance="secondary" />);
+    const { getByTestId } = render(
+      <Badge subtle={true} appearance="secondary">
+        Badge
+      </Badge>
+    );
     expect(getByTestId('DesignSystem-Badge').textContent).toMatch('Badge');
   });
 
   describe('Badge Component with overwrite class', () => {
     it('overwrite badge class', () => {
       const { getByTestId } = render(
-        <Badge className="BadgeClass" children="Design" subtle={true} appearance="secondary" />
+        <Badge className="BadgeClass" subtle={true} appearance="secondary">
+          Design
+        </Badge>
       );
       expect(getByTestId('DesignSystem-Badge')).toHaveClass('Badge BadgeClass');
     });
@@ -50,7 +57,11 @@ describe('Badge component', () => {
 
   describe('Badge component tagName', () => {
     it('should have span element', () => {
-      const { getByTestId } = render(<Badge children="Design" subtle={true} appearance="secondary" />);
+      const { getByTestId } = render(
+        <Badge subtle={true} appearance="secondary">
+          Design
+        </Badge>
+      );
       expect(getByTestId('DesignSystem-Badge').tagName).toMatch('SPAN');
     });
   });
@@ -58,7 +69,7 @@ describe('Badge component', () => {
   describe('Badge component with prop:appearance', () => {
     appearances.forEach((appearance) => {
       it(`should have the Badge--${appearance} class when appearance=${appearance} `, () => {
-        const { getByTestId } = render(<Badge children="Design" appearance={appearance} />);
+        const { getByTestId } = render(<Badge appearance={appearance}>Design</Badge>);
         expect(getByTestId('DesignSystem-Badge')).toHaveClass(`Badge--${appearance}`);
       });
     });
@@ -67,7 +78,11 @@ describe('Badge component', () => {
   describe('Badge component with prop:subtle', () => {
     appearances.forEach((appearance) => {
       it(`should have the Badge--subtle-${appearance} class when appearance=${appearance} `, () => {
-        const { getByTestId } = render(<Badge children="Design" appearance={appearance} subtle={true} />);
+        const { getByTestId } = render(
+          <Badge appearance={appearance} subtle={true}>
+            Design
+          </Badge>
+        );
         expect(getByTestId('DesignSystem-Badge')).toHaveClass(`Badge--subtle-${appearance}`);
       });
     });

package/core/components/atoms/badge/_stories_/variants/Appearance.story.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { text } from '@storybook/addon-knobs';
-import Badge, { Appearance } from '../../Badge';
+import Badge from '../../Badge';
 import Text from '@/components/atoms/text';
+import { AccentAppearance } from '@/common.type';
 
 // CSF format story
 export const appearance = () => {
@@ -10,7 +11,7 @@ export const appearance = () => {
 
   const children = text('children', 'Badge');
 
-  const appearances: Appearance[] = [
+  const appearances: AccentAppearance[] = [
     'primary',
     'secondary',
     'alert',

package/core/components/atoms/badge/_stories_/variants/Subtle.story.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { text } from '@storybook/addon-knobs';
-import Badge, { Appearance } from '../../Badge';
+import Badge from '../../Badge';
 import Text from '@/components/atoms/text';
+import { AccentAppearance } from '@/common.type';
 
 // CSF format story
 export const subtle = () => {
@@ -10,7 +11,7 @@ export const subtle = () => {
 
   const children = text('children', 'Badge');
 
-  const appearances: Appearance[] = [
+  const appearances: AccentAppearance[] = [
     'primary',
     'secondary',
     'alert',

package/core/components/atoms/button/Button.tsx

@@ -4,9 +4,9 @@ import classNames from 'classnames';
 import { BaseProps, BaseHtmlProps } from '@/utils/types';
 
 export type ButtonType = 'button' | 'submit' | 'reset';
-export type Appearance = 'basic' | 'primary' | 'success' | 'alert' | 'transparent';
-export type Size = 'tiny' | 'regular' | 'large';
-export type Alignment = 'left' | 'right';
+export type ButtonAppearance = 'basic' | 'primary' | 'success' | 'alert' | 'transparent';
+export type ButtonSize = 'tiny' | 'regular' | 'large';
+export type ButtonAlignment = 'left' | 'right';
 
 export interface ButtonProps extends BaseProps, BaseHtmlProps<HTMLButtonElement> {
   /**
@@ -17,12 +17,15 @@ export interface ButtonProps extends BaseProps, BaseHtmlProps<HTMLButtonElement>
    * The size of `Button`
    * @default "regular"
    */
-  size?: Size;
+  size?: ButtonSize;
   /**
    * Color of the `Button`
+   *
+   * **'success' has been deprecated and all success button types will now be changed to primary button automatically**
+   *
    * @default "basic"
    */
-  appearance?: Appearance;
+  appearance?: ButtonAppearance;
   /**
    * Disables the `Button`, making it unable to be pressed
    */
@@ -54,7 +57,7 @@ export interface ButtonProps extends BaseProps, BaseHtmlProps<HTMLButtonElement>
    * Align icon left or right
    * @default "left"
    */
-  iconAlign?: Alignment;
+  iconAlign?: ButtonAlignment;
   /**
    * Determines if size of icon is large
    *
@@ -88,7 +91,7 @@ export interface ButtonProps extends BaseProps, BaseHtmlProps<HTMLButtonElement>
   onMouseLeave?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 }
 
-const sizeMapping: Record<Size, number> = {
+const sizeMapping: Record<ButtonSize, number> = {
   tiny: 12,
   regular: 16,
   large: 20,

package/core/components/atoms/button/__stories__/Alert.story.tsx

@@ -1,7 +1,11 @@
 import * as React from 'react';
 import Button from '../Button';
 
-export const AlertButton = () => <Button appearance="alert">Delete</Button>;
+export const AlertButton = () => (
+  <Button appearance="alert" aria-label="Delete">
+    Delete
+  </Button>
+);
 
 export default {
   title: 'Components/Button/Alert Button',
@@ -11,6 +15,9 @@ export default {
       docPage: {
         title: 'Button',
         description: 'Delete button',
+        a11yProps: ` 
+        **aria-label:** Add \`aria-label='Delete'\` to describe the action of button 
+         `,
       },
     },
   },

package/core/components/atoms/button/__stories__/Cancel.story.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import Button from '../Button';
 
 export const BasicButton = () => (
-  <Button appearance="basic" size="regular">
+  <Button appearance="basic" size="regular" aria-label="Cancel">
     Cancel
   </Button>
 );
@@ -15,6 +15,9 @@ export default {
       docPage: {
         title: 'Button',
         description: 'Basic Button',
+        a11yProps: ` 
+        **aria-label:** Add \`aria-label='Cancel'\` to describe the action of button 
+         `,
       },
     },
   },

package/core/components/atoms/button/__stories__/IconButtonGroup.story.tsx

@@ -3,9 +3,9 @@ import Button from '@/components/atoms/button';
 
 export const iconButtonGroup = () => (
   <div className="d-inline-flex">
-    <Button size="tiny" icon="content_copy " className="mr-2" tooltip="Copy" />
-    <Button size="tiny" icon="content_paste" className="mr-2" tooltip="Paste" />
-    <Button size="tiny" icon="delete" tooltip="Delete" />
+    <Button size="tiny" icon="content_copy" aria-label="Copy" className="mr-4" tooltip="Copy" />
+    <Button size="tiny" icon="content_paste" aria-label="Paste" className="mr-4" tooltip="Paste" />
+    <Button size="tiny" icon="delete" aria-label="Delete" tooltip="Delete" />
   </div>
 );
 
@@ -17,6 +17,15 @@ export default {
       docPage: {
         title: 'Button',
         description: 'A pattern using tiny icon buttons in a group.',
+        a11yProps: ` 
+        **aria-label:**
+        <br/> 
+        - Add \`aria-label='Copy'\` on button with *copy* icon to describe the action of button.
+        <br/>
+        - Add \`aria-label='Paste'\` on button with *paste* icon to describe the action of button.
+        <br/>
+        - Add \`aria-label='Delete'\` on button with *delete* icon to describe the action of button.
+        `,
       },
     },
   },

package/core/components/atoms/button/__stories__/IconButtonSecondary.story.tsx

@@ -1,7 +1,9 @@
 import * as React from 'react';
 import Button from '../Button';
 
-export const iconButton = () => <Button appearance="basic" icon="keyboard_arrow_right" tooltip="Next in rank" />;
+export const iconButton = () => (
+  <Button appearance="basic" icon="keyboard_arrow_right" aria-label="Next in rank" tooltip="Next in rank" />
+);
 
 export default {
   title: 'Components/Button/Icon Button',
@@ -11,6 +13,9 @@ export default {
       docPage: {
         title: 'Button',
         description: 'Secondary button with icon.',
+        a11yProps: ` 
+        **aria-label:** Add \`aria-label='Next in rank'\` to describe the action of button. 
+         `,
       },
     },
   },

package/core/components/atoms/button/__stories__/IconLeftSecondary.story.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import Button from '../Button';
 
 export const iconLeftButton = () => (
-  <Button icon="get_app" iconAlign="left">
+  <Button icon="get_app" iconAlign="left" aria-label="Download">
     Download
   </Button>
 );
@@ -15,6 +15,9 @@ export default {
       docPage: {
         title: 'Button',
         description: 'Secondary button with left aligned icon.',
+        a11yProps: ` 
+        **aria-label:** Add \`aria-label='Download'\` on button to indicate its purpose. 
+         `,
       },
     },
   },

package/core/components/atoms/button/__stories__/IconRightSecondary.story.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import Button from '../Button';
 
 export const iconRightButton = () => (
-  <Button icon="arrow_forward" iconAlign="right">
+  <Button icon="arrow_forward" iconAlign="right" aria-label="Next in rank">
     Next in rank
   </Button>
 );
@@ -15,6 +15,9 @@ export default {
       docPage: {
         title: 'Button',
         description: 'Secondary button with right aligned icon.',
+        a11yProps: ` 
+        **aria-label:** Add \`aria-label='Next in rank'\` to describe the action of button. 
+         `,
       },
     },
   },