Skip to content

Distinguish samey links with aria attributes #455

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

Merged
mauromsl merged 3 commits into from
Mar 11, 2026
Merged

Distinguish samey links with aria attributes #455

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5fbc962
fix #251 Distinguish samey links with aria attributes
joemull Jan 15, 2026
22f0548
fix #251 Improve Find Out More, How We Work, and News
joemull Jan 28, 2026
ec71027
fix #251 Improve download links and view-all bar
joemull Jan 28, 2026
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
4 changes: 2 additions & 2 deletions components/cta/list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{% load static %}
{% load component_tags %}

<div class="flex max-lg:flex-col gap-8 lg:flex-row lg:flex-wrap justify-around">
<ul class="flex max-lg:flex-col gap-8 lg:flex-row lg:flex-wrap justify-around">
{% slot "content" default %}{% endslot %}
</div>
</ul>
4 changes: 2 additions & 2 deletions components/cta/list_item.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{% load component_tags %}

<div class="lg:max-xl:w-52 xl:w-64 flex flex-col gap-y-8 items-center justify-between">
<li class="lg:max-xl:w-52 xl:w-64 flex flex-col gap-y-8 items-center justify-between">
{% slot "content" default %}{% endslot %}
</div>
</li>
7 changes: 5 additions & 2 deletions components/cta/list_item_left.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
{% load component_tags %}

<div class="max-xl:w-52 xl:w-64 flex flex-col gap-y-4 max-lg:items-center lg:items-start justify-between">
<li class="
max-xl:w-52 xl:w-64
flex flex-col gap-y-4 max-lg:items-center lg:items-start justify-between
">
{% slot "content" default %}{% endslot %}
</div>
</li>
4 changes: 2 additions & 2 deletions components/cta/list_left.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{% load static %}
{% load component_tags %}

<div
<ul
class="
flex max-lg:flex-col lg:flex-row lg:flex-wrap
gap-x-8 gap-y-20 max-lg:items-center max-lg:justify-around lg:justify-between
Expand All @@ -10,4 +10,4 @@
{% endif %}
">
{% slot "content" default %}{% endslot %}
</div>
</ul>
2 changes: 1 addition & 1 deletion components/external_newsletter_signup/form.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ def get_context_data(self, *args, **kwargs):
)
if not url.value:
logger.warning(
'External Newsletter Signup URL needs setting value.'
'External Newsletter Sign-up URL needs setting value.'
)
context['external_newsletter_signup_url'] = url.value
return context
11 changes: 3 additions & 8 deletions components/news/list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,9 @@
{% load component_tags %}

{% if h %}
<h2 id="{{ h|slugify }}" class="name font-poppins-bold text-3xl py-8 max-md:text-center">
{{ h }}
</h2>
{% endif %}
<div class="flex max-md:flex-col md:flex-row md:flex-wrap gap-y-20 md:-mx-6">
<ul class="flex max-md:flex-col md:flex-row md:flex-wrap gap-y-20 md:-mx-6">
{% slot "items" default %}
{% for item in news_items %}
{% component "news_list_item" item=item %}
{% component "news_list_item" item=item include_tags=include_tags h_level=h_level %}
{% endfor %}
{% endslot %}
</div>
</ul>
2 changes: 2 additions & 0 deletions components/news/list.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ def get_context_data(self, request, *args, **kwargs):
content_type = kwargs.pop('content_type', '')
limit = kwargs.pop('limit', None)
h = kwargs.pop('h', '')
h_level = kwargs.pop('h_level', 'h2')
news_items = kwargs.pop('news_items', [])
context = super().get_context_data(*args, **kwargs)

Expand All @@ -36,6 +37,7 @@ def get_context_data(self, request, *args, **kwargs):

context = {
'h': h,
'h_level': h_level,
'news_items': news_items,
}

Expand Down
17 changes: 10 additions & 7 deletions components/news/list_item.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
{% load static %}

