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

Jump to bottom

Added ARIA attributes to essential elements #232

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

Added ARIA attributes to essential elements #232

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d46d9a9
addingg aria attributes
SisiVero Oct 16, 2024
c6fd06f
updated 404 page
SisiVero Oct 16, 2024
be867f1
Merge branch 'main' changes into aria-attributes
SisiVero Oct 22, 2024
e408c20
conflict resolved.
SisiVero Oct 22, 2024
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
24 changes: 12 additions & 12 deletions legal_db/templates/404.html
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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">
<i class="icon cross"></i>
</button>
</div>
Expand Down
156 changes: 79 additions & 77 deletions legal_db/templates/legal_db/case/index.html
View file
Open in desktop
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