v4.1.0

* Button is now properly disabled while 'isLoading' is true
* Added attribute aria-busy=true while 'isLoading' is true
* Update changelog and readme

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## v4.1.0
+
+* Fix truly disabling button while `isLoading` (CSS `pointer-events:none` was an obscure and inefficient way to achieve this)
+* `isLoading` will also set the attribute `aria-busy=true` on the button 
+
 ## v4.0.0
 
 Package has been renamed to ffe-buttons-react (plural). Package

README.md

@@ -62,6 +62,7 @@ types.
 ### Loading state
 
 For long-running operations you may want to put the button in a loading state.
+While in this state, the button will be disabled and given the attribute `aria-busy=true`
 
 ```javascript
 <PrimaryButton isLoading onClick={clickHandler}>...</PrimaryButton>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ffe-buttons-react",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "description": "React implementation of ffe-buttons",
   "main": "lib/index.js",
   "scripts": {

src/Button.js

@@ -22,9 +22,10 @@ export default function Button(props) {
     return (
         <button
             aria-disabled={disableButton}
+            aria-busy={isLoading}
             className={`ffe-${buttonType}-button ${loadingClass} ${className}`}
             data-action={action}
-            disabled={disableButton}
+            disabled={disableButton || isLoading}
             id={id}
             onClick={onClick}
             style={style}

src/Button.test.js

@@ -143,6 +143,14 @@ describe('Button components:', () => {
         expect(onClick.calledOnce).to.true;
     });
 
+    it('isLoading prop disables the button and marks it as aria-busy', () => {
+        const wrapper = shallow(<Button isLoading>Hello</Button>);
+        const button = wrapper.find('button');
+        expect(button.prop('disabled')).to.be.true;
+        expect(button.prop('aria-busy')).to.be.true;
+        expect(button.prop('aria-disabled')).to.be.undefined;
+    });
+
     it('Set isTabbable={true} on Button does nothing', () => {
         const wrapper = shallow(<Button onClick={() => ({})} isTabbable>Hello</Button>);
         const button = wrapper.find('button');