fix: Element order for live-region reading

Pearson-Higher-Ed · Feb 16, 2018 · 1167cea · 1167cea
1 parent 443055a
commit 1167cea
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 10 deletions.
diff --git a/src/js/Alert.js b/src/js/Alert.js
@@ -23,12 +23,6 @@ const Alert = ({ index, alertType, handleClose, alertTitle, alertMessage }) => {
 
   return (
     <li className ="pe-alert" id = {`alert-${alertType}-${index}`}>
-      <button className="pe-icon--btn close-title"
-              onClick={() => handleClose(index)}
-              aria-label="Close alert">
-        <Icon name="remove-sm-24" />
-      </button> <br/>
-
       <div className="alert-content-container">
         {alertTypeCheck()}
         <div className={`alert-content${infoCheck}`}>
@@ -38,6 +32,12 @@ const Alert = ({ index, alertType, handleClose, alertTitle, alertMessage }) => {
           <p className="pe-paragraph alert-text">{alertMessage}</p>
         </div>
       </div>
+      <button
+        className="pe-icon--btn close-title"
+        onClick={() => handleClose(index)}
+        aria-label="Close alert">
+        <Icon name="remove-sm-24" />
+      </button>
     </li>
   );
 };

diff --git a/src/scss/component-specific.scss b/src/scss/component-specific.scss
@@ -5,6 +5,7 @@
     margin-top: 32px;
   }
 
+  display: flex;
   position: relative;
   margin-top: 20px;
   list-style: none;
@@ -21,6 +22,7 @@
 }
 
 .alert-content {
+  margin-top: 1em;
   margin-left: 12px;
   padding: 4px 12px 0 0;
 }
@@ -79,16 +81,16 @@ svg {
   width: 0;
 }
 
-.error-svg {
+.alert-content-container .error-svg {
   color: #db0020;
   display: inline;
-  margin-top: 9px;
+  margin-top: 23px;
 }
 
-.success-svg {
+.alert-content-container .success-svg {
   color: #19A5A3;
   display: inline;
-  margin-top: 6px;
+  margin-top: 22px;
 }
 
 .alert-content-container {
@@ -107,6 +109,7 @@ svg {
 
 .close-title {
   float: right;
+  align-self: flex-start;
 }
 
 .transition-enter {