Paying for College: Financial Path to Graduation - Accessibility and …

…Navigation fixes (#6752)

* Paying for College: Financial Path tabbing fixes
- Add tabindex to h2 on each subpage, add focusing to each h2 on Next button click
- Fix page load so that app begins scrolled page top with URL values
- Fix program selection radios to work with keyboard navigation

cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/01-school-search.html

@@ -1,6 +1,6 @@
 <section class="college-costs_tool-section college-costs_tool-section__school-search" id="college-costs_school-search" data-tool-section="school-info">
     <div class="school-search_start" id="school-search_what-school">
-        <h2>School & living situation</h2>
+        <h2 tabindex="-1">School & living situation</h2>
         <p>Start with the school you’re considering, plus the program and other info about your situation. Refer to your financial aid offer if you're not sure.</p>
         <label class="a-label a-label__heading u-mb15" for="search__school-input">
             Enter the name of the school. (You can also search by mascot.)
@@ -315,4 +315,4 @@ <h3 class="h4">Are you considered a dependent or independent student?</h3>
             </ul>' | safe
         ) }}
     </div>
-</section>
+</section>

cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/02-costs.html

@@ -1,5 +1,5 @@
 <section class="college-costs_tool-section college-costs_tool-section__costs" data-tool-section="costs">
-    <h2>This year's costs</h2>
+    <h2 tabindex="-1">This year's costs</h2>
     <div data-state-based-visibility="costs-question-hide">
         <p>Does your financial aid offer have information about costs?</p>
         <div class="costs_button-section">

cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/03-grants-and-scholarships.html

@@ -1,5 +1,5 @@
 <section class="college-costs_tool-section" data-tool-section="grants-scholarships">
-    <h2>Grants and scholarships</h2>
+    <h2 tabindex="-1">Grants and scholarships</h2>
     <p>You do not have to pay back grants and scholarships as long as you meet their requirements. Please enter the grants and scholarships from your financial aid offer as well as any others you have been awarded.</p>
     {{ notification.render(
         'information',
@@ -172,4 +172,4 @@ <h3 class="u-border-bottom">Scholarships</h3>
         </ul>' | safe
     ) }}
 
-</section>
+</section>

cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/04-work-study.html

@@ -1,5 +1,5 @@
 <section class="college-costs_tool-section" data-tool-section="work-study">
-    <h2>Work-study</h2>
+    <h2 tabindex="-1">Work-study</h2>
     <p>Work-study programs are part-time jobs on campus. If your offer includes work-study, that means you are eligible to apply for work-study jobs&mdash;a job will not be lined up for you. The work-study amount in your offer is the maximum you can earn. It is estimated and <strong>not guaranteed.</strong></p>
 
     <div class="block block__mid">
@@ -87,4 +87,4 @@ <h3>Fellowships and assistantships</h3>
             </ul>' | safe
         ) }}
     </div>
-</section>
+</section>

cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/05-federal-loans.html

@@ -1,5 +1,5 @@
 <section class="college-costs_tool-section" data-tool-section="federal-loans">
-    <h2>Federal loans</h2>
+    <h2 tabindex="-1">Federal loans</h2>
 
     <p> Any student loan must be repaid, with interest. Federal loans include some borrower protections and repayment options <span class="undergrad-content">(including, under some circumstances, loan forgiveness) </span>that are not typically offered by private and other non-federal loans.</p>
 
@@ -111,4 +111,4 @@ <h2>Federal loans</h2>
             <li> It is very difficult to get student loans discharged in bankruptcy and you should not rely on that option.</li>
         </ul>' | safe
     ) }}
-</section>
+</section>

cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/06-school-loans.html

@@ -1,5 +1,5 @@
 <section class="college-costs_tool-section college-costs_tool-section__school-loans" data-tool-section="school-loans">
