[confirm-dialog] Minor accessibility enhancements

[anezthes]

Heading

Accessibility guidelines recommend using headings in order: <h1>, <h2>, <h3>, etc. Each page should have an <h1>, describing the main purpose of the page (similarly to a page title), and it's recommended to only use one per page.

Confirm Dialog uses <h3> for its title, implying the dialog is a subsection of <h2> from a content hierarchy/document outline point-of-view. If we need a default/hard-coded heading, I'd argue <h2> is the safer/expected option.

aria-labelledby & aria-describedby

When a title is present, is should be given an id and used as a label for the dialog (via aria-labelledby). Similarly, Confirm Dialogs featuring support text would benefit from setting the aria-describedby attribute to the id of the element used for displaying the text.

Related: https://github.com/vaadin/vaadin-dialog/issues/227

Header & footer

We could/should also consider using <header> and <footer> tags to improve accessibility and to give the structure some more semantic meaning.

Examples:

• https://allyjs.io/tutorials/accessible-dialog.html
• https://atlassian.design/components/modal-dialog/
• https://www.lightningdesignsystem.com/components/modals/

[knoobie]

I would argue against a forced <h2> or <h3> this creates problems for the developer, because you are forcing a hierarchy. Vaadin doesn't know in which depth the dialog is or should be.

Typically a web application is like this:

• H1 Page title
  • H2 Form title
    • H3 Confirm Dialog of the form

Another example:

• H1 Page title
  • H2 Form title
    • H3 Sub Form 1 title
    • H3 Sub Form 2 title
      • H4 Confirm Dialog for sub form 2

Instead of the forced hierarchy, I would recommend to use <header> combined with either no <h*> or allowing the developer to change it.

[web-padawan]

We have added header & footer to vaadin-dialog and they use <header> and <footer> HTML tags:

web-components/packages/dialog/src/vaadin-dialog.js

Lines 18 to 21 in 5d0cdee

	/* prefixing with the element tag to avoid styling confirm-dialog header part */
	header[part='header'] {
	display: flex;
	}

web-components/packages/dialog/src/vaadin-dialog.js

Lines 27 to 31 in 5d0cdee

	/* prefixing with the element tag to avoid styling confirm-dialog footer part */
	footer[part='footer'] {
	display: flex;
	justify-content: flex-end;
	}

So this issue should be eventually about updating vaadin-confirm-dialog to use these elements.