'Optional demographic information' accessibility improvements

src/applications/edu-benefits/10282/pages/applicantInformation/genderRaceQuestion.js

@@ -2,8 +2,12 @@ import React from 'react';
 import fullSchema10282 from 'vets-json-schema/dist/22-10282-schema.json';
 
 const { raceAndGender } = fullSchema10282.definitions;
-const description = (
+
+const uiTitle = (
   <>
+    <h3 className="vads-u-margin--0 vads-u-color--base">
+      Optional demographic information
+    </h3>
     <p>
       The next few questions are about race and gender. These questions are
       optional. You don’t have to answer them.
@@ -12,23 +16,19 @@ const description = (
       We ask these questions for statistical purposes. Your answers won’t affect
       your eligibility for the IBM SkillsBuild program.
     </p>
+    <p className="vads-u-margin-bottom--0">
+      Do you want to answer these optional questions?
+    </p>
   </>
 );
 
-const uiTitle = (
-  <h3 className="vads-u-margin--0 vads-u-color--base">
-    Optional demographic information
-  </h3>
-);
-
 const uiSchema = {
-  'ui:title': uiTitle,
-  'ui:description': description,
   raceAndGender: {
-    'ui:title': 'Do you want to answer these optional questions?',
+    'ui:title': uiTitle,
     'ui:widget': 'radio',
   },
 };
+
 const schema = {
   type: 'object',
   properties: {