-    <h2>Other loans (loans from your state, the school, and nonprofits)</h2>
+    <h2 tabindex="-1">Other loans (loans from your state, the school, and nonprofits)</h2>
 
     <p>Your state, this school, or a nonprofit may offer you loans directly or through a bank. Before taking on this debt, do your research to make sure they are the best option for you. If you think you may want to use this funding, enter it below.</p>
 
@@ -125,4 +125,4 @@ <h2>Other loans (loans from your state, the school, and nonprofits)</h2>
         'Loans from your school or from a bank or credit union may not offer the same protections flexible repayment options as federal student loans. If you need loans to pay for school, consider using up your federal loan offer before turning to loans through a bank or credit union.'
     ) }}
 
-</section>
+</section>

cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/07-other-resources.html

@@ -1,5 +1,5 @@
 <section class="college-costs_tool-section" data-tool-section="other-resources">
-    <h2>Other sources</h2>
+    <h2 tabindex="-1">Other sources</h2>
     <p>Thank you for entering everything from your financial aid offer. What other sources of funds are available to you?</p>
 
     {{ notification.render(

cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/08-loan-counseling.html

@@ -1,21 +1,21 @@
 <section class="college-costs_tool-section" data-tool-section="loan-counseling">
 
-    <h2>Using student loans strategically</h2>
-    <p> Next you will make a plan to cover remaining costs. Since you will probably use loans to pay for school—most students do—it’s important to understand how they work. This page will overview how student loans work and their potential benefits and risks.</p> 
+    <h2 tabindex="-1">Using student loans strategically</h2>
+    <p> Next you will make a plan to cover remaining costs. Since you will probably use loans to pay for school—most students do—it’s important to understand how they work. This page will overview how student loans work and their potential benefits and risks.</p>
+
+    <p>Student loans are money for education that you pay back with interest. That means you'll pay more than you originally borrowed.</p>
+    <p>For example, if you borrow $10,000 in unsubsidized loans with 4% annual interest, you will accrue $400 in interest each year before you enter repayment. So if you borrow that $10,000 in September 2020, graduate in May 2024, and enter repayment 6 months later (November 2024), you will accrue about $1,700 in interest and owe a total of $11,700 at that time. (If it’s a subsidized loans, you will owe just the original $10,000 when you enter repayment&mdash;and then start accruing interest as you gradually pay down the debt.)</p>
+    <p>To save money on the cost of student loans, you have four strategies:</p>
 
-    <p>Student loans are money for education that you pay back with interest. That means you'll pay more than you originally borrowed.</p> 
-    <p>For example, if you borrow $10,000 in unsubsidized loans with 4% annual interest, you will accrue $400 in interest each year before you enter repayment. So if you borrow that $10,000 in September 2020, graduate in May 2024, and enter repayment 6 months later (November 2024), you will accrue about $1,700 in interest and owe a total of $11,700 at that time. (If it’s a subsidized loans, you will owe just the original $10,000 when you enter repayment&mdash;and then start accruing interest as you gradually pay down the debt.)</p> 
-    <p>To save money on the cost of student loans, you have four strategies:</p> 
-
     <ul>
         <li><strong>borrow less</strong></li>
         <li>shop around for <strong>lower interest rates</strong> on non-federal student loans (this will take research and additional loan applications)</li>
         <li><strong>pay down interest</strong> on unsubsidized debt while you're in school to avoid <em>capitalization</em>&mdash;paying interest on interest)</li>
-        <li> repay your loans faster by making <strong>bigger monthly payments</strong> (depending on your federal loan repayment plan).</li> 
+        <li> repay your loans faster by making <strong>bigger monthly payments</strong> (depending on your federal loan repayment plan).</li>
     </ul>
-    
-    <p>As this graph shows, someone with about $30,000 in student loans (typical for college undergraduates) will save more than $10,000 in interest by repaying their loan in 10 years instead of 25 years.</p> 
-    
+
+    <p>As this graph shows, someone with about $30,000 in student loans (typical for college undergraduates) will save more than $10,000 in interest by repaying their loan in 10 years instead of 25 years.</p>
+
     <div id="compare-cost-of-borrowing_chart"></div>
 
     <p>So why take out student loans? A degree can open up more career options and increase your future earnings. Successfully repaying your student loans can help build your credit history. If higher education helps you reach your goals, the cost of student loans may be a good investment in your future—if you can afford to repay them.</p>
@@ -28,4 +28,4 @@ <h2>Using student loans strategically</h2>
         <li><strong>Repaying student loans is the only way you’re guaranteed to get rid of them.</strong> While loan forgiveness programs do exist for federal loans, they’re not guaranteed. Additionally, it is very difficult to get student loans discharged in bankruptcy and you should not rely on that option.</li>
     </ul>
 
-</section>
+</section>

cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/09-make-a-plan.html

@@ -1,7 +1,7 @@
 {% import "atoms/checkbox.html" as checkbox with context %}
 
 <section class="college-costs_tool-section college-costs_tool-section__make-a-plan" data-tool-section="make-a-plan">
-    <h2>Make a plan to cover this year's costs</h2>
+    <h2 tabindex="-1">Make a plan to cover this year's costs</h2>
 
     <p>Thank you for entering all that info! This page will help you determine whether you have enough funding to cover the cost of attending this particular school. If you have a gap, it will help you come up with a plan.</p>
 
@@ -658,4 +658,4 @@ <h4>Private Loan</h4>
         </div>
     </div>
 
-</section>
+</section>

cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/10-max-debt-guideline.html

@@ -2,7 +2,7 @@
     <h1>Could this be too much debt?</h1>
     <p class="lead-paragraph"><strong>A common guideline:</strong> Keep your student loan total below your first-year salary out of school. If your debt will be higher than your salary, consider whether it might be more debt than you can afford.</p>
 
-    <h2>1. Estimate your total debt at graduation.</h2>
+    <h2 tabindex="-1">1. Estimate your total debt at graduation.</h2>
 
     <div>
         {{
@@ -86,4 +86,4 @@ <h2 class="step-2">2. Check if your estimated total debt is less than the median
         </div>
     </div>
 
-</section>
+</section>

cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/11-cost-of-borrowing.html

@@ -1,8 +1,8 @@
 <section class="college-costs_tool-section college-costs_tool-section__cost-of-borrowing" data-tool-section="cost-of-borrowing">
-    <h1>What will interest cost me?</h1>
+    <h1 tabindex="-1">What will interest cost me?</h1>
     <p class="lead-paragraph"> This page shows the total cost of borrowing if you repay your debt over 10 years on the standard repayment plan. Other plans may be available with lower monthly payments, but the total cost of borrowing will be higher.</p>
 
-    <h2>Estimated total cost of these loans with a standard 10-year repayment plan: <strong><span data-financial-item="debt_tenYearTotal"></span></strong></h2>
+    <h2 tabindex="-1">Estimated total cost of these loans with a standard 10-year repayment plan: <strong><span data-financial-item="debt_tenYearTotal"></span></strong></h2>
 
     <div class="college-costs_chart" id="cost-of-borrowing_chart"></div>
 
@@ -40,7 +40,7 @@ <h2>Estimated total cost of these loans with a standard 10-year repayment plan:
                     'helper_text': 'Assumes approximate interest rate of <span data-financial-item="rate_existingDebt"></span>  on any current debt from previous schooling, based on recent rate',
                     'data_attribute': 'data-financial-item="debt_tenYearInterest"'
                 })
-            }}            
+            }}
         </div>
         <div class="equation-row">
             {{
@@ -62,4 +62,4 @@ <h2>Estimated total cost of these loans with a standard 10-year repayment plan:
         ) }}
     </div>
 
