@madie/madie-design-system 1.0.19 → 1.0.20

package/components/MadieDialog/index.jsx

@@ -103,6 +103,7 @@ const MadieDialog = ({
                                         color: "#242424",
                                     }}
                                     data-testid="close-button"
+                                    aria-label="Close"
                                 />
                             </IconButton>
                         </div>

package/components/Select/index.jsx

@@ -32,8 +32,8 @@ const Select = ({
     return (
         <FormControl error={error} fullWidth>
             <InputLabel
+                id={`${id}-label`}
                 disabled={disabled}
-                htmlFor={id}
                 required={required}
                 shrink
             >
@@ -75,7 +75,8 @@ const Select = ({
                 disabled={disabled}
                 required={required}
                 id={id}
-                label={null}
+                aria-describedby={`${id}-helper-text`}
+                labelId={`${id}-label`}
                 renderValue={(selected) => {
                     if (placeHolder) {
                         if (selected === placeHolder.value) {
@@ -89,7 +90,10 @@ const Select = ({
                 {options && options}
             </MUISelect>
             {helperText && (
-                <FormHelperText data-testid={`helper-text`}>
+                <FormHelperText
+                    data-testid={`helper-text`}
+                    id={`${id}-helper-text`}
+                >
                     {helperText}
                 </FormHelperText>
             )}

package/components/TextField/index.jsx

@@ -1,5 +1,9 @@
 import React from "react";
-import { FormControl, TextField as MUITextField } from "@mui/material";
+import {
+    FormControl,
+    TextField as MUITextField,
+    FormHelperText,
+} from "@mui/material";
 import InputLabel from "../InputLabel";
 import PropTypes from "prop-types";
 
@@ -57,7 +61,9 @@ const TextField = ({
                 id={id}
                 {...rest}
             />
-            {helperText && helperText}
+            <FormHelperText id={`${id}-helper-text`}>
+                {helperText && helperText}
+            </FormHelperText>
         </FormControl>
     );
 };