Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Invalid TabIndex causing accessibility test failures #1913

Open
4 tasks done
BarbaraPruz opened this issue Nov 14, 2024 · 0 comments
Open
4 tasks done

Invalid TabIndex causing accessibility test failures #1913

BarbaraPruz opened this issue Nov 14, 2024 · 0 comments
Labels
bug Something isn't working

Comments

@BarbaraPruz
Copy link

Before you start - checklist

  • I followed instructions in documentation written for my React-PDF version
  • I have checked if this bug is not already reported
  • I have checked if an issue is not listed in Known issues
  • If I have a problem with PDF rendering, I checked if my PDF renders properly in PDF.js demo

Description

We are trying to ensure our app is accessible. For part of our evaluation, we use axe devtools to do full page scans. It is reporting an error that elements should not have tabindex greater than 0. Here is link to error description: https://dequeuniversity.com/rules/axe/4.10/tabindex?application=AxeChrome

Corresponding Element Inspection:

<div class="react-pdf__Page__annotations annotationLayer" data-main-rotation="0" style="width: round(var(--scale-factor) * 612px, 1px); height: round(var(--scale-factor) * 792px, 1px);">
  <section data-annotation-id="13R" tabindex="1000" class="linkAnnotation" style="z-index: 0; left: 21.0784%; top: 95.9183%; width: 13.3578%; height: 1.23106%;">
    <a data-element-id="13R" href="http://passport.steadyapp.com/" rel="noopener noreferrer nofollow" target="" id="pdfjs_internal_id_13R"></a>
  </section>
  <section data-annotation-id="14R" tabindex="1000" class="linkAnnotation" style="z-index: 1; left: 39.7059%; top: 95.9183%; width: 14.2157%; height: 1.23106%;">
    <a data-element-id="14R" href="mailto:passport@steadyapp.com" rel="noopener noreferrer nofollow" target="" id="pdfjs_internal_id_14R">
    </a>
  </section>
</div>

Steps to reproduce

If useful, I can provide a sample pdf. But guessing this is related to links in general.

Expected behavior

react-pdf viewer page passes WCAG AA requirements including valid tab index values.

Actual behavior

tabindex is set to 1000

Additional information

No response

Environment

  • Browser (if applicable): Chrome Version 130.0.6723.92 (Official Build) (arm64)
  • React-PDF version: 9.1.1
  • React version: 18.0.2
  • Bundler name and version (if applicable):
@BarbaraPruz BarbaraPruz added the bug Something isn't working label Nov 14, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant