[a11y] Compatibility with RGAA (French WCAG)

[cspiga]

Hello ! My team is working on an app that will be used by french universities. For the frontend, we've chosen to work with Vue and Quasar.

An external agency made an accessibility audit. Following it, we've made some fixes to our code to improve our app, but we've listed some changes we think can't be made without modifying Quasar directly.

---

Missing tags and attributes, customize all aria-labels.

According to RGAA, field must be accessible through screen readers.

• QStepper current header step must have a aria-current="step" attribute.
• QTable must include a <caption> tag.
• QTh sorting button must have an aria-sort attribute.
• Some aria-labels are misplaced, it could be simpler to add/remove those fields, or to define slots to change them (on QBtnDropdown, QExpansionItem).

Change span tags to buttons.

According to RGAA, field must be accessible through keyboard navigation.
The spacebar may be used to "click" on some elements of the interface, so <button> tags are needed on some elements.

• QChip must be rendered with a <button> if used in a <select>.
• QExpansionItem must be rendered with a <button>. Then, tabindex should not be a descendant of this element.
• QField clearable : the generated <div> must include a <button> tag with a title attribute.
• QTh sorting button must be rendered with a <button>.

HTML Validation.

According to RGAA, generated source code must be valid.
Testing an app with the W3C Markup Validation Service returns various errors :

• QBreadcrumbs, QBreadcrumbsEl : Attribute href not allowed on element <a role="listitem"> at this point. (roles list and listitem are needed)
• QBtnDropdown : An element with the attribute tabindex must not appear as a descendant of the button element.
• QBtnDropdown, QSelect : The aria-controls attribute must point to an element in the same document.
• QField : Element div not allowed as child of element label in this context.
• QImg : An img element must have an alt attribute, except under certain conditions. (some images can have an empty alt attribute, but the component removes them)
• QOptionGroup in a QField : Any input descendant of a label element with a for attribute must have an id value that matches that for attribute.
• QOptionGroup in a QField : The label element may contain at most one button, input, meter, output, progress, select, or textarea descendant.
• QOptionGroup in a QField : The value of the for attribute of the label element must be the ID of a non-hidden form control.
• QSeparator : Attribute aria-orientation not allowed on element <hr role="presentation"> at this point. (role is needed)

Customize all roles.

According to RGAA, we should pay attention to the presentation tags and attributes.
Some roles are misplaced it could be simpler to add/remove those fields, or to define slots to change them (on QBtnDropdown, QTabPanel, QToolbar).

Structure lists.

According to RGAA, list must be correctly structured.

• QPagination buttons must be structured with <ul> and <li> tags.
• QStepper headers steps must be structured with <ol> and <li> tags.

[Bug ?] Restructure error management.

According to RGAA, field control is needed.
An attribute aria-invalid="true" must be set on QField if control is not met. May be already implemented through this pull request #9988 , but the attribute doesn't show in our app (even if an error message is shown).
Also, error message must be structured with <p> tags, which can be done with v-slot:error, but we haven't seen if it's possible to set this slot with the rules attribute, to get multiple error messages.

---

Maybe some of those changes can be made in our code directly. We haven't used Quasar a lot, so there may be some tweaks we can do on our side.

Thanks in advance !