Base Theme and Additional Styles
See style usage guidelines in description and comments of base theme ticket: DCB-874 - Getting issue details... STATUS
Modal component
All modals should have:
A header containing
A close "X" icon button on the left.
A title, centered horizontally and vertically within the header area.
Guidelines for text
A body containing the main content.
A footer containing action buttons and/or links.
At least one button should be presented.
When a "Cancel" button is needed, it should always be positioned far left.
The primary action button should always be positioned far right.
Button labels should be in sentence case e.g. "Import file".
Modals should be movable, allowing the user to reposition them.
Error messages
Error text should be succinct and unambiguous. The nature of the error should be described first, followed by additional information such as the rule which has not been met or the reason for the error, then lastly the recommended action for the user:
[the error][the rule / reason for the error][the recommended action]
Important information such as filename, fieldnames and counts should be highlighted in bold.
Examples:
a-different-file.csv has no content. The file must not be empty. Please select a file with content
A-different-file.csv is 11.4 MB. Maximum file size is 10 MB. Please select a smaller file
a-file-name.pdf is in an unsupported format. Valid formats are CSV and TSV. Please select a file in a valid format
Display of content based on user permissions
If a user’s permissions do not allow them access to a feature or content then it should not be displayed.
Accessibility
Link targets
Accessibility guidelines advise that:
Opening new tabs/windows should be minimised, unless there is a good reason (such as needing to view instructions for a form separately, or to display terms and conditions relating to a form).
Vision impaired users and neuro-diverse users need to be warned that a link will open a new tab/window.
Our approach
For all links, ensure that it is possible for users to control when a link opens in new tab/window by making sure the browser’s native “Open in new tab” and “Open in new window” options are always available.
For links which open in an new window.
Append a standard icon to the end of the link
import OpenInNewIcon from '@mui/icons-material/OpenInNew';
Hide the icon from screen readers
aria-hidden="true"
Ensure the words “opens in a new window” are voiced by screen readers
append the screen reader warning automatically at the end of the link following the icon.