Merge pull request #480 from DFE-Digital/mattb/SWCD-2191-accessibilit…

…y-fixes fix: address accessibility issues in new components
DFE-Digital · Jul 17, 2024 · 57194de · 57194de
2 parents 11ccef7 + a6795eb
commit 57194de
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 10 deletions.
diff --git a/Childrens-Social-Care-CPD/Views/Shared/_Feedback.cshtml b/Childrens-Social-Care-CPD/Views/Shared/_Feedback.cshtml
@@ -30,16 +30,16 @@
 
         <details id="page-Feedback" class="govuk-details" data-module="govuk-details" data-module-id="feedbackDetail">
             <summary class="govuk-details__summary">
-                <span class="govuk-details__summary-text">
+                <a class="govuk-details__summary-text govuk-link">
                     Give feedback about this page
-                </span>
+                </a>
             </summary>
 
             <form action="feedback" method="post" data-module-id="feedbackForm" asp-antiforgery="true">
                 <input data-module-id="page" type="hidden" name="page" value="@contextModel.Id" />
                 <div data-module-id="controlsContainer">
                     <div class="govuk-details__text">
-                        Use this form to provide feedback about this page. If you have more general feedback about this website, please use this <a href="https://dferesearch.fra1.qualtrics.com/jfe/form/SV_bmcLDedq5wipeTA">feedback form</a>.
+                        Use this form to provide feedback about this page.
                     </div>
 
                     <div class="govuk-details__text">
@@ -51,14 +51,14 @@
                                 </p>
                                 <div class="govuk-radios" data-module="govuk-radios">
                                     <div class="govuk-radios__item">
-                                        <input id="idUsefulYes" class="govuk-radios__input" name="isUseful" type="radio" value="true" data-module-id="isUsefulYes">
-                                        <label class="govuk-label govuk-radios__label" for="isUsefulYes">
+                                        <input id="isUsefulYes" class="govuk-radios__input" name="isUseful" type="radio" value="true" data-module-id="isUsefulYes" aria-labelledby="isUsefulYesLabel">
+                                        <label id="isUsefulYesLabel" class="govuk-label govuk-radios__label" for="isUsefulYes">
                                             Yes
                                         </label>
                                     </div>
                                     <div class="govuk-radios__item">
-                                        <input id="idUsefulNo" class="govuk-radios__input" name="isUseful" type="radio" value="false" data-module-id="isUsefulNo">
-                                        <label class="govuk-label govuk-radios__label" for="isUsefulNo">
+                                        <input id="isUsefulNo" class="govuk-radios__input" name="isUseful" type="radio" value="false" data-module-id="isUsefulNo" aria-labelledby="isUsefulNoLabel">
+                                        <label id="isUsefulNoLabel" class="govuk-label govuk-radios__label" for="isUsefulNo">
                                             No
                                         </label>
                                     </div>
@@ -80,19 +80,25 @@
                                 You can enter up to 400 characters
                             </div>
                         </div>
+                    </div>
 
+                    <div class="govuk-details__text">
                         <div class="govuk-button-group">
                             <button data-module-id="submitButton" class="govuk-button" data-module="govuk-button" type="submit">
                                 Submit Feedback
                             </button>
 
-                            <a data-module-id="cancelLink" class="govuk-link" href="#0" style="display: none">Cancel</a>
+                            <a data-module-id="cancelLink" class="govuk-link" style="display: none">Cancel</a>
                         </div>
                     </div>
                 </div>
 
                 <div data-module-id="thankYouMessage" class="govuk-details__text" style="display: none;">
-                    Thank you for your feedback on this resource! If you have more general feedback about this website, please use this <a href="https://dferesearch.fra1.qualtrics.com/jfe/form/SV_bmcLDedq5wipeTA">feedback form</a>.
+                    Thank you for your feedback on this resource!
+                </div>
+
+                <div class="govuk-details__text">
+                    If you have more general feedback about this website, please use this <a href="https://dferesearch.fra1.qualtrics.com/jfe/form/SV_bmcLDedq5wipeTA">feedback form</a>.
                 </div>
             </form>
         </details>

diff --git a/Childrens-Social-Care-CPD/Views/Shared/_InfoBox.cshtml b/Childrens-Social-Care-CPD/Views/Shared/_InfoBox.cshtml
@@ -25,7 +25,7 @@
 
 <div class="prompt prompt-home">
     <div class="govuk-grid-row">
-        <div class="govuk-grid-column-one-quarter"><svg aria-describedby="info icon" class="svg-inline--fa fa-circle-info fa-2x" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle-info" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"></path></svg></div><div class="govuk-grid-column-three-quarters">
+        <div class="govuk-grid-column-one-quarter"><svg class="svg-inline--fa fa-circle-info fa-2x" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle-info" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"></path></svg></div><div class="govuk-grid-column-three-quarters">
             @{ RenderTitle(); }
             <partial name="_RichText" model="Model.Document" />
         </div>