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

Pa11y CI failures because django-plotly-dash iframe has no title #463

Open
warrickball opened this issue Jun 5, 2023 · 1 comment
Open

Comments

@warrickball
Copy link

I'm part of a small team using django-plotly-dash (to great effect!) on a Django-based web project to embed some visualisations. So far I've just been using the

{% load plotly_dash %}
{% plotly_app name="example" %}

idiom, which creates an iframe on the page and embeds the Plotly Dash there.

We recently added Pa11y CI accessibility tests to our continuous integration and the iframe environment produces three errors, two of which I think should be resolved in django-plotly-dash. Formatting the CI output, the errors are

  1. Frames must have an accessible name
  2. Frames should be tested with axe-core
  3. Iframe element requires a non-empty title attribute that identifies the frame.

I think error 2 is something preventing Pa11y from injecting JavaScript for testing into the iframe and I don't think is an upstream issue. Errors 1 and 3 can be resolved by providing any value to the title property of the iframe. e.g. I tried adding some text (e.g. "example") in the iframe in the django-plotly-dash templates:

<div style="{{dstyle}}">
<iframe src="{{app.base_url}}" style="{{istyle}}" frameborder="{{fbs}}" sandbox="{{sandbox_settings}}"></iframe>
</div>

and errors 1 and 3 disappear.

Though any text will do, my understanding (from the links above) is that screen readers will use the title information, so something descriptive (perhaps a user argument?) will help users navigate the page.

@delsim
Copy link
Contributor

delsim commented Jun 6, 2023

@warrickball there is a quick fix (if you need it) - copy the template file to <some_app_ahead_of_dpd_in_INSTALLED_APPS>/templates/django_plotly_dash/plotly_app.html and edit that template; as long as you are using template directories then this version of the template will be used in preference to the one from the dpd package itself.
This would allow you to make any needed changes locally - if you then want to submit them as a PR that would be wonderful!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants