Fix accessibility errors and alerts for broker registration views (#4402

) * edit plan page uplift (#4327) * first steps to plan details page * more work on cancellation * more improvements * finish UI changes * trying to fix form submittal * finish cancel plan work * need to run aptc update post outside * fix rspecs * fix cucumber * change form_for, remove bindings * cleanup rubocop * nit extra line * clean up, feature flag addition * add to config templates * improve tax credit section * finish tax credit * fix rubocop * put a restriction around tax credit button * cancellation reason added to plan details * chore: Update select language checkboxes in broker form Simplify and improve the code for rendering the select language checkboxes in the broker form. This change adds an ID attribute to each checkbox for better accessibility and updates the label element accordingly. * chore: Remove unnecessary h4 tag in _agency_information.html.erb * fix formating * Fix the date of birth field to broker personal information for accessibility. * Update the legal name field for accessibility. * Update the dba field for accessibility. * chore: Update label for market kind field in broker profile form for accessibility * chore: Update select language checkboxes in broker form * chore: Update address form fields for accessibility Improve accessibility in the address form by updating the labels and input fields. This change adds appropriate label elements and removes unnecessary attributes for better accessibility. * chore: Improve accessibility of attestation agreement fields Update the attestation agreement fields in the broker form to improve accessibility. This change adds appropriate label elements and updates the input fields for better accessibility. * chore: Update heading level in _address.html.erb for better accessibility * add tabindex to "add office location" button * chore: Add tabindex to "tabs" at top of page * chore: Improve accessibility of staff registration form Update the staff registration form to improve accessibility. This change includes adding appropriate label elements and updating the input fields for better accessibility. --------- Co-authored-by: Alec Turnbull <[email protected]>
ideacrew · Aug 29, 2024 · 1bb2de7 · 1bb2de7
1 parent 7a2d73d
commit 1bb2de7
Show file tree

Hide file tree

Showing 14 changed files with 144 additions and 97 deletions.
diff --git a/app/javascript/css/forms.scss b/app/javascript/css/forms.scss
@@ -54,7 +54,9 @@
 }
 
 label,
