feat: Override TextField for improve accessibility

Add an ID to make label and helperText accessible to screen readers

Author: Merkur39

react/MuiCozyTheme/TextField/index.js

@@ -0,0 +1,17 @@
+import React, { forwardRef } from 'react'
+import MuiTextField from '@material-ui/core/TextField'
+
+const TextField = forwardRef(({ children, ...props }, ref) => {
+  // A11Y, https://v4.mui.com/api/text-field/#props
+  const uuid = crypto.randomUUID()
+
+  return (
+    <MuiTextField ref={ref} id={uuid} {...props}>
+      {children}
+    </MuiTextField>
+  )
+})
+
+TextField.displayName = 'TextField'
+
+export default TextField

react/MuiCozyTheme/TextField/index.jsx

@@ -1,9 +1,16 @@
 import '@testing-library/jest-dom/extend-expect'
 import { configure, mount, shallow } from 'enzyme'
 import Adapter from 'enzyme-adapter-react-16'
+import nodeCrypto from 'crypto'
 
 configure({ adapter: new Adapter() })
 
+Object.defineProperty(global, 'crypto', {
+  value: {
+    randomUUID: () => nodeCrypto.randomUUID()
+  }
+})
+
 global.mount = mount
 global.shallow = shallow