FFE-31 Hide for screenreaders when closed

SpareBank1 · Nov 15, 2016 · cdaf154 · cdaf154
1 parent e6979b4
commit cdaf154
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 4 deletions.
diff --git a/src/base.js b/src/base.js
@@ -6,6 +6,7 @@ export default class Base extends Component {
 
     constructor(props) {
         super(props);
+        this.state = { hidden: false };
         this.close = this.close.bind(this);
     }
 
@@ -14,8 +15,10 @@ export default class Base extends Component {
         const element = this.refs.self;
         element.style.height = `${element.offsetHeight}px`;
         setTimeout(() => {
-            element.style.height = 0;
-            onClose();
+            this.setState({ hidden: true }, () => {
+                element.style.height = 0;
+                onClose();
+            });
         }, 0);
     }
 
@@ -28,11 +31,12 @@ export default class Base extends Component {
             header,
             locale,
         } = this.props;
-
+        const { hidden } = this.state;
         return (
             <div
                 className={`ffe-context-message ffe-context-message--${messageType}`}
                 ref="self"
+                aria-hidden={hidden}
                 style={style}
             >
                 <div className="ffe-context-message-content">

diff --git a/src/test/context-message-test.js b/src/test/context-message-test.js
@@ -56,9 +56,11 @@ describe('Test Base', () => {
         const onClickSpy = sinon.spy();
         wrapper = mount(cloneElement(element, { onClose: onClickSpy }));
         wrapper.find('.ffe-context-message-content__close-button').simulate('click');
+        const component = wrapper.find('.ffe-context-message');
+        expect(component.props()['aria-hidden']).to.be(false);
         setTimeout(() => {
-            const component = wrapper.find('.ffe-context-message');
             expect(component.get(0).style.getPropertyValue('height')).to.be('0px');
+            expect(component.props()['aria-hidden']).to.be(true);
             expect(onClickSpy.calledOnce);
             done();
         }, 100);