TYPO3 Core

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:

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

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

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

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

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

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

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