Merge pull request #18 from mpolidori/fix/WCAG-2.1-compliance

[WCAG][s]: Adds aria-labels to input and changes "i" tag to "span"
datopian · Dec 9, 2020 · 924ed63 · 924ed63
2 parents 9222554 + d8949be
commit 924ed63
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 7 deletions.
diff --git a/dist/DatastoreSearchSql.js b/dist/DatastoreSearchSql.js
@@ -155,16 +155,24 @@ function DatastoreSearchSql(props) {
       }, _react.default.createElement(_reactDatePicker.default, {
         value: values.startDate,
         clearIcon: "X",
+        nativeInputAriaLabel: "Start date input box",
+        dayAriaLabel: "Start day",
+        monthAriaLabel: "Start month",
+        yearAriaLabel: "Start year",
         onChange: function onChange(val) {
           return setFieldValue("startDate", val);
         },
         format: "yyyy-MM-dd"
-      }), _react.default.createElement("i", {
+      }), _react.default.createElement("span", {
         className: "fa fa-long-arrow-right",
         "aria-hidden": "true"
       }), _react.default.createElement(_reactDatePicker.default, {
         value: values.endDate,
         clearIcon: "X",
+        nativeInputAriaLabel: "End date input box",
+        dayAriaLabel: "End day",
+        monthAriaLabel: "End month",
+        yearAriaLabel: "End year",
         onChange: function onChange(val) {
           return setFieldValue("endDate", val);
         },
@@ -189,6 +197,7 @@ function DatastoreSearchSql(props) {
               className: "dq-rule-item"
             }, _react.default.createElement(_formik.Field, {
               name: "rules.".concat(index, ".combinator"),
+              "aria-label": "Choose combinator: AND/OR",
               component: "select",
               className: "form-control",
               required: true
@@ -198,6 +207,7 @@ function DatastoreSearchSql(props) {
               value: "OR"
             }, "OR")), _react.default.createElement(_formik.Field, {
               name: "rules.".concat(index, ".field"),
+              "aria-label": "Choose field",
               component: "select",
               className: "form-control",
               required: true
@@ -208,6 +218,7 @@ function DatastoreSearchSql(props) {
               }, field.title || field.name);
             })), _react.default.createElement(_formik.Field, {
               name: "rules.".concat(index, ".operator"),
+              "aria-label": "Choose operator",
               component: "select",
               className: "form-control",
               required: true
@@ -218,6 +229,7 @@ function DatastoreSearchSql(props) {
               }, operator.label);
             })), _react.default.createElement(_formik.Field, {
               name: "rules.".concat(index, ".value"),
+              "aria-label": "Input custom rule",
               className: "form-control",
               required: true
             }), _react.default.createElement("button", {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@datopian/datastore-query-builder",
-  "version": "0.4.11",
+  "version": "0.4.12",
   "private": false,
   "module": "dist/index.js",
   "main": "dist/index.js",

diff --git a/src/DatastoreSearchSql.js b/src/DatastoreSearchSql.js
@@ -102,12 +102,20 @@ function DatastoreSearchSql(props) {
               <DatePicker
                 value={values.startDate}
                 clearIcon='X'
+                nativeInputAriaLabel="Start date input box"
+                dayAriaLabel="Start day"
+                monthAriaLabel="Start month"
+                yearAriaLabel="Start year"
                 onChange={val => setFieldValue(`startDate`, val)}
                 format='yyyy-MM-dd' />
-              <i className="fa fa-long-arrow-right" aria-hidden="true"></i>
+              <span className="fa fa-long-arrow-right" aria-hidden="true"></span>
               <DatePicker
                   value={values.endDate}
                   clearIcon='X'
+                  nativeInputAriaLabel="End date input box"
+                  dayAriaLabel="End day"
+                  monthAriaLabel="End month"
+                  yearAriaLabel="End year"
                   onChange={val => setFieldValue(`endDate`, val)}
                   returnValue='end'
                   format='yyyy-MM-dd'
@@ -127,21 +135,21 @@ function DatastoreSearchSql(props) {
                 {values.rules && values.rules.length > 0 ? (
                   values.rules.map((rule, index) => (
                     <div key={index} className="dq-rule-item">
-                      <Field name={`rules.${index}.combinator`} component="select" className="form-control" required>
+                      <Field name={`rules.${index}.combinator`} aria-label="Choose combinator: AND/OR" component="select" className="form-control" required>
                         <option value="AND">AND</option>
                         <option value="OR">OR</option>
                       </Field>
-                      <Field name={`rules.${index}.field`} component="select" className="form-control" required>
+                      <Field name={`rules.${index}.field`} aria-label="Choose field" component="select" className="form-control" required>
                         {otherFields.map((field, index) => (
                           <option value={field.name} key={`field${index}`}>{field.title || field.name}</option>
                         ))}
                       </Field>
-                      <Field name={`rules.${index}.operator`} component="select" className="form-control" required>
+                      <Field name={`rules.${index}.operator`} aria-label="Choose operator" component="select" className="form-control" required>
                         {operators.map((operator, index) => (
                           <option value={operator.name} key={`operator${index}`}>{operator.label}</option>
                         ))}
                       </Field>
-                      <Field name={`rules.${index}.value`} className="form-control" required />
+                      <Field name={`rules.${index}.value`} aria-label="Input custom rule" className="form-control" required />
                       <button
                         type="button"
                         className="btn btn-default dq-btn-remove"