fix(Status): Pass refs to Status element

src/Status/README.mdx

@@ -25,7 +25,10 @@ For more control you can override each of these props.
 		const [showConfirmation, setShowConfirmation] = React.useState(false);
 		return (
 			<>
-				<Button onClick={() => setShowConfirmation(v => !v)}>
+				<Button
+					isActive={showConfirmation}
+					onClick={() => setShowConfirmation(v => !v)}
+				>
 					Click me
 				</Button>
 				<Status>
@@ -41,11 +44,11 @@ For more control you can override each of these props.
 
 Make sure that the `Status` component is always rendered – even when it's empty – before you update its contents. If the element is added alongside its content, screen readers will **not** announce it!
 
-The above example would break if it was written like below:
+The example below would not work:
 
 ```jsx
 {
-	showConfirmation && <Status>Congrats, you have clicked the button!</Status>;
+	showConfirmation && <Status>This status will NOT BE announced :(</Status>;
 }
 ```
 

src/Status/index.js

@@ -1,19 +1,22 @@
-import React from 'react';
+import React, {forwardRef} from 'react';
 import PropTypes from 'prop-types';
 
 import Box from '../Box';
 
-function Status(props) {
+const Status = forwardRef((props, ref) => {
 	return (
 		<Box
+			ref={ref}
 			role="status"
 			aria-live="polite"
 			aria-relevant="additions text"
 			{...props}
 			aria-atomic={props.atomic ? 'true' : props['aria-atomic']}
 		/>
 	);
-}
+});
+
+Status.displayName = 'Status';
 
 Status.propTypes = {
 	atomic: PropTypes.bool,