Drawer toggle a11y rebase

admin/themes/default/appearance/edit-navigation.php

@@ -16,14 +16,18 @@ class="<?php echo $this->form->getAttrib('class') ?>" >
     . 'in the main navigation. Click and drag the links into the preferred ' 
     . 'display order.'); ?></p>
     <?php echo $this->form->displayNavigationLinks(); ?>
+    <?php echo $this->partial('settings/edit-navigation-link.php', array('template' => true)); ?>
     <?php echo $this->form->getElement(Omeka_Form_Navigation::HIDDEN_ELEMENT_ID); ?>
-        <div class="add-new"><?php echo __('Add a Link to the Navigation'); ?></div>
-        <div class="drawer-contents">
-            <label for="new_nav_link_label"><?php echo __('Label'); ?></label>
-            <input type="text" id="new_nav_link_label" name="new_nav_link_label" />
-            <label for="new_nav_link_uri"><?php echo __('URL'); ?></label>
-            <input type="text" id="new_nav_link_uri" name="new_nav_link_uri" />
-            <a href="" id="new_nav_link_button_link" class="blue button"><?php echo __('Add Link'); ?></a>
+        <div class="add-new" id="add-new-heading"><?php echo __('Add a Link to the Navigation'); ?></div>
+        <div id="add-new-options" class="drawer-contents opened">
+            <div id="new-link-success" class="sr-only flash" style="display: none" aria-live="polite"><?php echo __('New Link Added. Total links: '); ?><span class="link-count"></span></div>
+            <label id="new_nav_link_label_label"><?php echo __('Label'); ?></label>
+            <input type="text" id="new_nav_link_label" aria-labelledby="add-new-heading new_nav_link_label_label" name="new_nav_link_label" />
+            <div class="flash alert" style="display: none;" id="label-required" aria-live="polite"><?php echo __('required field'); ?> <span class="sr-only"><?php echo __('Label'); ?></span></div>
+            <label id="new_nav_link_uri_label"><?php echo __('URL'); ?></label>
+            <input type="text" id="new_nav_link_uri" name="new_nav_link_uri" aria-labelledby="add-new-heading new_nav_link_uri_label" />
+            <div class="flash alert" style="display: none;" id="uri-required" aria-live="polite"><?php echo __('required field'); ?> <span class="sr-only"><?php echo __('URI'); ?></span></div>
+            <button type="button" id="new_nav_link_button_link" class="blue button"><?php echo __('Add Link'); ?></button>
         </div>
     <?php fire_plugin_hook('admin_appearance_navigation_form', array('form' => $form, 'view' => $this)); ?>
 </section>
@@ -47,5 +51,6 @@ class="<?php echo $this->form->getAttrib('class') ?>" >
     Omeka.addReadyCallback(Omeka.Navigation.addNewNavLinkForm);
     Omeka.addReadyCallback(Omeka.Navigation.updateForNewLinks);
     Omeka.addReadyCallback(Omeka.Navigation.setUpFormSubmission);
+    Omeka.manageDrawers('#navigation_main_list', '.main_link');
 </script>
 <?php echo foot(); ?>

admin/themes/default/css/sass/components/_draggables.scss

