Project

General

Profile

Actions
Copy link

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.

Status:
Under Review
Priority:
Should have
Assignee:
-
Category:
Backend User Interface
Target version:
-
Start date:
2024-05-26
Due date:
% Done:

0%

Estimated time:
TYPO3 Version:
12
PHP Version:
8.1
Tags:
Accessibility
Complexity:
Is Regression:
Sprint Focus:

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.

Actions
Copy link
 #1

Updated by Riccardo De Contardi about 1 month ago

  • Description updated (diff)
Actions
Copy link
 #2

Updated by Georg Ringer about 1 month ago

  • Status changed from New to Accepted
  • TYPO3 Version changed from 13 to 12
Actions
Copy link
 #3

Updated by Ayke Halder 19 days ago

I will look into it by the end of this week.

Actions
Copy link
 #4

Updated by Ayke Halder 11 days 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:

  <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?

Actions
Copy link
 #5

Updated by Ayke Halder 11 days 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)
Actions
Copy link
 #6

Updated by Gerrit Code Review 11 days 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

Actions
Copy link
 #7

Updated by Gerrit Code Review 11 days 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

Actions
Copy link
 #8

Updated by Gerrit Code Review 11 days 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

Actions
Copy link
 #9

Updated by Gerrit Code Review 11 days 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

Actions
Copy link
 #10

Updated by Gerrit Code Review 11 days 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

Actions
Copy link
 #11

Updated by Gerrit Code Review 11 days 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

Actions
Copy link
 #12

Updated by Gerrit Code Review 9 days 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

Actions
Copy link

Also available in: Atom PDF