-legend {
+legend,
+.label,
+.legend {
   display: block;
   font-size: 16px;
   line-height: 24px;
@@ -74,7 +76,9 @@ button,
 }
 
 label.required:after,
+.label.required:after,
 legend.required:after,
+.legend.required:after,
 dt.required:after,
 .applications .required:not(input):not(select):after {
   content: '*';
@@ -96,7 +100,8 @@ select,
   &:hover {
     border-color: var(--grey-120);
   }
-  &:disabled, &[readonly] {
+  &:disabled,
+  &[readonly] {
     background: var(--grey-030);
     color: var(--input-text-color);
   }
@@ -308,7 +313,7 @@ input[type='date']:invalid::-webkit-datetime-edit {
   .broker-registration-tabs {
     border-bottom: 2px solid var(--silver-border);
     font-size: 0;
-    // font-size needs to be set to 0 here to hide 
+    // font-size needs to be set to 0 here to hide
     // the space between the jQuery-ui tabs
 
     li {
@@ -360,7 +365,7 @@ input[type='date']:invalid::-webkit-datetime-edit {
   }
 
   // adding border-0 to these classes does not work
-  // because it is a jquery-ui class 
+  // because it is a jquery-ui class
   #broker_registration,
   #broker_agency_staff {
     border: none;
@@ -370,12 +375,12 @@ input[type='date']:invalid::-webkit-datetime-edit {
   #broker_agency_staff {
     .table-responsive {
       table.broker-staff {
-        width: 100%; 
+        width: 100%;
         border-collapse: collapse;
 
         thead {
           height: 40px;
-          
+
           tr {
             color: var(--text-secondary);
             border-bottom: 1px solid var(--silver-border);
@@ -387,7 +392,7 @@ input[type='date']:invalid::-webkit-datetime-edit {
             padding: 10px;
           }
 
-          th { 
+          th {
             width: 18%;
             vertical-align: bottom;
           }
@@ -397,7 +402,7 @@ input[type='date']:invalid::-webkit-datetime-edit {
           &.agency-selected {
             border: 2px solid var(--button-tertiary-color);
 
-            tr { 
+            tr {
               background-color: var(--tertiary-tint);
             }
           }

diff --git a/app/javascript/css/main.scss b/app/javascript/css/main.scss
@@ -155,7 +155,7 @@ dl.parent {
   padding: 0;
   margin: 0;
   margin-bottom: 3ch;
-  grid-auto-rows: min-content
+  grid-auto-rows: min-content;
 }
 
 dd,
@@ -178,6 +178,26 @@ dl.parent.weight-n {
   }
 }
 
+.tax_credit_field_container {
+  height: 44px !important;
+}
+
+#personal_info {
+  input:not([type='checkbox']):not([type='radio']),
+  select,
+  .input {
+    width: 180px;
+  }
+
+  .no-ssn-container {
+    width: 180px;
+
+    label {
+      font-weight: normal;
+    }
+  }
+}
+
 .ethnicity-container {
   label {
     font-weight: 400;
@@ -227,27 +247,32 @@ ul.list-right-section {
   font-size: 16px;
   font-weight: 600;
 
-  &.badge-success, &.badge-green {
+  &.badge-success,
+  &.badge-green {
     background-color: var(--success-status-tint);
     border: 1px solid var(--success-color);
   }
 
-  &.badge-danger, &.badge-red {
+  &.badge-danger,
+  &.badge-red {
     background-color: var(--danger-status-tint);
     border: 1px solid var(--enrollment-status-red);
   }
 
-  &.badge-warning, &.badge-yellow {
+  &.badge-warning,
+  &.badge-yellow {
     background-color: var(--warning-status-tint);
     border: 1px solid var(--warning-border);
   }
 
-  &.badge-info, &.badge-blue {
+  &.badge-info,
+  &.badge-blue {
     background-color: var(--info-tint);
     border: 1px solid var(--info-color);
   }
 
-  &.badge-absent, &.badge-grey {
+  &.badge-absent,
+  &.badge-grey {
     background-color: var(--grey-040);
     border: 1px solid var(--grey-160);
   }
@@ -377,7 +402,6 @@ ul.list-right-section {
   .navbar-brand img {
     padding-left: $spacer / 2;
   }
-
 }
 
 // large breakpoint
@@ -537,7 +561,6 @@ ul.plain {
       border-top-right-radius: 0.25rem;
       border-bottom-right-radius: 0.25rem;
     }
-
   }
 }
 
@@ -572,7 +595,7 @@ a.disabled {
 
 .nav-stacked li {
   padding: $spacer;
-  margin-bottom: ($spacer * .25);
+  margin-bottom: ($spacer * 0.25);
   width: 100%;
   background: var(--grey-010);
   color: var(--info-color);
@@ -591,12 +614,14 @@ a.disabled {
   }
 }
 
-.filter-input-block legend.bb, .sort-area legend {
+.filter-input-block legend.bb,
+.sort-area legend {
   padding-bottom: ($spacer / 2);
   border-bottom: 1px solid var(--body-divider);
 }
 
-.filter-input-block legend.bb, .sort-area legend {
+.filter-input-block legend.bb,
+.sort-area legend {
   padding-bottom: ($spacer / 2);
   border-bottom: 1px solid var(--body-divider);
 }
@@ -605,7 +630,8 @@ a.disabled {
   margin-bottom: 6px;
 }
 
-.tab, .ui-tabs-tab {
+.tab,
+.ui-tabs-tab {
   border: none;
   padding: 1.25ch 1ch 1.1ch;
   font-size: 1rem;
@@ -615,8 +641,9 @@ a.disabled {
   border-radius: 5px 5px 0 0;
 }
 
-.tab.active, .ui-tabs-tab.ui-tabs-active {
-  background: #ffffff;;
+.tab.active,
+.ui-tabs-tab.ui-tabs-active {
+  background: #ffffff;
   color: var(--primary-color);
   border-top: 1px solid var(--grey-060);
   border-left: 1px solid var(--grey-060);
@@ -654,12 +681,14 @@ a.disabled {
   font-weight: 600;
 }
 
-.filter-input-block legend.bb, .sort-area legend {
+.filter-input-block legend.bb,
+.sort-area legend {
   padding-bottom: ($spacer / 2);
   border-bottom: 1px solid var(--body-divider);
 }
 
-.filter-input-block legend.bb, .sort-area legend {
+.filter-input-block legend.bb,
+.sort-area legend {
   padding-bottom: ($spacer / 2);
   border-bottom: 1px solid var(--body-divider);
 }
@@ -683,7 +712,8 @@ a.disabled {
     color: inherit;
     text-decoration: inherit;
 
-    &:hover, &:focus {
+    &:hover,
+    &:focus {
       background-color: var(--complete-tint);
       font-weight: 600;
     }

diff --git a/app/views/insured/group_selection/_cancel_plan_form.html.erb b/app/views/insured/group_selection/_cancel_plan_form.html.erb
@@ -21,7 +21,7 @@
         <%= hidden_field_tag :bs4, true %>
         <p><%= l10n("choose_last_day") %></p>
         <label class="required" for="term_date"><%= l10n("coverage_end_date") %></label>
-        <%= date_field_tag :term_date, nil,{class: "date-field mt-2", min: TimeKeeper.date_of_record.strftime("%Y-%m-%d"), required: true} %>
+        <%= date_field_tag :term_date, class: "date-field mt-2", :'data-date-max' => "+0", required: true %>
         <% if show_cancellation_reason %>
           <p class="mt-4"><%= l10n("why_are_you_canceling") %><p>
           <label class="required" for="cancellation_reason"><%= l10n("cancelation_reason") %></label>

diff --git a/app/views/ui-components/bs4/v1/forms/broker/_agency_information.html.erb b/app/views/ui-components/bs4/v1/forms/broker/_agency_information.html.erb
@@ -1,18 +1,16 @@
-<h4 class="mb-2"><%= l10n('broker_agency_note') %></h4>
-
 <div class="row mb-3">
   <%= f.hidden_field :entity_kind, value: "s_corporation" %>
-  
+
   <div class="col-md-6">
-    <label for="inputLegalName" class='required'><%= l10n('legal_name') %></label>
-    <%= f.text_field :legal_name, placeholder: l10n('legal_name_placeholder'), required: true, id: 'validationCustomLegalName', class: 'form-control' %>
+    <%= f.label :legal_name, l10n("legal_name"), class: "required" %>
+    <%= f.text_field :legal_name, placeholder: l10n('legal_name_placeholder'), required: true, class: 'form-control' %>
     <div class="invalid-feedback">
       <%= l10n('legal_name_error') %>
     </div>
   </div>
 
   <div class="col-md-6">
-    <label for="inputDBA"><%= l10n('dba_caps') %></label>
-    <%= f.text_field :dba, placeholder: l10n('doing_business_as'), id: 'validationCustomdba', class: 'form-control' %>
+    <%= f.label :dba, l10n('dba_caps') %>
+    <%= f.text_field :dba, placeholder: l10n('doing_business_as'), class: 'form-control' %>
   </div>
-</div>
+</div>
diff --git a/app/views/ui-components/bs4/v1/forms/broker/_attestation_agreement_fields.html.erb b/app/views/ui-components/bs4/v1/forms/broker/_attestation_agreement_fields.html.erb
@@ -1,18 +1,24 @@
 <h2 class='mb-3'><%= l10n("agreements") %></h2>
 
-<div class="form-group mb-3">
+<div class="form-group mt-0 d-flex align-items-center">
   <%= check_box_tag :all_marketplace_required_trainings, nil, false, class: "broker-attestation-field", onChange: "allowBrokerAgencyFormSubmission()" %>
-  <%= sanitize_html(l10n("broker_attestation.required_trainings", trainings_link: 'https://coverme.inquisiqlms.com/', site_short_name: EnrollRegistry[:enroll_app].setting(:short_name).item)) %>
+  <label for="<%= :all_marketplace_required_trainings %>" class="mt-0 ml-1 font-weight-normal text-body">
+    <%= h(l10n("broker_attestation.required_trainings", trainings_link: 'https://coverme.inquisiqlms.com/', site_short_name: EnrollRegistry[:enroll_app].setting(:short_name).item)) %>
+  </label>
 </div>
 
-<div class="form-group mb-3">
+<div class="form-group mt-0 d-flex align-items-center">
   <%= check_box_tag :active_license_attestation, nil, false, class: "broker-attestation-field", onChange: "allowBrokerAgencyFormSubmission()" %>
-  <%= "  #{l10n('broker_attestation.active_license', state_name: EnrollRegistry[:enroll_app].setting(:state_name).item)}" %>
+  <label for="<%= :active_license_attestation %>" class="mt-0 ml-1 font-weight-normal text-body">
+    <%= "#{l10n('broker_attestation.active_license', state_name: EnrollRegistry[:enroll_app].setting(:state_name).item)}" %>
+  </label>
 </div>
 
-<div class="form-group mb-3">
+<div class="form-group mt-0 d-flex align-items-center">
   <%= check_box_tag :marketplace_broker_agreement, nil, false, class: "broker-attestation-field", onChange: "allowBrokerAgencyFormSubmission()" %>
-  <%= sanitize_html(l10n("broker_attestation.broker_agreement", agreement_pdf_url: '/ohim_broker_agreement.pdf', site_short_name: EnrollRegistry[:enroll_app].setting(:short_name).item)) %>
+  <label for="<%= :marketplace_broker_agreement %>" class="mt-0 ml-1 font-weight-normal text-body">
+    <%= h(l10n("broker_attestation.broker_agreement", agreement_pdf_url: '/ohim_broker_agreement.pdf', site_short_name: EnrollRegistry[:enroll_app].setting(:short_name).item)) %>
+  </label>
 </div>
 
 <script>
@@ -25,4 +31,4 @@
       form_button.disabled = true;
     };
   }
-</script>
+</script>
diff --git a/app/views/ui-components/bs4/v1/forms/broker/_personal_information.html.erb b/app/views/ui-components/bs4/v1/forms/broker/_personal_information.html.erb
@@ -28,23 +28,23 @@
   </div>
 
   <div class="col-md-3 mb-3">
-    <label for="inputDOB"  class="required"><%= l10n('broker_agencies.dob') %></label>
-    <%= f.date_field :dob, placeholder: l10n('dob_format'), min: 110.years.ago, max: 16.years.ago.beginning_of_month, required: true, onblur: 'validDob(this)' %>
+    <%= f.label :dob, l10n("broker_agencies.dob"), class: "required" %>
+    <%= f.date_field :dob, placeholder: l10n('dob_format'), min: 110.years.ago, max: 16.years.ago, required: true, onblur: 'validDob(this)' %>
     <div class="invalid-feedback">
       <%= l10n("invalid_dob") %>
     </div>
   </div>
 
   <div class="col-md-3 mb-3">
     <label for="inputNPN"  class="required"><%= l10n('npn') %></label>
-    <%= f.text_field :npn, 
+    <%= f.text_field :npn,
       placeholder: l10n('npn_placeholder'),
-      required: %w[new create].include?(controller.action_name) ? 'true' : !EnrollRegistry.feature_enabled?(:allow_alphanumeric_npn), 
-      id: 'inputNPN', 
-      class: 'form-control', 
+      required: %w[new create].include?(controller.action_name) ? 'true' : !EnrollRegistry.feature_enabled?(:allow_alphanumeric_npn),
+      id: 'inputNPN',
+      class: 'form-control',
       maxlength: '10',
       onkeypress: EnrollRegistry.feature_enabled?(:allow_alphanumeric_npn) ? 'return isAlphaNumeric(event);' : 'return isNumberKey(event);',
-      disabled: npn_disabled 
+      disabled: npn_disabled
     %>
     <div class="invalid-feedback">
       <%= l10n('npn_error') %>

diff --git a/app/views/ui-components/bs4/v1/forms/broker/_profile_information.html.erb b/app/views/ui-components/bs4/v1/forms/broker/_profile_information.html.erb
@@ -1,6 +1,6 @@
 <div class="row mb-3">
   <div class="col-md-6">
-    <label class="required" for="inputPracticeArea"><%= l10n("market_kind") %></label>
+    <%= f.label :market_kind, l10n("market_kind"), class: "required" %>
     <%= f.select(:market_kind, options_for_select(BenefitSponsors::Organizations::BrokerAgencyProfile::MARKET_KINDS_OPTIONS.inject([]) { |options, (k, v)| options << [k, v] }, selected: f.object.try(:market_kind)), { prompt: "Select Market Kind" }, { class: 'form-control', required: true }) %>
     <div class="invalid-feedback">
       <%= l10n("market_kind_error") %>
@@ -29,4 +29,4 @@
       <%= l10n("default_select_error") %>
     </div>
   </div>
-</div>
+</div>