Merge remote-tracking branch 'origin/544-accessibility-fixes-create-i…

…d' into accessibility-rollup01
CDLUC3 · Jan 6, 2025 · eca4aeb · eca4aeb
2 parents a04019f + 43f98d2
commit eca4aeb
Show file tree

Hide file tree

Showing 12 changed files with 343 additions and 120 deletions.
diff --git a/dev/scss/_create.scss b/dev/scss/_create.scss
@@ -25,6 +25,37 @@ $form-element-end-group-spacing: 32px;
 
 }
 
+/* START special styles to imitate bootstrap so that item order is correct for screen readers :-/ */
+
+/* Custom row for the layout */
+.bs-create__row {
+  position: relative;
+}
+
+/* Custom class for main content */
+.bs-create__main {
+  width: 66.66%;
+  float: left;
+}
+
+/* Custom class for sidebar */
+.bs-create__sidebox {
+	position: absolute;
+	padding-top: 28px;
+	padding-right: 30px;
+  	right: 0;
+	top: 0;
+  	width: 31.2%;
+}
+
+/* Clear the floated/absolute positioning below the row */
+.bs-fieldset-stacked {
+  width: 100%;
+  float: left;
+}
+
+/* END special styles to imitate bootstrap so that item order is correct for screen readers :-/ */
+
 .create__radio-button {
 	margin: 0 0 $form-element-group-spacing 45px;
 }

diff --git a/dev/scss/_tab.scss b/dev/scss/_tab.scss
@@ -26,10 +26,10 @@
 .tab__label {
   margin: 0 10px 0 0;
   padding: 0.5em 10px;
-	border: 1px solid $design-light-gray-border-color;
-	background: $design-white-color;
-	color: $design-primary-color;
-	font-size: 1.2em;
+  border: 1px solid $design-light-gray-border-color;
+  background: $design-white-color;
+  color: $design-primary-color;
+  font-size: 1.2em;
   font-weight: normal;
 	cursor: pointer;
 	z-index: 1;
@@ -58,3 +58,90 @@
   }
 
 }
