changes with aria

cms/static/sass/views/_unit.scss

@@ -13,6 +13,10 @@ body.course.unit {
   }
   //end problem selector reqs
 
+
+  // Unit Page Main Column
+  // ====================
+
   .main-column {
     clear: both;
     float: left;
@@ -31,6 +35,9 @@ body.course.unit {
 
   .unit-body {
 
+    // Unit Page Name
+    // ====================
+
     .unit-name-input {
       padding: 20px 40px;
 
@@ -73,6 +80,10 @@ body.course.unit {
       letter-spacing: 1px;
       text-transform: uppercase;
     }
+    
+    // Component List Meta
+    // ====================
+    // TODO: clean up organization of this page, to many levels/duplication
 
     .components {
 
@@ -81,8 +92,6 @@ body.course.unit {
         z-index: 10;
         margin: 20px 40px;
 
-
-
         .title {
           margin: 0 0 15px 0;
           color: $mediumGrey;
@@ -91,6 +100,9 @@ body.course.unit {
           }
         }
 
+        // New Components
+        // ====================
+
         &.new-component-item {
           margin: 20px 0px;
           border-top: 1px solid $mediumGrey;
@@ -355,6 +367,9 @@ body.course.unit {
       }
     }
 
+    // Component Drag and Drop, Non-Edit Module Rendering, Styling
+    // ====================
+
     .component {
       border: 1px solid $lightBluishGrey2;
       border-radius: 3px;
@@ -410,6 +425,9 @@ body.course.unit {
       }
     }
 
+    // Component Editing
+    // ====================
+
     .wrapper-component-editor {
       z-index: 9999;
       position: relative;
@@ -423,9 +441,11 @@ body.course.unit {
       padding: 20px;
       border-radius: 2px 2px 0 0;
 
-      .component-edit-modes {
+
+      // Edit Menu (Component Name, Mode-Editor, Mode-Settings)
+
+      .component-edit-menu {
         @include box-sizing(border-box);
-        list-style: none;
         position: absolute;
         width: 100%;
         padding: 15px;
@@ -434,8 +454,33 @@ body.course.unit {
         border-bottom: 1px solid $lightBluishGrey2;
         background: $lightGrey;
 
+        //Component Name
+        h3 {
+          //TO-DO ?
+        }
+
+        //Nav-Edit Modes
+        .nav-edit-modes {
+          //TODO
+
+          .tab {
+            display: inline;
+          }
+        }
+      }
+
+      // Module Editors
+      .editor-wrapper{
+        //TO-DO ?
       }
 
+      // Module Settings
+      .settings-wrapper{
+        //TO-DO ?
+      }
+
+      //OLD Meta-data Styling
+      //TO-DO port over old styling
       .metadata_edit {
         margin-bottom: 20px;
         font-size: 13px;
@@ -469,6 +514,9 @@ body.course.unit {
     }
   }
 
+  // Unit Page Sidebar  
+  // ====================
+
   .unit-settings {
     .window-contents {
       padding: 10px 20px;
@@ -669,7 +717,9 @@ body.course.unit {
   }
 }
 
-// editing units from courseware
+// Editing Units from Courseware  
+// ====================
+
 body.unit {
 
   .component {

cms/templates/component.html

 <div class="wrapper wrapper-component-editor">
 	<div class="component-editor">
-	  <div id="component-edit-menu">
-	  	<ul class="edit-modes-list">
-	  		<li id="edit-modes-tab1" class="tab" aria-controls="panel1" aria-selected="true" role="tab" tabindex="0">
-	  			<a href="#" class="button cancel-button">Editor</a>
-	  		</li>
-	  		<li id="edit-modes-tab2" class="tab" aria-controls="panel2" aria-selected="false" role="tab" tabindex="-1">
-	  			<a href="#" class="button cancel-button">Settings </a>
-	  		</li>
-	  	</ul>
-	  </div>
-	  <div class=""
-	  <div class="module-editor">
-	    ${editor}
-	  </div>
-	  <div class="row module-actions">
-	  	<a href="#" class="save-button">Save</a>
-		<a href="#" class="cancel-button">Cancel</a>	  	
-	  </div>
-	</div>
+  		<div id="component-edit-menu">
+  			<h3 class="component-name">Name of Component</h3>
+  			<!--should this be a menu instead of OL -->
+  	  		<ol class="nav-edit-modes">
+  	  			<li id="editor-mode" class="tab" aria-controls="editor-tab" aria-selected="true" role="tab" tabindex="0">
+  	  				<a href="#" class="button cancel-button">Editor</a>
+	  			</li>
+	  			<li id="settings-mode" class="tab" aria-controls="settings-tab" aria-selected="false" role="tab" tabindex="-1">
+	  				<a href="#" class="button cancel-button">Settings </a>
+	  			</li>
+	  		</ol>
+		</div> <!-- Editor Header -->
+
+		<div class="component-edit-modes">
+			<div class="editor-wrapper" id="editor-tab">
+				${editor}
+			</div> <!-- Editor Wrapper-->
+
+			<table class="settings-wrapper" id="settings-tab">
+		  		<!-- eventually, import settings from separate file -->
+		  		<tr class="settings-row settings-header">
+		  			<th class="settings-label">Setting Label</th>
+		  			<th class="settings-input">Setting Input</th>
+		  			<th class="settings-help">Setting Help</th>
+		  		</tr>
+		  		<tr class="settings-row settings-header">
+		  			<td class="settings-label">Example Dropdown</td>
+		  			<td class="settings-input">Input/Form stuff to be children here. </td>
+		  			<td class="settings-help">Example Numerical Input</td>
+		  		</tr>	  	
+		  	</div> <!-- Settings Wrapper-->
+		</div>
+		<div class="row module-actions">
+	  		<a href="#" class="save-button">Save</a>
+	  		<a href="#" class="cancel-button">Cancel</a>	  	
+		</div> <!-- Module Actions-->
+  </div>
 </div>
 
 <div class="component-actions">