Use regular buttons instead of inputs for better accessibility

This commit is contained in:
maartenvn 2020-07-27 17:56:09 +02:00
parent d5379ae0b7
commit 141e25ee38
3 changed files with 18 additions and 10 deletions

View file

@ -14,8 +14,10 @@
{% elif not user.has_ugent_info %}
<p class="text--important">Je moet je studentennummer en echte naam invullen in je profiel voor je je kan inschrijven.</p>
{% elif not my_registration %}
<p><input type="submit" value="Ik wil komen"></p>
<button type="submit">Ik wil komen</button>
{% else %}
<p>Mijn status: {{ my_registration.state_str }} <input type="submit" value="Uitschrijven"></input></p>
<p>Mijn status: {{ my_registration.state_str }}</p>
<button type="submit">Uitschrijven</button>
{% endif %}
</form>

View file

@ -5,7 +5,7 @@ body {
font-family: monospace;
}
input, textarea {
input, textarea, button {
font-family: inherit;
font-size: inherit;
}
@ -78,6 +78,10 @@ h1 a:hover, h1 a:focus, h1 a:active {
background-color: rgba(255, 255, 255, 0.1);
}
.text--important {
color: #e74c3c;
}
/*change the layout of the navigation bar for all the screens
that have a width less or equal than 500px*/
@ -175,16 +179,22 @@ textarea {
select:focus,
input:focus,
textarea:focus,
button:focus {
button:active {
background: hsl(0, 0%, 20%);
}
select:focus,
input:focus,
textarea:focus {
textarea:focus
button:active {
transform: scale(1.02);
}
/* Hover styling */
button:hover:not([disabled]) {
cursor: pointer;
}
footer {
color: #777777;
padding: 10px;
@ -192,7 +202,3 @@ footer {
footer a {
color: #888888;
}
.text--important {
color: #e74c3c;
}

View file

@ -10,7 +10,7 @@
<form action="/user/profile" method="post">
{% csrf_token %}
{{ form }}
<input type="submit" value="Bijwerken">
<button type="submit">Bijwerken</button>
</form>
{% else %}
<p>Niet ingelogd</p>