Notify role="dialog" requires a label

[kirsty-hames]

Subject of the issue

Notify uses dialog role to help assistive technologies identify the dialog's content as being grouped and separated from the rest of the page content. Adding role="dialog" alone is not sufficient to make a dialog accessible and must be properly labeled. See MDN ARIA: dialog role description for reference.

Both NotifyPopupView and NotifyPushView use aria-labelledby and reference the Notify title to label the dialog however title properties aren't set as required and are sometimes removed in favour of having body text only.

In the instance no title is set, the dialog role isn't identified and the user is unaware the content is grouped/separate from the main page content.

Notify is utilised by core and plugins. See below (and please add any I've missed):

• Core question model
• Bookmarking
• LanguagePicker
• Hotgraphic
• Narrative
• Hotgrid
• Visua11y

Example using MCQ feedback

When _feedback title is set, .notify__title is used to label the popup dialog. Which reads "Feedback dialog".

When no _feedback title is set,.notify__title is still referenced by aria-labelledby but the element doesn't exist so the popup dialog has no label. "dialog" isn't announced.

Expected behaviour

I think most content authors won't be aware of the accessibility implications by not setting a title so either highlighting this in the instruction/help text, setting titles as required or providing a fallback should prevent this.

[kirsty-hames]

Core question model
#484 sets a default value "Feedback" for _globals._accessibility.altFeedbackTitle. This provides a global feedback title in the instance a component level _feedback.title (or _feedback.altTitle isn't set).

Bookmarking
A default value is already set for _bookmarking.title.
I'd suggest replacing default "Bookmarking" with something more meaningful such as"Continue?".

LanguagePicker
warningTitle sets the dialog title and is already set as required - no further action.

Visua11y
A default value is already set for _visua11y.title.

Hotgraphic, Narrative and Hotgrid
The dialog title is set by _items[].title. It's difficult to set default values as component titles will be content specific. I'd suggest making _items[].title required. Alternatively and less favourable, create a generic aria-label in the instance a title doesn't exist e.g. "Item 1 of 3".

Overall, I think if a property is required to enable accessibility, then those properties should be set as required.

Please add any comments or suggestions below. I'll wait for feedback before raising issues/PRs for the suggestions above.

[kirsty-hames]

Closing as all plugins listed now have a suitable fallback or a required property to provide an accessible dialog label.