Modal should be contained in a landmark

[mjbp]

The modal component used for modal confirmation and modal search patterns moves the dialog markup in the source (this is necessary to prevent tab/swiping out of the modal), this means that the dialogs are no longer contained in a landmark.

I suggest we

• add an appropriate landmark to the element containing the dialog (search for search modal, region for confirmation)
• add line to ACs requiring a containing landmark

[mjbp]

@susannah-rogers This is now on Netlify ready for testing.

[susannah-rogers]

@mjbp I can see the landmark has been added, but NVDA isn't picking it up...

[mjbp]

@susannah-rogers @sarah-storm updated this one to add an aria-labelledby to the landmark which helps NVDA to identify it.

Sarah noted:
"Added an 'aria-labelledby' to the region landmarks so that NVDA will pick them up. I've re-used the label from the dialog, I'm not sure if the repetition of this is OK here - or maybe we need to think of other instructional wording. It would be good to test if it's read twice and see what Susannah thinks. It seemed to be for me that it was only read once as the regions are only dealt with one at a time by NVDA, but I'm aware I'm really not a typical user!"

On Netlify for you to test at your convenience.

[susannah-rogers]

@sarah-storm The landmark on https://storm-ui-patterns.netlify.app/example/modal-confirmation/ is now showing as 'Are you sure?' in NVDA rather than 'region'. This means that it reads 'are you sure' twice - full text below:
'Are you sure. Dialog: This will permanently remove this item. Delete button. Are you sure? Button delete, button cancel.'

[sarah-storm]

Closing this ticket as complete. Looking at the W3c example of role="dialog" they are also re-using a header as the aria-labelledby marker, therefore I think this is acceptable to do.

https://www.w3.org/WAI/GL/wiki/Using_the_region_role_to_identify_a_region_of_the_page