{% if item %}
<article
aria-label="{{ item.title }}"
<li
class="
{{ fraction }} flex flex-col space-between md:px-6
max-md:items-center prose lg:prose-lg
Expand All @@ -16,9 +15,13 @@
{{ item.posted|date:"j F Y" }}
</div>
{% endif %}
<strong class="py-4 font-poppins-bold text-2xl max-md:text-center">
{{ item.title }}
</strong>
{% with h_id=item.title|slugify classes="py-4 font-poppins-bold text-2xl max-md:text-center not-prose" %}
{% if h_level == "h2" %}
<h2 id="{{ h_id }}" class="{{ classes }}">{{ item.title }}</h2>
{% else %}
<h3 id="{{ h_id }}" class="{{ classes }}">{{ item.title }}</h3>
{% endif %}
{% endwith %}
<div class="max-md:text-center">
{{ item.byline }}
</div>
Expand All @@ -37,11 +40,11 @@
lg:items-start not-prose
">
<div class="max-lg:mt-8 lg:m-6">
{% with rel_path=item.url label="Read more" %}
{% with rel_path=item.url label="Read more" labelledby="" describedby=item.title|slugify %}
{% include "custom/button-action-blue.html" %}
{% endwith %}
</div>
</div>
</div>
</article>
</li>
{% endif %}
2 changes: 2 additions & 0 deletions components/news/list_item.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ class NewsListItem(component.Component):
def get_context_data(self, item, *args, **kwargs):

fraction = kwargs.pop('fraction', 'basis-1/3')
h_level = kwargs.pop('h_level', 'h2')
include_date = kwargs.pop('include_date', True)
if not isinstance(item, models.NewsItem):
try:
Expand All @@ -20,5 +21,6 @@ def get_context_data(self, item, *args, **kwargs):
context = super().get_context_data(*args, **kwargs)
context['item'] = item
context['fraction'] = fraction
context['h_level'] = h_level
context['include_date'] = include_date
return context
4 changes: 2 additions & 2 deletions components/news/view_all_bar.html
View file
Open in desktop
Copy link
Copy Markdown
Member

@StephDriver StephDriver Jan 27, 2026

Choose a reason for hiding this comment

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

Something's not right here. The view all bars on the announcements-blog page are not being described in a way that tells me where that link goes.

What I get is:

Read our news section

link, announcement, complementary

Hear our ideas section

link, blog, complementary

News from our journals section

link, all, complementary

I think the complementary comes from it being an 'aside'. But this isn't an aside, it is part of the section as above - if it could be in that section, then it should read out that landmark instead of 'complementary' which could be enough not to need more description. However I do think the names need to be different (i.e. announcement, blog, do not give enough context for user to know where they are going).

I don't think that is is what is being passed in by announcements-blog.html

Copy link
Copy Markdown
Member Author

@joemull joemull Jan 28, 2026

Choose a reason for hiding this comment

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

Great catch--there was a bug and a less than ideal use of aside here, and I've fixed both.

Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@
{% load i18n %}
{% load component_tags %}

{% component_block "page_section" width="full" anchor=anchor margin="very-narrow" element="aside" label="View all" prose=False bg="bg-blue" %}
{% component_block "page_section" width="full" anchor=anchor margin="very-narrow" prose=False bg="bg-blue" %}
<div class="flex flex-col items-center">
{% with rel_path=view_all_url label="View all" %}
{% with rel_path=view_all_url label=visible_label %}
{% include "custom/button-action-white.html" %}
{% endwith %}
</div>
Expand Down
3 changes: 2 additions & 1 deletion components/news/view_all_bar.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,5 +12,6 @@ class NewsViewAllBar(component.Component):
def get_context_data(self, view_all_url, *args, **kwargs):
return {
'view_all_url': view_all_url,
'anchor' : kwargs.pop('anchor', 'left'),
'visible_label': kwargs.pop('visible_label', 'View all'),
'anchor': kwargs.pop('anchor', 'left'),
}
4 changes: 2 additions & 2 deletions components/supporters/calculator.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
flex gap-4 items-center
"
href="{% url 'supporter_signup' %}">
{% include "custom/button-action-inner-white.html" with label="Skip to Signup" %}
{% include "custom/button-action-inner-white.html" with label="Skip to Sign-up" %}
</a>
</div>
{% endif %}
Expand All @@ -28,7 +28,7 @@
{% include 'custom/button-calculate.html' %}
{% if band_form.fee.value %}
<div class="w-full flex flex-col items-end">
{% include 'custom/button-submit-white.html' with label="Start Signup" name="start_signup" %}
{% include 'custom/button-submit-white.html' with label="Start Sign-up" name="start_signup" %}
</div>
{% endif %}
{% endfill %}
Expand Down
5 changes: 4 additions & 1 deletion components/user/group.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,9 @@
<div class="bg-tan-light max-xl:w-52 xl:w-64 max-xl:h-52 xl:h-64"></div>
{% endif %}
<div class="flex flex-col gap-y-2">
<h3 class="font-poppins-bold max-lg:text-xl lg:text-2xl max-lg:text-center">
<h3
id="{{ member.user.uuid }}"
class="font-poppins-bold max-lg:text-xl lg:text-2xl max-lg:text-center">
{{ member.user.full_name }}
</h3>
{% comment %}StaffGroup attributes{% endcomment %}
Expand Down Expand Up @@ -55,6 +57,7 @@ <h3 class="font-poppins-bold max-lg:text-xl lg:text-2xl max-lg:text-center">
border rounded-full border-blue
flex gap-4 items-center
"
aria-describedby="{{ member.user.uuid }}"
href="{% url 'core_public_profile' member.user.uuid %}">
{% with label="Full profile" %}
{% include "custom/button-action-inner-blue.html" %}
Expand Down
17 changes: 10 additions & 7 deletions templates/custom/announcements-blog.html
View file
Open in desktop
Copy link
Copy Markdown
Member

