Bug #103925
open
Live search pagination has no keyboard actions implemented - and is also not reachable with keyboard navigation
Added by Riccardo De Contardi about 1 month ago.
Updated 9 days ago.
Category:
Backend User Interface
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.
- Description updated (diff)
- Status changed from New to Accepted
- TYPO3 Version changed from 13 to 12
I will look into it by the end of this week.
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:
<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?
- 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)
- Status changed from Accepted to Under Review
Also available in: Atom
PDF