+
+/* trying to get tabs that work well if not ordered in some weird way which makes accessibility bad */
+
+/* General tab container styling */
+.tabsnew {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 600px;
+  margin: 0 auto;
+  overflow: hidden;
+  font-family: Arial, sans-serif;
+}
+
+/* Tab header container */
+.tabnew__header {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start; /* Align tabs to the left */
+  border-bottom: 1px solid #ccc;
+}
+
+/* Hide radio inputs */
+.tabnew__input {
+  display: none;
+}
+
+/* Tab labels */
+.tabnew__label {
+  display: inline-flex;
+  margin: 0 10px 0 0;
+  padding: 0.5em 10px;
+  border: 1px solid $design-light-gray-border-color;
+  background: $design-white-color;
+  color: $design-primary-color;
+  font-size: 1.2em;
+  font-weight: normal;
+  cursor: pointer;
+  z-index: 1;
+
+  @include bp(screen2) {
+    padding: 0.5em 30px;
+  }
+
+  &:not(:first-of-type) {
+    margin-left: -1px;
+  }
+}
+
+.tabnew__label:hover {
+  background: #e0e0e0;
+}
+
+/* Active tab label styling */
+.tabnew__input:checked + .tabnew__label {
+  border-bottom: 1px solid $design-light-gray-bg-color;
+  background: $design-light-gray-bg-color;
+  color: $design-black-color;
+
+  + .tabnew__content {
+    display: block;
+  }
+}
+
+/* Tab content */
+.tabnew__content {
+  position: relative;
+  width: 100%;
+  margin-top: -2px;
+  padding: 10px;
+  border: 1px solid $design-light-gray-border-color;
+  background: $design-light-gray-bg-color;
+
+  @include bp(screen2) {
+    padding: 30px;
+  }
+}
+
+.tabnew__input:checked + .tabnew__label + .tabnew__content {
+  display: block;
+}
+
+/* Accessibility improvements */
+.tabnew__label:focus {
+  outline: 2px solid $design-mark-color
+}
+
diff --git a/static_src/javascripts/advanced_create.js b/static_src/javascripts/advanced_create.js
@@ -108,7 +108,7 @@ $(document).ready(function() {
       frm.attr('action', location.pathname + '?publish=' +
         $("[name='publish']").val() + '&remainder=' + $("#remainder").val());
       if (includeAnchor) {
-        var input = $("<input>", { type: "hidden", name: "anchor", value: "create__publish" });
+        var input = $("<input>", { type: "hidden", name: "anchor", value: "current_profile" });
         frm.append($(input));
       }
       frm.unbind('submit');

diff --git a/static_src/javascripts/simple_create.js b/static_src/javascripts/simple_create.js
@@ -39,10 +39,7 @@ $(document).ready(function() {
       actTab2();
     }
   });
-/* ToDo: Bring in both simple and advanced content onto the same page
-   (and simultaneously define role=tab in HTML)
-   Then this JavaScript will be unnecessary since tabs will swap quickly
-   btwn simple/advanced content */
+
   $('#tab-2:not(:checked)').on('change', function() {
     actTab2();
   });

diff --git a/static_src/stylesheets/main2.min.css b/static_src/stylesheets/main2.min.css
diff --git a/templates/create/_datacite_title.html b/templates/create/_datacite_title.html
@@ -23,15 +23,15 @@
   {% if forloop.counter == 1 %}
     {% include "create/_datacite_inlinetext.html" with field=t_field reqd="true" %}
   {% elif forloop.counter == 2 %}
-    <div class="fieldset-inline create__form-element-group" role="group" aria-labelledby="title-type-{{forloop.counter}}">
+    <fieldset class="fieldset-inline create__form-element-group" role="group" aria-labelledby="title-type-{{forloop.counter}}">
       <span id="title-type-{{forloop.counter}}" class="fieldset-inline__legend create__inline-nested-legend">{{ t_field.label }}</span>
       {% for radio in t_field %}
       <label for="{{ radio.id_for_label }}" class="fcontrol__radio-label-inline">
         {{ radio.tag }}
         <span>{{ radio.choice_label }}</span>
       </label>
       {% endfor %}
-    </div>
+    </fieldset>
   {% else %}
     {% include "create/_datacite_inlinetext.html" with field=t_field %}
   {% endif %}

diff --git a/templates/create/advanced.html b/templates/create/advanced.html
@@ -4,44 +4,46 @@
 {% block title %}{% block title-twitter %}{% trans "Create an Advanced Identifier" %}{% endblock %}{% endblock %}
 {% block heading %}{% content_heading _("Create an Advanced Identifier") %}{% endblock %}
 {% block content %}
-<div class="tab create__tab">
-  <input class="tab__input" id="tab-1" type="radio" name="name" aria-checked="false"/>
-  <label class="tab__label" id="tab-1-label" for="tab-1" tabindex="0">{% trans "Simple" %}</label>
-  <div class="tab__content">
-    <div>This page cannot be loaded unless you have JavaScript activated in your browser.</div>
+<div class="tabsnew create__tab">
+  <div class="tabnew__header">
+    <input class="tabnew__input" id="tab-1" type="radio" name="name" aria-checked="false"/>
+    <label class="tabnew__label" id="tab-1-label" for="tab-1" tabindex="0">{% trans "Simple" %}</label>
+    <input class="tabnew__input" id="tab-2" type="radio" name="name" checked="checked" aria-checked="true"/>
+    <label class="tabnew__label" for="tab-2" tabindex="0">{% trans "Advanced" %}</label>
   </div>
-  <input class="tab__input" id="tab-2" type="radio" name="name" checked="checked" aria-checked="true"/>
-  <label class="tab__label" for="tab-2" tabindex="0">{% trans "Advanced" %}</label>
-  <div class="tab__content">
+  <div class="tabnew__content">
     <form id="create_form" action="{% url "ui_create.advanced" %}" method="post" class="form-horizontal" role="form">
     <input name="action" id="action" type="hidden" value="create"/>
-    <div class="row">
-      <div class="col-md-4 col-md-push-8 create__sidebox">
-        <div class="sidebox">
-          <h2 class="sidebox__heading">{% trans "Quick Start Guides" %}</h2>
-          <ul class="sidebox__list">
-            <li><a href="/static/locale/en/EZID_CustomRemainders.pdf" class="link__primary" title="PDF Document" target="_blank">{% trans "Custom Remainder Rules" %}</a></li>
-            <li><a href="/static/locale/en/EZID_AdvancedCreate.pdf" class="link__primary" title="PDF Document" target="_blank">{% trans "Advanced Create for DOIs" %}</a></li>
-            <li><a href="/static/locale/en/EZID_ResourceTypes.pdf" title="PDF Document" class="link__primary" target="_blank">{% trans "Resource Types" %}</a></li>
-            <li><a href="/static/locale/en/EZID_ContributorTypes.pdf" title="PDF Document" class="link__primary" target="_blank">{% trans "Contributor Types" %}</a></li>
-            <li><a href="/static/locale/en/EZID_RelationTypes.pdf" title="PDF Document" class="link__primary" target="_blank">{% trans "Relation Types" %}</a></li>
-            <li><a href="/static/locale/en/EZID_InfoUnavailable.pdf" title="PDF Document" class="link__primary" target="_blank">{% trans "Don't have info for required fields? Use placeholder codes." %}</a></li>
-          </ul>
-        </div>
-      </div>
-      <div class="col-md-8 col-md-pull-4">
-      {% include "includes/simple_id_type.html" with calling_page="create" %}
+    <div class="bs-create__row">
+
+      <!-- main content (top part of form) -->
+      <div class="bs-create__main">
+        {% include "includes/simple_id_type.html" with calling_page="create" %}
         {% include "includes/advanced_remainder.html" %}
         {% include "includes/advanced_publish_id.html" %}
       </div>
-    </div>
 
-    <div class="fieldset-stacked" role="group" aria-labelledby="create__fieldset7">
+    </div>
 
-      {% include "includes/advanced_describe.html" %} 
-
-      {% include "includes/create_button.html" with calling_page="create" id_type="advanced" %} 
+    <!-- rest of the form -->
+    <div class="bs-fieldset-stacked" role="group" aria-labelledby="create__fieldset7">
+      {% include "includes/advanced_describe.html" %}
+      {% include "includes/create_button.html" with calling_page="create" id_type="advanced" %}
+    </div>
 
+    <!-- sidebar -->
+    <div class="bs-create__sidebox">
+      <div class="sidebox">
+        <h2 class="sidebox__heading">{% trans "Quick Start Guides" %}</h2>
+        <ul class="sidebox__list">
+          <li><a href="/static/locale/en/EZID_CustomRemainders.pdf" class="link__primary" title="PDF Document" target="_blank">{% trans "Custom Remainder Rules" %}</a></li>
+          <li><a href="/static/locale/en/EZID_AdvancedCreate.pdf" class="link__primary" title="PDF Document" target="_blank">{% trans "Advanced Create for DOIs" %}</a></li>
+          <li><a href="/static/locale/en/EZID_ResourceTypes.pdf" title="PDF Document" class="link__primary" target="_blank">{% trans "Resource Types" %}</a></li>
+          <li><a href="/static/locale/en/EZID_ContributorTypes.pdf" title="PDF Document" class="link__primary" target="_blank">{% trans "Contributor Types" %}</a></li>
+          <li><a href="/static/locale/en/EZID_RelationTypes.pdf" title="PDF Document" class="link__primary" target="_blank">{% trans "Relation Types" %}</a></li>
+          <li><a href="/static/locale/en/EZID_InfoUnavailable.pdf" title="PDF Document" class="link__primary" target="_blank">{% trans "Don't have info for required fields? Use placeholder codes." %}</a></li>
+        </ul>
+      </div>
     </div>
     </form>
   </div>