Give every modal a header with title and close button

[dhinrichs-scottlogic]

Feature Request

Description

• Give every modal a header with heading and close button ("close" text and an X icon)
• Adjust all pop up modals (Welcome modal, Mission Information, Handbook and Document viewer)
• Replace the modal close button (curently an X at the top right corner) with a button with the text "Close" and an X icon. Add aria-hidden to the icon. Remove tooltips and aria-labels from the close button.

Acceptance criteria

GIVEN A modal is open THEN there is a header with title and close button

WHEN A visual user looks for the close button THEN they see a "Close" button and an X icon with a round border,

WHEN A screen reader user tabs to the close button THEN they hear "Close, button" but do not hear the icon announced.

Wireframes:

Welcome modal: Mission Info: Document Viewer: Handbook:

Notes:

Who knew close buttons can be so controversial 😄! Here's some interesting articles on this: https://www.htmhell.dev/20-close-buttons/ https://statics.teams.cdn.office.net/evergreen-assets/safelinks/1/atp-safelinks.html

[m4rkwallace-SL]

Added these to the figma file

[dhinrichs-scottlogic]

During discussion, we anticipated an issue with the scrolling of the modals interfering with the close button. One idea to work around that was to give the modals headers, with a heading and a close button. Headings would be a great addition to the modals.