Add AlertDialog component; Update SelectRoleDialog component

Adds AlertDialog component (based on reach Alert Dialog component).
Replaces Dialog component (based on reach Dialog (Modal) component) with AlertDialog in SelectRoleDialog component which reads out the AlertDialogLabel (title) and AlertDialogDescription (several paragraphs) when using a screen reader.

Notes

Although the Alert Dialog component is the right one for the scenario, the lack of a dismiss button where the focus should begin on open on the least destructive action button (close) makes the SelectRoleDialog component less accessible and does not allow the user to escape from the screen. Adding a [least destructive action] button (ex. X icon) to close the screen in the top right-hand corner would achieve this as well as start the focus on an element that would appear before the buttons and therefore make it easier for a screen reader user to navigate to the title and description paragraphs rather than have to listen to it all being read out (for when using the Dialog (Modal)). If the least destructive action button cannot be an option, than an inferior and less accessible solution exists but would require some text to appear in the modal:

The only time you shouldn't close the dialog on dismiss is when the dialog requires a choice and none of them are "cancel". For example, perhaps two records need to be merged and the user needs to pick the surviving record. Neither choice is less destructive than the other, in these cases you may want to alert the user they need to a make a choice on dismiss instead of closing the dialog.

source: reach docs

GCTC-NTGC / gc-accessibility-passport

Add AlertDialog component; Update SelectRoleDialog component #200

Notes