@StephDriver StephDriver Jan 27, 2026

Choose a reason for hiding this comment

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

see view_all_bar.html comment. The label being passed to view_all_bar doesn't seem to match what is being put on the page by that component.

Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
{% load component_tags %}

{% block body %}
<div aria-labelledby="h1">
<div>
<div class="container mx-auto max-w-screen-xl">
<div class="relative">
{% include "custom/edit-on-github.html" with rel_path="custom/announcements-blog.html" %}
Expand All @@ -25,29 +25,32 @@
<div class="relative max-md:pt-24 md:pt-12">
{% with h="Read our news." %}
{% component_block "page_section" width="full" anchor="left" margin="narrow" labelledby=h|slugify prose=False %}
{% component "news_list" request=request h=h tag="Announcement" limit=6 %}
{% include "custom/news-list-h2.html" with h=h %}
{% component "news_list" request=request tag="Announcement" limit=6 h_level="h3" %}
{% endcomponent_block %}
{% url "core_news_list_tag" tag="Announcement" as view_all_url %}
{% component "news_view_all_bar" view_all_url=view_all_url anchor="left" %}
{% component "news_view_all_bar" visible_label="All announcements" view_all_url=view_all_url anchor="left" %}
{% endwith %}
</div>
<div class="relative max-md:pt-24 md:pt-12">
{% include "custom/news-art-middle.html" %}
{% with h="Hear our ideas." %}
{% component_block "page_section" width="full" anchor="right" margin="narrow" labelledby=h|slugify prose=False %}
{% component "news_list" request=request h=h tag="Blog" limit=6 %}
{% include "custom/news-list-h2.html" with h=h %}
{% component "news_list" request=request tag="Blog" limit=6 h_level="h3" %}
{% endcomponent_block %}
{% url "core_news_list_tag" tag="Blog" as view_all_url %}
{% component "news_view_all_bar" view_all_url=view_all_url anchor="right" %}
{% component "news_view_all_bar" visible_label="All OLH blog posts" view_all_url=view_all_url anchor="right" %}
{% endwith %}
</div>
<div class="relative max-md:pt-24 md:pt-12">
{% with h="News from our journals." %}
{% component_block "page_section" width="full" anchor="left" margin="narrow" labelledby=h|slugify prose=False %}
{% component "news_list" request=request h=h content_type="journal" limit=6 %}
{% include "custom/news-list-h2.html" with h=h %}
{% component "news_list" request=request h=h content_type="journal" limit=6 h_level="h3" %}
{% endcomponent_block %}
{% url "core_news_list_presswide" presswide="all" as view_all_url %}
{% component "news_view_all_bar" view_all_url=view_all_url anchor="left" %}
{% component "news_view_all_bar" visible_label="All news" view_all_url=view_all_url anchor="left" %}
{% endwith %}
{% include "custom/news-art-end.html" %}
</div>
Expand Down
Loading