Add aria-disabled element to previous and next buttons (#80)

react-component · May 17, 2017 · b482418 · b482418
1 parent 3e21cc8
commit b482418
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 0 deletions.
diff --git a/src/Pagination.jsx b/src/Pagination.jsx
@@ -212,6 +212,7 @@ class Pagination extends React.Component {
             title={props.showTitle ? locale.prev_page : null}
             onClick={this._prev}
             className={`${this._hasPrev() ? '' : `${prefixCls}-disabled`} ${prefixCls}-prev`}
+            aria-disabled={!this._hasPrev()}
           >
             <a />
           </li>
@@ -233,6 +234,7 @@ class Pagination extends React.Component {
             title={props.showTitle ? locale.next_page : null}
             onClick={this._next}
             className={`${this._hasNext() ? '' : `${prefixCls}-disabled`} ${prefixCls}-next`}
+            aria-disabled={!this._hasNext()}
           >
             <a />
           </li>
@@ -376,6 +378,7 @@ class Pagination extends React.Component {
           title={props.showTitle ? locale.prev_page : null}
           onClick={this._prev}
           className={`${this._hasPrev() ? '' : `${prefixCls}-disabled`} ${prefixCls}-prev`}
+          aria-disabled={!this._hasPrev()}
         >
           <a />
         </li>
@@ -384,6 +387,7 @@ class Pagination extends React.Component {
           title={props.showTitle ? locale.next_page : null}
           onClick={this._next}
           className={`${this._hasNext() ? '' : `${prefixCls}-disabled`} ${prefixCls}-next`}
+          aria-disabled={!this._hasNext()}
         >
           <a />
         </li>

diff --git a/tests/Pagination.spec.js b/tests/Pagination.spec.js
@@ -64,6 +64,7 @@ describe('Uncontrolled Pagination', () => {
     );
     expect(TestUtils.isDOMComponent(prevButton)).to.be(true);
     expect(prevButton.className).to.contain('rc-pagination-disabled');
+    expect(prevButton.getAttribute('aria-disabled')).to.equal('true');
   });
 
   it('should hightlight current page and not highlight other page', shouldHighlightRight);
@@ -83,6 +84,7 @@ describe('Uncontrolled Pagination', () => {
 
     expect(TestUtils.isDOMComponent(nextButton)).to.be(true);
     expect(nextButton.className).to.not.contain('rc-pagination-disabled');
+    expect(nextButton.getAttribute('aria-disabled')).to.equal('false');
   });
 
   it('should response mouse click right', (done) => {