GibbsConsulting / django-plotly-dash

Expose plotly dash apps as django tags
MIT License
538 stars 121 forks source link

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

Open warrickball opened 1 year ago

warrickball commented 1 year ago

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: https://github.com/GibbsConsulting/django-plotly-dash/blob/e06bb465c55cb81ec100391031f6c7d259b779b8/django_plotly_dash/templates/django_plotly_dash/plotly_app.html#L1-L3 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 commented 1 year ago

@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!