Skip to content
GitLab
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • B bootstrap
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 263
    • Issues 263
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 114
    • Merge requests 114
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Bootstrap
  • bootstrap
  • Issues
  • #37591
Closed
Open
Issue created Dec 06, 2022 by Louis-Maxime Piton@louismaximepitonContributor2 of 2 checklist items completed2/2 checklist items

Accordion: Missing role on `.accordion-collapse` ?

Prerequisites

  • I have searched for duplicate or closed feature requests
  • I have read the contributing guidelines

Proposal

I don't really what's the best here, but I think we should either add a role="region" or remove our aria-labelledby="*" from our .accordion-collapse.

Motivation and context

There is one reason that made me think of this, and several things that make me struggle on the solution to choose, I'll try to present them here.

Reason

Some observations on aXe DevTools inside my browser. It raises this: image

Add role="region"

I must admit that my heart is going to this solution since W3C seems to recommand it in their example page (here).

That said, it seems that several front-end framework/design system encourage to use this solution everytime such as Material Angular and Adobe.

As an alternative maybe we could use a <section> as well as in Aditus.

Remove aria-labelledby="*"

On the other side, I could find several sources on web that doesn't implement the role="region". I feel like it's more personal projects, but there are also some front-end frameworks that display it such as Getuikit.

If we remove this one, maybe we should add a paragraph to mention that this role depends on the content whether it's significant or not ?

Assignee
Assign to
Time tracking