-</section>
+</section>

cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/12-affording-your-loan.html

@@ -1,5 +1,5 @@
 <section class="college-costs_tool-section college-costs_tool-section__affording" data-tool-section="affording-your-loans">
-    <h1>Can I afford my payment?</h1>
+    <h1 tabindex="-1">Can I afford my payment?</h1>
 
     <p class="lead-paragraph">Making loan payments on time can help you avoid financial and legal problems. Default—missing too many payments—can result in low credit scores, additional fees, wage garnishment, and ineligibility for further federal student aid.</p>
 
@@ -49,7 +49,7 @@ <h2>2. See how much of your time at work each month would go towards covering yo
                     'value': '&divide; $15',
                     'type': 'text'
                 })
-            }}            
+            }}
         </div>
 
         <div class="equation-row total-hours">
@@ -263,4 +263,4 @@ <h2>3. Does this budget work for you? Adjust specific expenses, like rent and gr
         {% endcall %}
     </div>
 
-</section>
+</section>

cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/13-school-results.html

@@ -1,5 +1,5 @@
 <section class="college-costs_tool-section college-costs_tool-section__school-results" data-tool-section="school-results">
-    <h2>Compare this school to others like it</h2>
+    <h2 tabindex="-1">Compare this school to others like it</h2>
 
     <div class="graduate-content">
         <p>Now that you understand how much debt you’re considering, make sure to research how well the school serves students. You’re investing a lot—make sure it pays off.</p>

cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/14-summary.html

@@ -1,6 +1,6 @@
 <section class="college-costs_tool-section college-costs_tool-section__summary" data-tool-section="summary">
     <div class="block block__flush-top">
-        <h2>Review your plan and projected outcomes</h2>
+        <h2 tabindex="-1">Review your plan and projected outcomes</h2>
 
         <p>Here is an overview of this school’s costs, your plan for covering them, the debt you are considering, and the school’s results on a few key metrics. As you look over these numbers again, think about whether you are feeling good about going to this school with this financial plan. If you have multiple offers, use this summary to compare them.</p>
 
@@ -45,7 +45,7 @@ <h3 class="summary_header">Covering your costs</h3>
                     true,
                     '',
                     '<b>Costs not covered yet:</b> <span data-financial-item="total_gap"></span>' | safe
-            ) }} 
+            ) }}
         </div>
 
         <table class="o-table o-table__financial u-w100pct">
@@ -79,7 +79,7 @@ <h3 class="summary_header">Covering your costs</h3>
                 <tr class="subtotal-row">
                     <td><p>Indirect costs subtotal</p></td>
                     <td ><p data-financial-item="total_indirectCosts"></p></td>
-                </tr>   
+                </tr>
                 <tr class="indented-row">
                     <td><p>Books & supplies</p></td>
                     <td><p data-financial-item="indiCost_books"></p></td>
@@ -153,7 +153,7 @@ <h3 class="summary_header">Covering your costs</h3>
     </div>
 
 
-    
+
     <div class="block">
         <h3 class="summary_header">Affording your loans</h3>
 
@@ -361,7 +361,7 @@ <h3 class="summary_header">Worth your investment?</h3>
                 </tr>
             </tbody>
         </table>
-            
-            
+
+
     </div>
-</section>
+</section>

cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/15-action-plan.html

@@ -1,5 +1,5 @@
 <section class="college-costs_tool-section" data-tool-section="action-plan">
-    <h2>What to do next</h2>
+    <h2 tabindex="-1">What to do next</h2>
 
     <p>Your next steps depend on whether you want to use this plan to pay for attending this school.</p>
 
@@ -12,7 +12,7 @@ <h2>What to do next</h2>
               'label': 'How to put this plan into action',
               'value': 'action',
               'id': 'action-plan_put-into-action',
