508-defect-4 - Consider refactoring the FormSignature to include heading and attestation statement

[1Copenut]

508-defect-4

Feedback framework

• ❗️ Must for if the feedback must be applied
• ⚠️ Should if the feedback is best practice
• ✔️ Consider for suggestions/enhancements

Definition of done

1. Review and acknowledge feedback.
2. Fix and/or document decisions made.
3. Accessibility specialist will close ticket after reviewing documented decisions / validating fix.

Point of Contact

VFS Point of Contact: Trevor

Details

I'd like to discuss refactoring this component to include the [Veteran] statement of truth heading and paragraph(s) in a self-contained element. I spent a lot of time looking at the Zeplin prototypes and feel we could improve accessibility here by rolling those in, and adding an aria-describedby attribute to the heading. This will help surface that information to screen readers.

Acceptance Criteria

• [ ] Team reviews the refactoring ask and
• [ ] Team implements change or
• [ ] Team rejects the implementation change
• [ ] 0 accessibility defects in axe plugin, unit tests
• [ ] Additional screen reader spot checks pass manual validation

Proposed Solution (if known)

export const FormSignature = ({
  signatureLabel,
  checkboxLabel,
  formData,
+ level
  setFormData,
  signatureHeading,
+ statementDetail,
+ statementHeader,
  required,
  showError,
  validations,
  onSectionComplete,
}) => {
  // Component hooks ...

+ const H = `h${this.props.level}`;

  return (
    <div className="box vads-u-background-color--gray-lightest vads-u-padding-bottom--6 vads-u-padding-x--3 vads-u-padding-top--1px vads-u-margin-bottom--7">
+     <H>{statementHeader}</H>
+     <div id="statement-unique-id">{statementDetail}</div>
      <TextInput
        label={signatureLabel}
        field={signature}
        onValueChange={setSignature}
        required={required}
        errorMessage={(showError || signature.dirty) && signatureError}
      />
      <Checkbox
+       aria-labelledby="statement-unique-id"
        label={checkboxLabel}
        required={required}
        onValueChange={setChecked}
        errorMessage={showError && checkboxError}
      />
    </div>
  );
}

FormSignature.defaultProps = {
+ level: 2
}

FormSignature.propTypes = {
+ level: PropTypes.number
+ statementHeader: PropTypes.string.isRequired,
+ statementDetail: PropTypes.oneOfType([
+   PropTypes.string,
+   PropTypes.node
  ]).isRequired
}

[caw310]

Need to retest.

[caw310]

@rsmithadhoc Would you see if this is still an issue?

[rsmithadhoc]

@caw310 I don't believe so. This references an old React component, and our Statement of Truth web component contains the heading and description. I will go ahead and close this one.