[WCAG][s]: Adds more aria-labels and use span instead of i

datopian · Dec 8, 2020 · d8949be · d8949be
1 parent 51d5eef
commit d8949be
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 6 deletions.
diff --git a/dist/DatastoreSearchSql.js b/dist/DatastoreSearchSql.js
@@ -163,7 +163,7 @@ function DatastoreSearchSql(props) {
           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, {
@@ -197,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
@@ -206,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
@@ -216,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
@@ -226,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/src/DatastoreSearchSql.js b/src/DatastoreSearchSql.js
@@ -108,7 +108,7 @@ function DatastoreSearchSql(props) {
                 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'
@@ -135,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"