feat(common): update node, big-design, and jest to latest

Author: bc-chaz

.github/workflows/validate-workflow.yml

@@ -16,7 +16,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [12.x, 14.x, 16.x]
+        node-version: [14.x, 16.x, 18.x]
 
     steps:
     - name: Checkout code

.nvmrc

@@ -0,0 +1 @@
+14

README.md

@@ -8,7 +8,7 @@ This demo includes all of the files necessary to get started with a basic, hello
 
 To get the app running locally, follow these instructions:
 
-1. [Use Node 12+ and NPM 7+](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm#checking-your-version-of-npm-and-node-js)
+1. [Use Node 14+ and NPM 7+](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm#checking-your-version-of-npm-and-node-js)
 2. Install npm packages
     - `npm install`
 3. [Add and start ngrok.](https://www.npmjs.com/package/ngrok#usage) Note: use port 3000 to match Next's server.

components/form.tsx

@@ -19,7 +19,7 @@ const Form = ({ formData, onCancel, onSubmit }: FormProps) => {
     const [errors, setErrors] = useState<StringKeyValue>({});
 
     const handleChange = (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-        const { name: formName, value } = event?.target;
+        const { name: formName, value } = event.target || {};
         setForm(prevForm => ({ ...prevForm, [formName]: value }));
 
         // Add error if it exists in FormErrors and the input is empty, otherwise remove from errors
@@ -33,7 +33,7 @@ const Form = ({ formData, onCancel, onSubmit }: FormProps) => {
     };
 
     const handleCheckboxChange = (event: ChangeEvent<HTMLInputElement>) => {
-        const { checked, name: formName } = event?.target;
+        const { checked, name: formName } = event.target || {};
         setForm(prevForm => ({ ...prevForm, [formName]: checked }));
     };
 

components/header.tsx

@@ -58,8 +58,8 @@ const Header = () => {
     });
 
     const items = [
-        { id: TabIds.HOME, title: 'Home' },
-        { id: TabIds.PRODUCTS, title: 'Products' },
+        { ariaControls: 'home', id: TabIds.HOME, title: 'Home' },
+        { ariaControls: 'products', id: TabIds.PRODUCTS, title: 'Products' },
     ];
 
     const handleTabClick = (tabId: string) => {