-              'class': 'm-form-field__lg-target' 
+              'class': 'm-form-field__lg-target'
             })
         }}
          {{
@@ -21,9 +21,9 @@ <h2>What to do next</h2>
               'label': 'Consider other options',
               'value': 'consider',
               'id': 'action-plan_consider',
-              'class': 'm-form-field__lg-target' 
+              'class': 'm-form-field__lg-target'
             })
-        }}  
+        }}
     </div>
 
     <div class="block block__sub action-plan_steps" data-state-based-visibility="put-into-action">
@@ -56,7 +56,7 @@ <h4>Research the details of your grants, scholarships, fellowships, and assistan
 
         <div class="block block__sub">
             <h4>Make a budget.</h4>
-            <p><a href="https://files.consumerfinance.gov/f/documents/cfpb_your-money-your-goals_cash_flow_budget_tool_2018-11_ADA.pdf" target="_blank" class="external-link" rel="noreferrer noopener">Use this cashflow budget</a> to plan out when you’ll get money and when you’ll have to pay it.</p> 
+            <p><a href="https://files.consumerfinance.gov/f/documents/cfpb_your-money-your-goals_cash_flow_budget_tool_2018-11_ADA.pdf" target="_blank" class="external-link" rel="noreferrer noopener">Use this cashflow budget</a> to plan out when you’ll get money and when you’ll have to pay it.</p>
         </div>
 
         <div class="block block__sub">
@@ -103,7 +103,7 @@ <h4>Apply for additional institutional or private student loans.</h4>
             <h4>Apply for additional loans, including Grad PLUS and private options.</h4>
             <p>To get the best deal for your situation, read the fine print and shop around for the lowest interest rates and fees. You’ll probably need a cosigner.</p>
         </div>
-        
+
     </div>
 
     <div class="block block__sub action-plan_steps" data-state-based-visibility="consider-other-options">
@@ -143,12 +143,12 @@ <h4>Think about other programs at this school.</h4>
             <h4>Explore other schools.</h4>
             <p>Even if this is the only school you applied to this year, it’s not your only option. For example, if you are pursuing a bachelor's degree, you can always start att community college this year and apply to transfer to another school next year.</p>
         </div>
-        
+
         <div class="block block__sub graduate-content">
             <h4>Explore other schools.</h4>
             <p>Even if this is the only school you applied to this year, it’s not your only option. Take this year to work, save money, and pursue enrichment opportunities in your field while preparing to apply again next year.</p>
         </div>
 
-    </div>          
+    </div>
 
-</section>
+</section>

cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/16-save-and-finish.html

@@ -1,5 +1,5 @@
 <section class="college-costs_tool-section college-costs_tool-section__finish" data-tool-section="save-and-finish">
-    <h2>Great job!</h2>
+    <h2 tabindex="-1">Great job!</h2>
     <div class="m-info-unit m-info-unit__inline u-mb30">
         <div class="m-info-unit_image m-info-unit_image__square" style="background-image: url( {{ static('apps/paying-for-college/img/finish-page.png') }} );">
         </div>
@@ -45,7 +45,7 @@ <h3>Did this tool help you understand your financial aid offer?</h3>
             </fieldset>
         </div>
         <div class="block block__mid">
-            
+
             <div class="o-form_group">
                 <fieldset class="o-form_fieldset" data-impact="impactLoans">
                     <legend>

cfgov/unprocessed/apps/paying-for-college/js/views/navigation-view.js

@@ -211,10 +211,10 @@ function _handleNextButtonClick( event ) {
   if ( getStateValue( 'schoolErrors' ) === 'yes' ) {
     updateState.byProperty( 'showSchoolErrors', 'yes' );
   } else {
-    // TODO: Track time between Next button clicks for analytics
     sendAnalyticsEvent( 'next step - ' + getStateValue( 'activeSection' ), 'time-to-click' );
     updateState.nextSection();
     window.scrollTo( 0, document.querySelector( '.college-costs' ).offsetTop );
+    document.querySelector( '.college-costs_tool-section.active h2' ).focus();
   }
 }