search

adaptlearning / adapt-contrib-core

Adapt Framework kernel. Responsible for boot loading, data loading and core APIs.
GNU General Public License v3.0
3 stars 17 forks source link

heading completion aria-label selector is too generic and easily overwritten #561

Closed kirsty-hames closed 4 months ago

kirsty-hames commented 4 months ago

Subject of the issue

All headings include a completion description aria-label. This is added via the heading hbs and updated by headingView. The selector .aria-label is a generic class used to apply styling to visually hide an element and is used throughout Adapt.

In the instance an a11y_alt_text helper is used within a displayTitle, the generic selector .aria-label shared between the completion description aria-label and a11y_alt_text helper means the completion description overrides the a11y_alt_text. See screen shots below.

Incomplete component The first .aria-label includes the completion description as expected. The second .aria-label includes the helper alternative text as expected. This reads "Incomplete. I wish I had five billion dollars"

incomplete_aria

Complete component The first .aria-label includes the completion description as expected. The second .aria-label has been overwritten by the completion description. This reads "Completed. I wish I had Completed."

complete_aria

Expected behaviour

Only use .aria-label to inherit styling. Use js- prefixed selectors for functionality. This will prevent functionality clashes between elements of a shared selector.