Bug #103925
open
Live search pagination has no keyboard actions implemented - and is also not reachable with keyboard navigation
0%
Description
Tested on 13.2.0-dev (but I guess also 12 is affected)
- Open live Search
- search something that gives you a lot of results
- Use the keyboard to navigate the interface (Tab key & arrows keys)
Results¶
You will see that pretty everything is reachable using tab key and arrows key, except the pagination on the bottom left
Technical background¶
The navigation links are implemented as @customElement('typo3-backend-live-search-result-page')
This custom element does not have any button or link features.
The current implementation only reacts on click events. Keyboard actions like key-press Enter or Space are not implemented.
Simply making this navigation reachable by keaboard (e.g. tabindex="0") will not make it work.
Updated by
Updated by Georg Ringer 8 months ago
- Status changed from New to Accepted
- TYPO3 Version changed from 13 to 12
Updated by Ayke Halder 7 months ago
I will look into it by the end of this week.
Updated by Ayke Halder 7 months ago
ยท Edited
The pagination links/buttons are not reachable by keyboard because they do not have tabindex="0" set.
To make the pagination really screenreader friendly the whole pagination structure needs some changes:
- add
aria-label="Search result navigation"to<nav> - add
aria-label="Goto page N"to page-result-links - declare
aria-role="button"for page-result-links - add
aria-current="true"to currently active result-page-link ( https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current ) - use
aria-disabled="true"for custom disabled elements - maybe add
aria-hidden="true"to<typo3-backend-icon>?
<typo3-backend-live-search-result-pagination>
<nav aria-label="Search result pagination">
<ul class="pagination pagination-sm">
<li class="page-item">
<typo3-backend-live-search-result-page aria-role="button" tabindex="0" class="page-link disabled" aria-disabled="true" page="" perpage="20" aria-label="Goto previous page">
<typo3-backend-icon identifier="actions-arrow-left-alt" size="small"></typo3-backend-icon>
</typo3-backend-live-search-result-page>
</li>
<li class="page-item">
<typo3-backend-live-search-result-page aria-role="button" tabindex="0" page="1" aria-label="Goto page 1" perpage="20" class="page-link active" aria-current="true">1</typo3-backend-live-search-result-page>
</li>
<li class="page-item">
<typo3-backend-live-search-result-page aria-role="button" tabindex="0" aria-role="button" page="2" aria-label="Goto page 2" perpage="20" class="page-link ">2</typo3-backend-live-search-result-page>
</li>
<li class="page-item">
<typo3-backend-live-search-result-page aria-role="button" tabindex="0" page="3" aria-label="Goto page 3" perpage="20" class="page-link ">3</typo3-backend-live-search-result-page>
</li>
<li class="page-item">
<typo3-backend-live-search-result-page aria-role="button" tabindex="0" class="page-link " page="2" perpage="20" aria-label="Goto next page">
<typo3-backend-icon identifier="actions-arrow-right-alt" size="small"></typo3-backend-icon>
</typo3-backend-live-search-result-page>
</li>
</ul>
</nav>
</typo3-backend-live-search-result-pagination>
In general:
Can we implement correct aria-attributes directly into Web-Components instead of using attributes?
Updated by Ayke Halder 7 months ago
- Subject changed from Live search pagination not reachable with keyboard navigation to Live search pagination has no keyboard actions implemented - and is also not reachable with keyboard navigation
- Description updated (diff)
Updated by Gerrit Code Review 7 months ago
- Status changed from Accepted to Under Review
Patch set 1 for branch main of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/c/Packages/TYPO3.CMS/+/84750
Updated by Gerrit Code Review 7 months ago
Patch set 1 for branch main of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/c/Packages/TYPO3.CMS/+/84782
Updated by Gerrit Code Review 7 months ago
Patch set 2 for branch main of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/c/Packages/TYPO3.CMS/+/84782
Updated by Gerrit Code Review 7 months ago
Patch set 3 for branch main of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/c/Packages/TYPO3.CMS/+/84782
Updated by Gerrit Code Review 7 months ago
Patch set 4 for branch main of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/c/Packages/TYPO3.CMS/+/84782
Updated by Gerrit Code Review 7 months ago
Patch set 5 for branch main of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/c/Packages/TYPO3.CMS/+/84782
Updated by Gerrit Code Review 7 months ago
Patch set 6 for branch main of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/c/Packages/TYPO3.CMS/+/84782
Updated by Gerrit Code Review 4 months ago
Patch set 7 for branch main of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/c/Packages/TYPO3.CMS/+/84782
Updated by Gerrit Code Review 4 months ago
Patch set 8 for branch main of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/c/Packages/TYPO3.CMS/+/84782
Updated by Gerrit Code Review 4 months ago
Patch set 9 for branch main of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/c/Packages/TYPO3.CMS/+/84782
Updated by Gerrit Code Review 4 months ago
Patch set 10 for branch main of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/c/Packages/TYPO3.CMS/+/84782
Updated by Gerrit Code Review 4 months ago
Patch set 11 for branch main of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/c/Packages/TYPO3.CMS/+/84782
Updated by Gerrit Code Review 4 months ago
Patch set 12 for branch main of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/c/Packages/TYPO3.CMS/+/84782
Updated by Gerrit Code Review 4 months ago
Patch set 13 for branch main of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/c/Packages/TYPO3.CMS/+/84782
Updated by Gerrit Code Review 4 months ago
Patch set 14 for branch main of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/c/Packages/TYPO3.CMS/+/84782
Updated by Ayke Halder 4 months ago
- Related to Task #104796: Use buttons instead of anchors for javascript handled actions added
Updated by Gerrit Code Review 4 months ago
Patch set 15 for branch main of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/c/Packages/TYPO3.CMS/+/84782
Updated by Gerrit Code Review 4 months ago
Patch set 16 for branch main of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/c/Packages/TYPO3.CMS/+/84782
Updated by Gerrit Code Review 4 months ago
Patch set 17 for branch main of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/c/Packages/TYPO3.CMS/+/84782
Updated by Gerrit Code Review 4 months ago
Patch set 18 for branch main of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/c/Packages/TYPO3.CMS/+/84782
Updated by Gerrit Code Review 4 months ago
Patch set 19 for branch main of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/c/Packages/TYPO3.CMS/+/84782