From 9a2fdfe55210d68432e497923af8db9e2820f8ad Mon Sep 17 00:00:00 2001
From: Kushagra Gour <chinchang457@gmail.com>
Date: Thu, 14 Mar 2019 00:44:13 +0530
Subject: [PATCH] some a11y improvements. stop saved item pane for tabbing when
 hidden

---
 src/components/Modal.jsx         | 1 +
 src/components/SavedItemPane.jsx | 3 +++
 src/style.css                    | 2 ++
 3 files changed, 6 insertions(+)

diff --git a/src/components/Modal.jsx b/src/components/Modal.jsx
index 101c431..0610b51 100644
--- a/src/components/Modal.jsx
+++ b/src/components/Modal.jsx
@@ -63,6 +63,7 @@ export default class Modal extends Component {
 		return (
 			<Portal into="body">
 				<div
+					role="dialog"
 					class={`${this.props.extraClasses || ''} modal is-modal-visible ${
 						this.props.small ? 'modal--small' : ''
 					}`}
diff --git a/src/components/SavedItemPane.jsx b/src/components/SavedItemPane.jsx
index 2bae8e2..91fbdb3 100644
--- a/src/components/SavedItemPane.jsx
+++ b/src/components/SavedItemPane.jsx
@@ -150,11 +150,14 @@ export default class SavedItemPane extends Component {
 				id="js-saved-items-pane"
 				class={`saved-items-pane ${isOpen ? 'is-open' : ''}`}
 				onKeyDown={this.keyDownHandler.bind(this)}
+				aria-hidden={isOpen}
+				tabIndex={`${isOpen ? 0 : -1}`}
 			>
 				<button
 					onClick={this.onCloseIntent.bind(this)}
 					class="btn  saved-items-pane__close-btn"
 					id="js-saved-items-pane-close-btn"
+					aria-label="Close saved creations pane"
 				>
 					X
 				</button>
diff --git a/src/style.css b/src/style.css
index 46518f9..7f8f59d 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1043,6 +1043,7 @@ body > #demo-frame {
 	width: 450px;
 	padding: 20px 30px;
 	z-index: 6;
+	visibility: hidden; /* prevents tabbing */
 	background-color: var(--color-popup);
 	transition: 0.3s cubic-bezier(1, 0.13, 0.21, 0.87);
 	transition-property: transform;
@@ -1051,6 +1052,7 @@ body > #demo-frame {
 }
 
 .saved-items-pane.is-open {
+	visibility: visible;
 	transition-duration: 0.4s;
 	transform: translateX(0);
 }