Small alignments with nhsuk-frontend

Author: Tomdango

src/components/care-card/CareCard.tsx

@@ -36,6 +36,7 @@ const CareCardHeading: React.FC<CareCardHeadingProps> = ({
   children,
   visuallyHiddenText,
   headingLevel,
+  role,
   ...rest
 }) => {
   const cardType = useContext(CareCardContext);
@@ -46,7 +47,7 @@ const CareCardHeading: React.FC<CareCardHeadingProps> = ({
         headingLevel={headingLevel}
         {...rest}
       >
-        <span role="heading">
+        <span role={role}>
           {visuallyHiddenText !== false ? (
             <span className="nhsuk-u-visually-hidden">
               {visuallyHiddenText || genHiddenText(cardType)}
@@ -60,6 +61,10 @@ const CareCardHeading: React.FC<CareCardHeadingProps> = ({
   );
 };
 
+CareCardHeading.defaultProps = {
+  role: 'text',
+};
+
 interface CareCard extends React.FC<CareCardProps> {
   Content: React.FC<HTMLProps<HTMLDivElement>>;
   Heading: React.FC<CareCardHeadingProps>;

src/components/header/components/Nav.tsx

@@ -25,8 +25,9 @@ const Nav: React.FC<HTMLProps<HTMLDivElement>> = ({
       <Container>
         <p className="nhsuk-header__navigation-title">
           <span>Menu</span>
-          <button className="nhsuk-header__navigation-close" onClick={toggleMenu}>
+          <button className="nhsuk-header__navigation-close" type="button" onClick={toggleMenu}>
             <CloseIcon />
+            <span className="nhsuk-u-visually-hidden">Close menu</span>
           </button>
         </p>
         <ul className="nhsuk-header__navigation-list">{children}</ul>