feat(Pagination): Add aria-attributes

components/Pagination/Pagination.jsx

@@ -8,7 +8,7 @@ import Dots from './sub-components/Dots';
 
 import pagination from './utils/pagination';
 
-const Wrapper = styled.div`
+const Wrapper = styled.nav`
   align-items: center;
   display: flex;
   justify-content: center;
@@ -18,15 +18,19 @@ const Wrapper = styled.div`
 const generateDotsKey = index => `dots-${index}`;
 
 const Pagination = ({
+  ariaLabel,
   activePage,
+  activePageAriaLabel,
   nextButtonText,
+  pageAriaLabel,
   prevButtonText,
   onClick,
   totalPages,
   ...props
 }) => (
-  <Wrapper {...props}>
+  <Wrapper aria-label={ariaLabel} {...props}>
     <ActionButton
+      aria-disabled={activePage === 1}
       disabled={activePage === 1}
       onClick={() => onClick(activePage - 1)}
     >
@@ -39,6 +43,10 @@ const Pagination = ({
 
       return (
         <Page
+          aria-current={activePage === page ? 'page' : false}
+          aria-label={`${
+            activePage === page ? `${activePageAriaLabel}, ` : ''
+          }${pageAriaLabel} ${page}`}
           key={page}
           active={activePage === page}
           onClick={() => onClick(page)}
@@ -49,6 +57,7 @@ const Pagination = ({
     })}
 
     <ActionButton
+      aria-disabled={activePage === totalPages}
       disabled={activePage === totalPages}
       onClick={() => onClick(activePage + 1)}
     >
@@ -58,18 +67,32 @@ const Pagination = ({
 );
 
 Pagination.propTypes = {
+  /** Set the aria-label html attribute to the root element of pagination */
+  ariaLabel: PropTypes.string,
+  /** Set the current page */
   activePage: PropTypes.number,
+  /** aria-label attribute to active page button. */
+  activePageAriaLabel: PropTypes.string,
+  /** Set the number of pages to be displayed. */
   totalPages: PropTypes.number.isRequired,
+  /** Next page button text */
   nextButtonText: PropTypes.string,
+  /** Page number button aria-label html attribute */
+  pageAriaLabel: PropTypes.string,
+  /** Previous page button text */
   prevButtonText: PropTypes.string,
+  /** Function to be called when prev, next or page button is clicked, it receives the next page number as an argument. */
   onClick: PropTypes.func,
 };
 
 Pagination.defaultProps = {
+  ariaLabel: 'pagination',
   activePage: 1,
+  activePageAriaLabel: 'Current Page',
   nextButtonText: 'Next',
+  pageAriaLabel: 'Page',
   prevButtonText: 'Previous',
-  onClick: () => {},
+  onClick: nextPage => {}, // eslint-disable-line
 };
 
 export default Pagination;