Add an API to set aria-level for the heading of the accordion panel

[jcgueriaud1]

What is the problem?

Currently the <vaadin-accordion-heading> has a role heading but you can't set the aria-level.
So it's considered as level 2 which is not necessary the required level in a page.

Is it possible to add an API for it?

At least VoiceOver + Chrome and Safari are detecting Heading 2 in this page https://vaadin.com/docs/latest/example?embed=accordion-basic-wc.js&import=component/accordion/accordion-basic.ts

Browsers

• Chrome
• Firefox
• Safari
• Safari on iOS
• Edge

Screen Readers

• None
• NVDA
• JAWS
• VoiceOver on MacOS
• VoiceOver on iOS

[knoobie]

I've added the appropriate h* elements inside the accordion's heading. (Which did not fail our last accessibility test)

[jcgueriaud1]

At least in Voice Over it doesn't give me the correct level of title on Safari and Chrome you can see the title in h2 and h3.

With this code:

        add(new H1("H1 title"));
        Accordion accordion = new Accordion();
        accordion.add("Title as Text", new Span("Sophia Williams"));
        accordion.add("Title2 as Text", new Span("Sophia Williams2"));
        add(accordion);

        add(new H2("H2 Title"));
        Accordion accordion2 = new Accordion();
        accordion2.add(new AccordionPanel(new H3("Title in H3"), new Span("Sophia Williams")));
        accordion2.add(new AccordionPanel(new H3("Title2 in H3"), new Span("Sophia Williams2")));
        add(accordion2);
        add(new H3("H3 Title"));

And also the IBM Equal Access Accessibility Checker is complaining about the missing aria-level (If you expect a h2 then I guess it would be a false positive).