Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Accessibility fixes for create IDs pages #816

Open
wants to merge 9 commits into
base: main
Choose a base branch
from
Open

Accessibility fixes for create IDs pages #816

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
b393608
Encloses radio buttons in fieldset as indicated in ticket 544.
sfisher Dec 21, 2024
e4d47ea
Trying to reorder tabs, but now CSS is screwed up since I have to do …
sfisher Dec 23, 2024
32ad39d
Makes the items into tabs (that now look different than the other pag…
sfisher Jan 2, 2025
0f080f7
Get most of the appearance to look the same as existing. Still has we…
sfisher Jan 3, 2025
8a092f9
Getting styles to look as close to the same as I can for different ta…
sfisher Jan 3, 2025
987aff2
Removing css code that was commented out and not being used.
sfisher Jan 3, 2025
9464daa
Modifying advanced to use the same css and layout changes as simple i…
sfisher Jan 3, 2025
6f3396f
Had to rearrange the order to get the help PDFs to go last and do som…
sfisher Jan 3, 2025
43f98d2
Rearranges simple form so it has same styles as advanced to allow mov…
sfisher Jan 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 31 additions & 0 deletions dev/scss/_create.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
95 changes: 91 additions & 4 deletions dev/scss/_tab.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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
}

2 changes: 1 addition & 1 deletion static_src/javascripts/advanced_create.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down
5 changes: 1 addition & 4 deletions static_src/javascripts/simple_create.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
});
Expand Down
110 changes: 110 additions & 0 deletions static_src/stylesheets/main2.min.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions templates/create/_datacite_title.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand Down
60 changes: 31 additions & 29 deletions templates/create/advanced.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Loading
Loading