From bf0de81c575f49cd0a094f736edfa1976decd9cc Mon Sep 17 00:00:00 2001
From: Thomas Tracy <contact@tjtracy.com>
Date: Tue, 29 Sep 2020 13:37:19 -0400
Subject: [PATCH] Ttracy/demographics bugs 19 20 (#25148)

* Focus first input when loading a wizard page

* Add aria-hidden to info icon:
---
 .../DemographicsCollectionModal.jsx                   | 11 +++++++----
 .../js/demographics_collection/SelectWithInput.jsx    |  1 +
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/lms/static/js/demographics_collection/DemographicsCollectionModal.jsx b/lms/static/js/demographics_collection/DemographicsCollectionModal.jsx
index ecd1518b55..420dd52119 100644
--- a/lms/static/js/demographics_collection/DemographicsCollectionModal.jsx
+++ b/lms/static/js/demographics_collection/DemographicsCollectionModal.jsx
@@ -272,7 +272,7 @@ class DemographicsCollectionModal extends React.Component {
                     {gettext('Welcome to edX! Before you get started, please take a few minutes to fill-in the additional information below to help us understand a bit more about your background. You can always edit this information later in Account Settings.')}
                   </p>
                   <br />
-                  <span className="fa fa-info-circle" />
+                  <span aria-hidden className="fa fa-info-circle" />
                   {/* Need to strip out extra '"' characters in the marketingSiteBaseUrl prop or it tries to setup the href as a relative URL */}
                   <a className="pl-3" target="_blank" rel="noopener" href={`${this.props.marketingSiteBaseUrl}/demographics`.replace(/"/g, "")}>
                     {gettext('Why does edX collect this information?')}
@@ -355,6 +355,7 @@ class DemographicsCollectionModal extends React.Component {
                       {gettext("Have you ever served on active duty in the U.S. Armed Forces, Reserves, or National Guard?")}
                     </label>
                     <select
+                      autoFocus
                       className="form-control"
                       onChange={this.handleSelectChange}
                       name={FIELD_NAMES.MILITARY}
@@ -381,7 +382,9 @@ class DemographicsCollectionModal extends React.Component {
                     </label>
                     <select
                       className="form-control"
+                      autoFocus
                       onChange={this.handleSelectChange}
+                      key="self-education"
                       name={FIELD_NAMES.EDUCATION_LEVEL}
                       id={FIELD_NAMES.EDUCATION_LEVEL}
                       value={wizardConsumer[FIELD_NAMES.EDUCATION_LEVEL]}
@@ -399,7 +402,7 @@ class DemographicsCollectionModal extends React.Component {
                       {gettext("What is the highest level of education that any of your parents or guardians have achieved?")}
                     </label>
                     <select
-                      className="form-control pb-3"
+                      className="form-control"
                       onChange={this.handleSelectChange}
                       name={FIELD_NAMES.PARENT_EDUCATION}
                       id={FIELD_NAMES.PARENT_EDUCATION}
@@ -444,7 +447,7 @@ class DemographicsCollectionModal extends React.Component {
                       {gettext("What industry do you currently work in?")}
                     </label>
                     <select
-                      className="form-control pb-3"
+                      className="form-control"
                       onChange={this.handleSelectChange}
                       name={FIELD_NAMES.CURRENT_WORK}
                       id={FIELD_NAMES.CURRENT_WORK}
@@ -463,7 +466,7 @@ class DemographicsCollectionModal extends React.Component {
                       {gettext("What industry do you want to work in?")}
                     </label>
                     <select
-                      className="form-control pb-3"
+                      className="form-control"
                       onChange={this.handleSelectChange}
                       name={FIELD_NAMES.FUTURE_WORK}
                       id={FIELD_NAMES.FUTURE_WORK}
diff --git a/lms/static/js/demographics_collection/SelectWithInput.jsx b/lms/static/js/demographics_collection/SelectWithInput.jsx
index fae4088653..04fe826260 100644
--- a/lms/static/js/demographics_collection/SelectWithInput.jsx
+++ b/lms/static/js/demographics_collection/SelectWithInput.jsx
@@ -21,6 +21,7 @@ export const SelectWithInput = (props) => {
     <div className="d-flex flex-column pb-3">
       <label htmlFor={selectName}>{labelText}</label>
       <select
+        autoFocus
         className="form-control"
         name={selectName}
         id={selectId}