Dialog[Accessibility]: Required ARIA Attribute "aria-level" not present

[Hardhik]

https://developer.microsoft.com/en-us/fabric#/components/dialog

Click on the open dialog. If you run any Accessibility tools, we can see the error:
"Required ARIA attribute not present: aria-level"

This is error is coming for the dialog's title

For the element with role as heading, setting the aria-label="1" should fix this issue.

[dzearing]

hmm @cschlechty and @JasonGore aria-label="1" seems like the wrong fix to me; what do you think? I'm a bit confused here. The markup in question:

          <p className={classNames.title} id={titleId} role="heading">
            {title}
          </p>

What should be done here? We could pipe title into aria-label, or we could expose titleAriaLabel but it's not obvious about why this should exist, if the element content is sufficient.

[JasonGore]

According to ARIA heading role guidelines, roles of type heading that have logical outline require aria-level. I haven't found a clear definition for logical outline so my best guess here is that it's caused by heading being a child of dialog.

In any case, ARIA defines aria-level as a value greater than or equal to 1.

Assuming dialogs are considered root level, DOM hierarchy level in this case is accurate, so if there is an easy way to specify that number (nested level of the heading element), that would probably be the best fix.

[cschlechty]

There should be an aria-level for anything with role="heading". Since it's in page, and not iframed, it should at best be level 2.

[micahgodbolt]

@cschlechty is this something we should simply set at level 2? Or will there be opportunities where people need to change this? Same goes for other areas that we use role="header" (like the linked combobox issue)