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.

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

Added ARIA attributes to essential elements #232

Open
wants to merge 11 commits into
base: main
Choose a base branch
from
24 changes: 12 additions & 12 deletions legal_db/templates/404.html
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
{% extends 'legal_db/base.html' %}

{% block body_content %}
<main class="hero">
<div class="hero-body has-text-centered">
<h1 class="hero-title-big">404</h1>
<h2 class="b-header">Page Not Found!</h2>
<p class="margin-vertical-normal">The page you are looking for doesn't exist.</p>
<a href="{% url 'home' %}" class="button">Return Home</a>
</div>
</main>
{% endblock %}
{% extends 'legal_db/base.html' %}
{% block body_content %}
<main class="hero">
<div class="hero-body has-text-centered">
<h1 class="hero-title-big">404</h1>
<h2 class="b-header">Page Not Found!</h2>
<p class="margin-vertical-normal">The page you are looking for doesn't exist.</p>
<a href="{% url 'home' %}" class="button" aria-label="Return to the home page">Return Home</a>
</div>
</main>
{% endblock %}
120 changes: 60 additions & 60 deletions legal_db/templates/legal_db/case/detail.html
Original file line number Diff line number Diff line change
@@ -1,60 +1,60 @@
{% extends 'legal_db/base.html' %}

{% block body_content %}
<section class="hero case">
<div class="container">
{% include "legal_db/partials/_breadcrumb.html" %}
<h2 class="hero-title b-header">{{ case.name }}</h2>
</div>
</section>
<section class="details">
<div class="container">
<div class="columns">
<aside class="column is-one-third">
<div class="margin-bottom-bigger">
<h4 class="b-header margin-bottom-small">Country</h4>
<p>{{ case.country.name }}</p>
</div>

<div class="margin-bottom-bigger">
<h4 class="b-header margin-bottom-small">Court(s)</h4>
<p>{{ case.courts }}</p>
</div>

<div class="margin-bottom-bigger">
<h4 class="b-header margin-bottom-small">Year of resolution</h4>
<p>{{ case.decision_year|default:'<span class="has-text-grey">Unknown</span>' }}
</p>
</div>

