Fix / workaround a11y issues on qualification page

There's [a known issue](alphagov/govuk-frontend#979) with radio buttons that conditionally-reveal content, due to the `aria-expanded` attribute being "invalid" on the element. I've decided to ignore that specific rule on that page here, as we don't want to build our own custom conditional text box here, and the issue is still under review. This also fixes an issue with a duplicate `hint` `id` on the page.
UKGovernmentBEIS · Jan 24, 2022 · a1cb786 · a1cb786
1 parent e7efbb5
commit a1cb786
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 6 deletions.
diff --git a/cypress/integration/admin/professions/add-a-profession.spec.ts b/cypress/integration/admin/professions/add-a-profession.spec.ts
@@ -88,7 +88,18 @@ describe('Adding a new profession', () => {
         cy.get('button').contains(buttonText).click();
       });
 
-      cy.checkAccessibility();
+      cy.injectAxe();
+      cy.checkA11y(
+        {
+          exclude: [['#phase-banner-container']],
+        },
+        {
+          // Conditional radio buttons add an additional `aria-expanded` field,
+          // but unfortunately we can't disable the rule for a specific element,
+          // so we're not using the usual helper here and disabling that rule
+          rules: { 'aria-allowed-attr': { enabled: false } },
+        },
+      );
       cy.translate('professions.form.headings.qualificationInformation').then(
         (heading) => {
           cy.get('body').should('contain', heading);

diff --git a/src/professions/admin/method-to-obtain-qualification-radio-buttons.presenter.spec.ts b/src/professions/admin/method-to-obtain-qualification-radio-buttons.presenter.spec.ts
@@ -59,7 +59,7 @@ describe(MethodToObtainQualificationRadioButtonsPresenter, () => {
           value: MethodToObtain.Others,
           checked: false,
           conditional: {
-            html: `<div class="govuk-form-group"><div id="methodToObtainQualification-hint" class="govuk-hint">Translation of \`professions.methodsToObtainQualification.otherHint\`</div><textarea class="govuk-textarea" id="otherMethodToObtainQualification" rows="5" name="otherMethodToObtainQualification"></textarea></div>`,
+            html: `<div class="govuk-form-group"><div id="methodToObtainQualification-other-hint" class="govuk-hint">Translation of \`professions.methodsToObtainQualification.otherHint\`</div><textarea class="govuk-textarea" id="otherMethodToObtainQualification" rows="5" name="otherMethodToObtainQualification"></textarea></div>`,
           },
         },
       ]);
@@ -112,7 +112,7 @@ describe(MethodToObtainQualificationRadioButtonsPresenter, () => {
           value: MethodToObtain.Others,
           checked: false,
           conditional: {
-            html: `<div class="govuk-form-group"><div id="methodToObtainQualification-hint" class="govuk-hint">Translation of \`professions.methodsToObtainQualification.otherHint\`</div><textarea class="govuk-textarea" id="otherMethodToObtainQualification" rows="5" name="otherMethodToObtainQualification"></textarea></div>`,
+            html: `<div class="govuk-form-group"><div id="methodToObtainQualification-other-hint" class="govuk-hint">Translation of \`professions.methodsToObtainQualification.otherHint\`</div><textarea class="govuk-textarea" id="otherMethodToObtainQualification" rows="5" name="otherMethodToObtainQualification"></textarea></div>`,
           },
         },
       ]);
@@ -136,7 +136,7 @@ describe(MethodToObtainQualificationRadioButtonsPresenter, () => {
             text: 'Translation of `professions.methodsToObtainQualification.others`',
             checked: true,
             conditional: {
-              html: `<div class="govuk-form-group"><div id="methodToObtainQualification-hint" class="govuk-hint">Translation of \`professions.methodsToObtainQualification.otherHint\`</div><textarea class="govuk-textarea" id="otherMethodToObtainQualification" rows="5" name="otherMethodToObtainQualification">Another method for obtaining the qualification</textarea></div>`,
+              html: `<div class="govuk-form-group"><div id="methodToObtainQualification-other-hint" class="govuk-hint">Translation of \`professions.methodsToObtainQualification.otherHint\`</div><textarea class="govuk-textarea" id="otherMethodToObtainQualification" rows="5" name="otherMethodToObtainQualification">Another method for obtaining the qualification</textarea></div>`,
             },
           });
         });
@@ -170,7 +170,7 @@ describe(MethodToObtainQualificationRadioButtonsPresenter, () => {
             text: 'Translation of `professions.methodsToObtainQualification.others`',
             checked: true,
             conditional: {
-              html: `<div class="govuk-form-group ${expectedErrorFormClass}"><div id="methodToObtainQualification-hint" class="govuk-hint">Translation of \`professions.methodsToObtainQualification.otherHint\`</div>${expectedErrorParagraph}<textarea class="govuk-textarea" id="otherMethodToObtainQualification" rows="5" name="otherMethodToObtainQualification"></textarea></div>`,
+              html: `<div class="govuk-form-group ${expectedErrorFormClass}"><div id="methodToObtainQualification-other-hint" class="govuk-hint">Translation of \`professions.methodsToObtainQualification.otherHint\`</div>${expectedErrorParagraph}<textarea class="govuk-textarea" id="otherMethodToObtainQualification" rows="5" name="otherMethodToObtainQualification"></textarea></div>`,
             },
           });
         });

diff --git a/src/professions/admin/method-to-obtain-qualification-radio-buttons.presenter.ts b/src/professions/admin/method-to-obtain-qualification-radio-buttons.presenter.ts
@@ -42,7 +42,7 @@ export class MethodToObtainQualificationRadioButtonsPresenter {
       name.charAt(0).toUpperCase() + name.slice(1)
     }`;
 
-    const hintHTML = `<div id="${name}-hint" class="govuk-hint">${await this.i18nService.translate(
+    const hintHTML = `<div id="${name}-other-hint" class="govuk-hint">${await this.i18nService.translate(
       'professions.methodsToObtainQualification.otherHint',
     )}</div>`;