@@ -15,7 +15,7 @@
 	.sortable-item { 
 		cursor: move;
 
-		&:before {
+		.move.icon:before {
 		    display: inline-block;
 		    font-family: "Font Awesome 5 Free";
             font-weight: 900;
@@ -28,27 +28,8 @@
 			content: "\f0b2";
 			opacity: 0.5;
 			position: relative;
-
-			#exhibit-page-form & {
-				top: 0px;
-			    position: relative;
-			    float: left;
-			}
 	    }
 
-	    > a {
-			max-width: 350px;
-		    display: inline-block;
-		    white-space: nowrap;
-		    overflow: hidden;
-		    text-overflow: ellipsis;
-            line-height: 1.5;
-            vertical-align: top;
-
-            @include screen-xs {
-                max-width: 180px;
-            }
-		}		
 	}
 
 	li {
@@ -63,11 +44,11 @@
     background: $lightgray;
 	box-shadow: 0 0 $spacing-s rgba(0,0,0,0.1);
     border: 1px solid $darkgrayborder;
-    -webkit-border-radius: 2px;
-    -moz-border-radius: 2px;
     border-radius: 2px;
     padding: 15px;
     margin: 0;
+    display: flex;
+    align-items: center;
 
     input {
         margin: 0;
@@ -76,8 +57,11 @@
 
     .action-links {
 	    display: inline-block;
-	    float: right;
 	}
+
+    .action-links li {
+        margin-bottom: 0;
+    }
 }
 
 .ui-sortable-highlight:empty {
@@ -93,15 +77,37 @@
     border-radius: 2px;
 }
 
-.drawer-toggle,
-.delete-element, 
-.undo-delete {
-    float: right;
-    height: $spacing-l;
-    width: $spacing-l;
-    cursor: pointer;
-    text-indent: -9999px;
+.drawer-name {
+    margin-right: auto !important;
+}
+
+.drawer > button {
+    max-width: 350px;
+    display: inline-block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    line-height: 1.5;
+    vertical-align: top;
+    background-color: transparent;
+    padding: 0;
+    border: 0;
+    margin-bottom: 0;
     color: #4C3939;
+
+    @include screen-xs {
+        max-width: 180px;
+    }
+}		
+
+.drawer.deleted .delete-drawer,
+.drawer.deleted .drawer-toggle,
+.drawer .undo-delete {
+    display: none;
+}
+
+.drawer.deleted .undo-delete {
+    display: inline-block;
 }
 
 .deleted.sortable-item,
@@ -117,54 +123,62 @@
     * {
         color: #fff;
     }
+
+    input.drawer-name,
+    select.drawer-name {
+        color: $black;
+    }
+}
+
+.deleted.drawer input.link-status {
+    display: none;
 }
+
 .deleted a:link, 
 .deleted a:visited {
     color: #fff;
     text-shadow: -1px -1px 1px rgba(0,0,0,.5);
 }
-.deleted .drawer { color: #fff; }
 
+.drawer-contents { display: none; }
+
+.drawer-contents.opened:not(.deleted) { display: block; }
 
-.drawer-toggle:after, 
-.delete-element:after, 
-.undo-delete:after {
+.drawer-toggle .icon:after, 
+.delete-drawer .icon:after, 
+.undo-delete .icon:after {
     display: inline-block;
     font-family: "Font Awesome 5 Free";
     font-weight: 900;
     font-size: 16px;
     height: $spacing-l;
     width: $spacing-l;
     text-indent: 0;
-    float: left;
     text-align: center;
 }
-.drawer-toggle:after { content: "\f0da"; }
+.drawer-toggle .icon:after { content: "\f0da"; }
 
-.delete-element:link, .delete-element:active,
-.delete-element:hover, .delete-element:visited,
+.delete-drawer:link, .delete-drawer:active,
+.delete-drawer:hover, .delete-drawer:visited,
 .undo-delete:link, .undo-delete:active,
 .undo-delete:hover, .undo-delete:visited {
     color: #4C3939;
 }
 
-.drawer-toggle.opened:after {
+.drawer.opened .drawer-toggle .icon:after {
     -webkit-transform: rotate(90deg);
     -moz-transform: rotate(90deg);
     -o-transform: rotate(90deg);
     transform: rotate(90deg);
 }
 
-.delete-element { display: inline-block; }
-.delete-element:after { content: "\f00d"; }
-
-.drawer > a.undo-delete,
-.ui-sortable .sortable-item > a.undo-delete { display: none; }
+.delete-drawer { display: inline-block; }
+.delete-drawer .icon:after { content: "\f00d"; }
 
-.undo-delete:after {
+.undo-delete .icon:after {
     content: "\f0e2";
     font-size: 12px;
-    line-height: 2em;
+    line-height: 1;
     color: #fff;
 }
 

admin/themes/default/css/sass/pages/_items.scss

@@ -476,7 +476,7 @@
 	min-width: 150px;
 }
 
-.delete-element {
+.delete-drawer {
     clear: both;
     display: block;
 }
@@ -500,11 +500,4 @@
     border-top: 1px solid #ccc;
     margin-top: 10px;
     padding: 9px 0 10px;
-}
-
-/* Edit Item Type Metadata
-================================================== */
-
-.item-type-metadata .drawer-toggle { display: none; }
-
-.item-type-metadata .sortable-item { cursor: default; }
+}

admin/themes/default/css/sass/pages/_settings.scss

@@ -1,3 +1,7 @@
 #fieldset-site_settings legend {
     @extend .sr-only;
+}
+
+#navigation_form .template {
+    display: none;
 }