update Alert docs (#395)

packages/web-ui/src/Alert/Alert.docs.mdx

@@ -28,13 +28,14 @@ The `colorScheme` prop will change the Alert colours.
 
 ## Accessibility
 
-Alerts should be used sparingly.
-
-Alerts are dynamic content, usually time-sensitive, that is injected into the
-page when it changes and a person using a screenreader needs to know that some
-state of the application has changed. If an alert is present on page load, it
-won’t be read automatically by screenreaders. If an element is present on page
-load, it is not technically an alert.
+The `Alert` component should be used sparingly. It has an ARIA role of `alert`,
+used to communicate an important and usually time-sensitive message to the
+user. The browser will send out an accessible alert event to assistive
+technology products which can then notify the user.
+
+The `alert` role is for content that is dynamically displayed, not for content
+that appears on page load. If an alert is present on page load, it won’t be
+read automatically by screenreaders, and is not technically an alert.
 
 To display the `Alert` component, use either conditional rendering or
 dynamically alter the CSS `display` property in your React code.

packages/web-ui/src/utils/media-queries.ts

@@ -1,5 +1,9 @@
 import { breakpoints } from '../tokens';
 
+/**
+ * A lot of this file is directly copied from MUI - https://github.com/mui/material-ui/blob/next/packages/mui-system/src/createTheme/createBreakpoints.js
+ */
+
 const unit = 'px';
 const step = 5;
 const mq = (breakpoint: string) => `@media (min-width:${breakpoint})`;