Fix #13299: Misconfigured "Port" label and input fields (#14134)

Closes #13299

* Add `aria-labelledby` attribute to numeric form fields

* Update affected Cypress tests

frontend/src/metabase/components/form/widgets/FormNumericInputWidget.jsx

@@ -8,6 +8,7 @@ const FormInputWidget = ({ placeholder, field }) => (
   <NumericInput
     className="Form-input full"
     placeholder={placeholder}
+    aria-labelledby={`${field.name}-label`}
     {...formDomOnlyProps(field)}
   />
 );

frontend/test/metabase-db/mongo/add.cy.spec.js

@@ -25,9 +25,7 @@ describe("mongodb > admin > add", () => {
 
     typeAndBlurUsingLabel("Name", "QA Mongo4");
     typeAndBlurUsingLabel("Host", "localhost");
-    cy.findByPlaceholderText("27017")
-      .click()
-      .type("27017");
+    typeAndBlurUsingLabel("Port", "27017");
     typeAndBlurUsingLabel("Database name", "sample");
     typeAndBlurUsingLabel("Username", "metabase");
     typeAndBlurUsingLabel("Password", "metasample123");

frontend/test/metabase-db/mysql/add.cy.spec.js

@@ -25,11 +25,7 @@ describe("mysql > admin > add", () => {
 
     typeAndBlurUsingLabel("Name", "QA MySQL8");
     typeAndBlurUsingLabel("Host", "localhost");
-    // TODO: "Port" label and input field are misconfigured (input field is missing `aria-labeledby` attribute)
-    // typeAndBlurUsingLabel("Port", "3306") => this will not work (switching to placeholder temporarily)
-    cy.findByPlaceholderText("3306")
-      .click()
-      .type("3306");
+    typeAndBlurUsingLabel("Port", "3306");
     typeAndBlurUsingLabel("Database name", "sample");
     typeAndBlurUsingLabel("Username", "metabase");
     typeAndBlurUsingLabel("Password", "metasample123");

frontend/test/metabase-db/postgres/add.cy.spec.js

@@ -25,11 +25,7 @@ describe("postgres > admin > add", () => {
 
     typeAndBlurUsingLabel("Name", "QA Postgres12");
     typeAndBlurUsingLabel("Host", "localhost");
-    // TODO: "Port" label and input field are misconfigured (input field is missing `aria-labeledby` attribute)
-    // typeAndBlurUsingLabel("Port", "5432") => this will not work (switching to placeholder temporarily)
-    cy.findByPlaceholderText("5432")
-      .click()
-      .type("5432");
+    typeAndBlurUsingLabel("Port", "5432");
     typeAndBlurUsingLabel("Database name", "sample");
     typeAndBlurUsingLabel("Username", "metabase");
     typeAndBlurUsingLabel("Password", "metasample123");