Ticket #35507 changed to search landmark in filter sidebar in order to improve accessibility. #18256
Conversation
There was a problem hiding this comment.
Hello! Thank you for your contribution 💪
As it's your first contribution be sure to check out the patch review checklist.
If you're fixing a ticket from Trac make sure to set the "Has patch" flag and include a link to this PR in the ticket!
If you have any design or process questions then you can ask in the Django forum.
Welcome aboard ⛵️!
There was a problem hiding this comment.
Roughly adding the same comment in the ticket but this basically reverts the work of ticket-34835 which was introduced in 5.1, makes me think we should backport this to 5.1 before the beta freeze and mark this as a release blocker if we are instead saying this is in fact more accurate. Otherwise, we can close this ticket and PR as wontfix.
We will also need to update the release note added in ticket-34835.
cc @django/accessibility team for advice here
| @@ -73,7 +73,7 @@ | |||
| </div> | |||
| {% block filters %} | |||
| {% if cl.has_filters %} | |||
| <nav id="changelist-filter" aria-labelledby="changelist-filter-header"> | |||
There was a problem hiding this comment.
We also have <form id="changelist-search" method="get" role="search"> in django/contrib/admin/templates/admin/search_form.html should we add an aria-label here as described in labelling landmarks?
There was a problem hiding this comment.
We should yes. For some reason I thought we had this already but it looks like I was looking at the wrong thing.
There was a problem hiding this comment.
It's better to use a heading and aria-labelledby, because:
- Screen reader users can navigate using headings.
aria-labeldoesn't get translated by translation tools including, but not limited to, Google Translate.
There was a problem hiding this comment.
Hi. I would like to give a help on this ticket. Could you give me some explanation about the change required regarding the heading and aria-labelledby please ? Thanks
There was a problem hiding this comment.
In the template Sarah mentioned there's a <form> element with role="search", which makes this element act the same as a <search> element. Since these types of landmark elements need labels, we should add something here. I think if we go with the approach @MHLut suggests we should add a <h2> with class="sr-only", an id and some descriptive text, maybe just "Search" is enough, or maybe "Search <model.verbose_name_plural>" - I don't think we want this visible - and then we can add that ID to the form's -aria-labelledby` attribute.
There was a problem hiding this comment.
Ok if i understand well, the finally solution would replace the nav element with a form (having a role="search). And next to it a h2, right ?
|
Is there anything still blocking this backport? It looks good to me. |
|
This comment hasn't been addressed |
|
Continued in #19379 |
Trac ticket number
ticket-35507
Branch description
changed to search landmark in filter sidebar in order to improve accessibility.
Checklist
mainbranch.