<div class="margin-bottom-bigger">
<h4 class="b-header margin-bottom-small">Relevant materials</h4>
<ul class="links-list">
{% for link in case.link_list %}
<li class="margin-vertical-small">
{% if link.label %}<b>{{ link.label }}</b>:{% endif %}
<a href="{{ link.url }}">
{% if link.title %} {{ link.title }}
{% else %} {{ link.url }}
{% endif %}
</a>
</li>
{% endfor %}
</ul>
</div>
</aside>
<article class="column is-two-thirds">
<h3 class="b-header margin-bottom-small">Background information</h3>
<p>{{ case.background }}</p>
<br/>
<h3 class="b-header margin-bottom-small">Case summary</h3>
<p>{{ case.summary }}</p>
<hr/>
{% for tag in case.tags %}
<a href="{% url 'case_index' %}?tags%5B%5D={{ tag }}" class="button tag case margin-horizontal-small">{{ tag }}</a>
{% endfor %}
</article>
</div>
</div>
</section>
{% endblock %}
{% extends 'legal_db/base.html' %}
{% block body_content %}
<section class="hero case">
<div class="container">
{% include "legal_db/partials/_breadcrumb.html" %}
<h2 class="hero-title b-header">{{ case.name }}</h2>
</div>
</section>
<section class="details">
<div class="container">
<div class="columns">
<aside class="column is-one-third">
<div class="margin-bottom-bigger">
<h4 class="b-header margin-bottom-small">Country</h4>
<p>{{ case.country.name }}</p>
</div>
<div class="margin-bottom-bigger">
<h4 class="b-header margin-bottom-small">Court(s)</h4>
<p>{{ case.courts }}</p>
</div>
<div class="margin-bottom-bigger">
<h4 class="b-header margin-bottom-small">Year of resolution</h4>
<p>{{ case.decision_year|default:'<span class="has-text-grey">Unknown</span>' }}
</p>
</div>
<div class="margin-bottom-bigger">
<h4 class="b-header margin-bottom-small">Relevant materials</h4>
<ul class="links-list">
{% for link in case.link_list %}
<li class="margin-vertical-small">
{% if link.label %}<b>{{ link.label }}</b>:{% endif %}
<a href="{{ link.url }}">
{% if link.title %} {{ link.title }}
{% else %} {{ link.url }}
{% endif %}
</a>
</li>
{% endfor %}
</ul>
</div>
</aside>
<article class="column is-two-thirds">
<h3 class="b-header margin-bottom-small">Background information</h3>
<p>{{ case.background }}</p>
<br/>
<h3 class="b-header margin-bottom-small">Case summary</h3>
<p>{{ case.summary }}</p>
<hr/>
{% for tag in case.tags %}
<a href="{% url 'case_index' %}?tags%5B%5D={{ tag }}" class="button tag case margin-horizontal-small">{{ tag }}</a>
{% endfor %}
</article>
</div>
</div>
</section>
{% endblock %}
4 changes: 2 additions & 2 deletions legal_db/templates/legal_db/case/form.html
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ <h4 class="b-header">Contact</h4>
<strong>Agreement and Consent</strong> <span class="required">*</span><br/>
<label for="{{ case_form.agreement.id_for_label }}" class="checkbox">
{% render_field case_form.agreement %}
I have read and agree to the <a href="https://creativecommons.org/privacy/" class="has-text-dark-slate-blue">Creative Commons Privacy Policy</a>.
I have read and agree to the <a href="https://creativecommons.org/privacy/" class="has-text-dark-slate-blue" aria-label="Creative Commons Privacy Policy">Creative Commons Privacy Policy</a>.
</label>
{{ case_form.agreement.errors }}
</div>
Expand Down Expand Up @@ -132,7 +132,7 @@ <h4 class="b-header">Links to relevant materials</h4>
{{ link_form.url.errors }}
</div>
<div class="column is-1">
<button type="button" class="button is-delete" onclick="deleteLinkForm('link-form-{{ forloop.counter0 }}')">
<button type="button" class="button is-delete" onclick="deleteLinkForm('link-form-{{ forloop.counter0 }}')" aria-label="Delete this link form">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please put the string in translation tags:

aria-label="{% trans 'Delete this link form' %}"

<i class="icon cross"></i>
</button>
</div>
Expand Down
156 changes: 79 additions & 77 deletions legal_db/templates/legal_db/case/index.html
Original file line number Diff line number Diff line change
@@ -1,77 +1,79 @@
{% extends 'legal_db/base.html' %}
{% load static %}

{% block body_content %}
<section class="hero case">
<div class="container">
{% include "legal_db/partials/_breadcrumb.html" %}
<h1 class="hero-title title is-2">Cases</h1>
<div class="contribute-card">
<article class="card entry-post link no-border is-hidden-touch">
<a href="{% url 'case_submit' %}" class="has-background-tomato">
<span class="card-content has-bottom-link">
<h2 class="card-title">Contribute</h2>
<span class="content">Do you want to submit a legal dispute to the database?</span>
<strong class="link-arrow">Submit a case <i class="icon chevron-right"></i></strong>
</span>
</a>
</article>
</div>
<p class="hero-description body-big">Here you will find information on litigation that involves or directly affects Creative Commons legal tools. Click on the link to each case name for more details on the dispute.</p>
</div>
</section>

<section class="cases">
<div class="container">
<form id="search" role="search" method="get">
{% include "legal_db/partials/_search.html" %}

