Accessibility rollup01 test (i'm seeing some test stuff I want to check)

.github/workflows/main.yml

@@ -27,7 +27,7 @@ jobs:
 
       - name: Install Poetry
         run: |
-          curl -sSL https://install.python-poetry.org | python3 -
+          curl -sSL https://install.python-poetry.org | python3 - --version 1.8.5
           echo "$HOME/.local/bin" >> $GITHUB_PATH
 
       - name: Install dependencies

README.md

@@ -27,7 +27,7 @@ tools.  Here is a quick tour of the our EZID `pyproject.toml`:
 We declare Poetry as our build tool
 ```
 [build-system]
-requires = ["poetry-core>=1.0.0"]
+requires = ["poetry-core>=1.0.0,<2.0.0"]
 build-backend = "poetry.core.masonry.api"
 ```
 

ansible/roles/ezid/tasks/configure_ezid.yaml

@@ -24,7 +24,7 @@
 
 - name: install poetry
   ansible.builtin.pip:
-    name: poetry
+    name: poetry==1.8.5
 
 - name: run pip install
   ansible.builtin.command:

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;
 }

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
+}
+

pyproject.toml

@@ -1,5 +1,5 @@
 [build-system]
-requires = ["poetry-core>=1.0.0"]
+requires = ["poetry-core>=1.0.0,<2.0.0"]
 build-backend = "poetry.core.masonry.api"
 
 [tool.black]

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');

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();
   });

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 %}