<div id="tags" aria-expanded="true">
{% for tag in tags %}
<label for="tag-check-{{ forloop.counter }}" id="tag-label-{{ forloop.counter }}"
class="button tag case margin-right-small margin-vertical-smaller{% if tag.checked %} selected{% endif %}">
{{ tag.name }}
<input type="checkbox" class="tag__check" name="tags[]"
id="tag-check-{{ forloop.counter }}"
value="{{ tag.name }}"
{% if tag.checked %} checked{% endif %}
hidden>
</label>
{% endfor %}
</div>
</form>

<div class="margin-vertical-big table-container">
<table class="table is-bordered is-striped is-fullwidth">
<thead>
<tr>
<th>Country</th>
<th>Case name</th>
<th>License</th>
<th>Year of resolution</th>
</tr>
</thead>
<tbody>
{% for case in cases %}
<tr>
<td>{{ case.country.name }}</td>
<td><a href="{% url 'case_detail' case.id %}" class="has-text-dark-slate-blue">{{ case.name }}</a> </td>
<td class="is-narrow">
{% if not case.license %} <span class="has-text-grey">Unknown</span>
{% else %} {{ case.license }} {% endif %}
</td>
<td class="number-cell">{{ case.decision_year|default:"" }}</td>
</tr>
{% empty %}
<tr><td class="has-text-centered" colspan="4">No cases are available. Try different filters or search terms.</td></tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</section>
{% endblock %}

{% block js_content %}
<script src="{% static 'listing.js' %}" defer></script>
{% endblock %}
{% extends 'legal_db/base.html' %}
{% load static %}

{% block body_content %}
<section class="hero case">
<div class="container">
{% include "legal_db/partials/_breadcrumb.html" %}
<h1 class="hero-title title is-2">Cases</h1>
<div class="contribute-card">
<article class="card entry-post link no-border is-hidden-touch">
<a href="{% url 'case_submit' %}" class="has-background-tomato" aria-label="Submit a legal dispute to the database">
<span class="card-content has-bottom-link">
<h2 class="card-title">Contribute</h2>
<span class="content">Do you want to submit a legal dispute to the database?</span>
<strong class="link-arrow">Submit a case <i class="icon chevron-right"></i></strong>
</span>
</a>
</article>
</div>
<p class="hero-description body-big">Here you will find information on litigation that involves or directly affects Creative Commons legal tools. Click on the link to each case name for more details on the dispute.</p>
</div>
</section>

<section class="cases">
<div class="container">
<form id="search" role="search" method="get">
{% include "legal_db/partials/_search.html" %}

<div id="tags" aria-expanded="true">
{% for tag in tags %}
<label for="tag-check-{{ forloop.counter }}" id="tag-label-{{ forloop.counter }}"
class="button tag case margin-right-small margin-vertical-smaller{% if tag.checked %} selected{% endif %}"
role="checkbox" aria-checked="{% if tag.checked %}true{% else %}false{% endif %}"
>
{{ tag.name }}
<input type="checkbox" class="tag__check" name="tags[]"
id="tag-check-{{ forloop.counter }}"
value="{{ tag.name }}"
{% if tag.checked %} checked{% endif %}
hidden>
</label>
{% endfor %}
</div>
</form>

<div class="margin-vertical-big table-container">
<table class="table is-bordered is-striped is-fullwidth">
<thead>
<tr>
<th>Country</th>
<th>Case name</th>
<th>License</th>
<th>Year of resolution</th>
</tr>
</thead>
<tbody>
{% for case in cases %}
<tr>
<td>{{ case.country.name }}</td>
<td><a href="{% url 'case_detail' case.id %}" class="has-text-dark-slate-blue">{{ case.name }}</a> </td>
<td class="is-narrow">
{% if not case.license %} <span class="has-text-grey">Unknown</span>
{% else %} {{ case.license }} {% endif %}
</td>
<td class="number-cell">{{ case.decision_year|default:"" }}</td>
</tr>
{% empty %}
<tr><td class="has-text-centered" colspan="4">No cases are available. Try different filters or search terms.</td></tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</section>
{% endblock %}

{% block js_content %}
<script src="{% static 'listing.js' %}" defer></script>
{% endblock %}
Loading