From f51e5373c929dd9701ac498959ef47e2e6e8d51e Mon Sep 17 00:00:00 2001
From: Bernard Wang <bernard@bernard.wang>
Date: Mon, 4 Nov 2019 15:21:50 -0600
Subject: [PATCH 1/5] Move hint and error outside legend

---
 .../src/components/FormLabel/FormLabel.jsx    | 37 ++++++++++++-------
 1 file changed, 23 insertions(+), 14 deletions(-)

diff --git a/packages/core/src/components/FormLabel/FormLabel.jsx b/packages/core/src/components/FormLabel/FormLabel.jsx
index 178d6b6300..aca6663a01 100644
--- a/packages/core/src/components/FormLabel/FormLabel.jsx
+++ b/packages/core/src/components/FormLabel/FormLabel.jsx
@@ -1,5 +1,5 @@
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import React from 'react';
 import classNames from 'classnames';
 
 export class FormLabel extends React.PureComponent {
@@ -10,11 +10,7 @@ export class FormLabel extends React.PureComponent {
       });
 
       return (
-        <span
-          className={classes}
-          id={`${this.props.fieldId}-message`}
-          role="alert"
-        >
+        <span className={classes} id={`${this.props.fieldId}-message`} role="alert">
           {this.props.errorMessage}
         </span>
       );
@@ -55,19 +51,32 @@ export class FormLabel extends React.PureComponent {
 
   render() {
     const { fieldId, id, children } = this.props;
-    const ComponentType = this.props.component;
     const labelTextClasses = classNames(this.props.labelClassName);
     const classes = classNames('ds-c-label', this.props.className, {
       'ds-c-label--inverse': this.props.inversed
     });
 
-    return (
-      <ComponentType className={classes} htmlFor={fieldId} id={id}>
-        <span className={labelTextClasses}>{children}</span>
-        {this.hint()}
-        {this.errorMessage()}
-      </ComponentType>
-    );
+    // Hint and error message are outside of the legend
+    // https://www.powermapper.com/tests/screen-readers/labelling/fieldset-links/
+    if (this.props.component === 'legend') {
+      return (
+        <Fragment>
+          <legend className={classes} htmlFor={fieldId} id={id}>
+            <span className={labelTextClasses}>{children}</span>
+          </legend>
+          {this.hint()}
+          {this.errorMessage()}
+        </Fragment>
+      );
+    } else if (this.props.component === 'legend') {
+      return (
+        <label className={classes} htmlFor={fieldId} id={id}>
+          <span className={labelTextClasses}>{children}</span>
+          {this.hint()}
+          {this.errorMessage()}
+        </label>
+      );
+    }
   }
 }
 

From d3b166010ef9472fd019251635f9495d83f10887 Mon Sep 17 00:00:00 2001
From: Bernard Wang <bernard@bernard.wang>
Date: Mon, 4 Nov 2019 15:23:52 -0600
Subject: [PATCH 2/5] Update FormLabel example

---
 .../FormLabel/FormLabel.example.jsx           | 37 ++++++++++++++-----
 1 file changed, 28 insertions(+), 9 deletions(-)

diff --git a/packages/core/src/components/FormLabel/FormLabel.example.jsx b/packages/core/src/components/FormLabel/FormLabel.example.jsx
index 0384f5c1b1..76af96273e 100644
--- a/packages/core/src/components/FormLabel/FormLabel.example.jsx
+++ b/packages/core/src/components/FormLabel/FormLabel.example.jsx
@@ -1,15 +1,34 @@
+import React, { Fragment } from 'react';
 import FormLabel from './FormLabel';
-import React from 'react';
 import ReactDOM from 'react-dom';
 
 ReactDOM.render(
-  <FormLabel
-    errorMessage="Please enter a valid phone number."
-    hint="We'll use this number as a backup if we need to contact you about your application."
-    fieldId="number-field-id"
-    requirementLabel="Optional"
-  >
-    Phone number
-  </FormLabel>,
+  <Fragment>
+    <div>
+      <FormLabel
+        component="label"
+        errorMessage="Please enter a valid phone number."
+        hint="We'll use this number as a backup if we need to contact you about your application."
+        fieldId="number-field-id"
+        requirementLabel="Optional"
+      >
+        Phone number
+      </FormLabel>
+    </div>
+    <fieldset className="ds-c-fieldset">
+      <FormLabel
+        component="legend"
+        hint={
+          <span>
+            Select all that apply.{' '}
+            <a href="void:javascript(0)">Learn more about these documents.</a>
+          </span>
+        }
+        fieldId="document-field-id"
+      >
+        Select a document type
+      </FormLabel>
+    </fieldset>
+  </Fragment>,
   document.getElementById('js-example')
 );

From e65932002e03885decb7cea326b97a8e5f063824 Mon Sep 17 00:00:00 2001
From: Bernard Wang <bernard@bernard.wang>
Date: Mon, 4 Nov 2019 15:45:41 -0600
Subject: [PATCH 3/5] Update DateField example

---
 packages/core/src/components/DateField/datefield.example.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/src/components/DateField/datefield.example.html b/packages/core/src/components/DateField/datefield.example.html
index 46d64bc188..db0aaff4f5 100644
--- a/packages/core/src/components/DateField/datefield.example.html
+++ b/packages/core/src/components/DateField/datefield.example.html
@@ -1,8 +1,8 @@
 <fieldset class="ds-c-fieldset">
   <legend class="ds-c-label">
     <span class="ds-u-font-weight--bold">Date of birth</span>
-    <span class="ds-c-field__hint">For example: 4 / 28 / 1986</span>
   </legend>
+  <span class="ds-c-field__hint">For example: 4 / 28 / 1986</span>
   <div class="ds-l-form-row ds-u-align-items--end">
     <div class="ds-l-col--auto">
       <label class="ds-c-label ds-u-font-weight--normal ds-u-margin-top--1" for="month"

From 819a4614caaa132b13bdfa3b44debe42d9a8d15d Mon Sep 17 00:00:00 2001
From: Bernard Wang <bernard@bernard.wang>
Date: Mon, 4 Nov 2019 15:53:11 -0600
Subject: [PATCH 4/5] Fix bug

---
 packages/core/src/components/FormLabel/FormLabel.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/src/components/FormLabel/FormLabel.jsx b/packages/core/src/components/FormLabel/FormLabel.jsx
index aca6663a01..892abbd245 100644
--- a/packages/core/src/components/FormLabel/FormLabel.jsx
+++ b/packages/core/src/components/FormLabel/FormLabel.jsx
@@ -68,7 +68,7 @@ export class FormLabel extends React.PureComponent {
           {this.errorMessage()}
         </Fragment>
       );
-    } else if (this.props.component === 'legend') {
+    } else if (this.props.component === 'label') {
       return (
         <label className={classes} htmlFor={fieldId} id={id}>
           <span className={labelTextClasses}>{children}</span>

From 3a55929c4e9aef2ede1f9fe3737b1603c58dbb23 Mon Sep 17 00:00:00 2001
From: Bernard Wang <bernard@bernard.wang>
Date: Mon, 4 Nov 2019 16:25:27 -0600
Subject: [PATCH 5/5] update snapshot

---
 .../__snapshots__/DateField.test.jsx.snap     | 98 +++++++++----------
 .../components/FormLabel/FormLabel.test.jsx   |  3 +-
 2 files changed, 51 insertions(+), 50 deletions(-)

diff --git a/packages/core/src/components/DateField/__snapshots__/DateField.test.jsx.snap b/packages/core/src/components/DateField/__snapshots__/DateField.test.jsx.snap
index 83f8cf0c4d..7fffdffcd6 100644
--- a/packages/core/src/components/DateField/__snapshots__/DateField.test.jsx.snap
+++ b/packages/core/src/components/DateField/__snapshots__/DateField.test.jsx.snap
@@ -14,12 +14,12 @@ exports[`DateField has custom yearMax and yearMin 1`] = `
     >
       Date
     </span>
-    <span
-      className="ds-c-field__hint"
-    >
-      For example: 4 / 28 / 1986
-    </span>
   </legend>
+  <span
+    className="ds-c-field__hint"
+  >
+    For example: 4 / 28 / 1986
+  </span>
   <div
     className="ds-l-form-row ds-u-align-items--end"
   >
@@ -141,19 +141,19 @@ exports[`DateField has errorMessage 1`] = `
     >
       Date
     </span>
-    <span
-      className="ds-c-field__hint"
-    >
-      For example: 4 / 28 / 1986
-    </span>
-    <span
-      className="ds-c-field__hint ds-u-color--error"
-      id="undefined-message"
-      role="alert"
-    >
-      This is required.
-    </span>
   </legend>
+  <span
+    className="ds-c-field__hint"
+  >
+    For example: 4 / 28 / 1986
+  </span>
+  <span
+    className="ds-c-field__hint ds-u-color--error"
+    id="undefined-message"
+    role="alert"
+  >
+    This is required.
+  </span>
   <div
     className="ds-l-form-row ds-u-align-items--end"
   >
@@ -275,12 +275,12 @@ exports[`DateField has invalid day 1`] = `
     >
       Date
     </span>
-    <span
-      className="ds-c-field__hint"
-    >
-      For example: 4 / 28 / 1986
-    </span>
   </legend>
+  <span
+    className="ds-c-field__hint"
+  >
+    For example: 4 / 28 / 1986
+  </span>
   <div
     className="ds-l-form-row ds-u-align-items--end"
   >
@@ -402,12 +402,12 @@ exports[`DateField has invalid month 1`] = `
     >
       Date
     </span>
-    <span
-      className="ds-c-field__hint"
-    >
-      For example: 4 / 28 / 1986
-    </span>
   </legend>
+  <span
+    className="ds-c-field__hint"
+  >
+    For example: 4 / 28 / 1986
+  </span>
   <div
     className="ds-l-form-row ds-u-align-items--end"
   >
@@ -529,12 +529,12 @@ exports[`DateField has invalid year 1`] = `
     >
       Date
     </span>
-    <span
-      className="ds-c-field__hint"
-    >
-      For example: 4 / 28 / 1986
-    </span>
   </legend>
+  <span
+    className="ds-c-field__hint"
+  >
+    For example: 4 / 28 / 1986
+  </span>
   <div
     className="ds-l-form-row ds-u-align-items--end"
   >
@@ -656,14 +656,14 @@ exports[`DateField has requirementLabel 1`] = `
     >
       Date
     </span>
-    <span
-      className="ds-c-field__hint"
-    >
-      Optional.
-       
-      For example: 4 / 28 / 1986
-    </span>
   </legend>
+  <span
+    className="ds-c-field__hint"
+  >
+    Optional.
+     
+    For example: 4 / 28 / 1986
+  </span>
   <div
     className="ds-l-form-row ds-u-align-items--end"
   >
@@ -785,12 +785,12 @@ exports[`DateField is inversed 1`] = `
     >
       Date
     </span>
-    <span
-      className="ds-c-field__hint ds-c-field__hint--inverse"
-    >
-      For example: 4 / 28 / 1986
-    </span>
   </legend>
+  <span
+    className="ds-c-field__hint ds-c-field__hint--inverse"
+  >
+    For example: 4 / 28 / 1986
+  </span>
   <div
     className="ds-l-form-row ds-u-align-items--end"
   >
@@ -912,12 +912,12 @@ exports[`DateField renders with all defaultProps 1`] = `
     >
       Date
     </span>
-    <span
-      className="ds-c-field__hint"
-    >
-      For example: 4 / 28 / 1986
-    </span>
   </legend>
+  <span
+    className="ds-c-field__hint"
+  >
+    For example: 4 / 28 / 1986
+  </span>
   <div
     className="ds-l-form-row ds-u-align-items--end"
   >
diff --git a/packages/core/src/components/FormLabel/FormLabel.test.jsx b/packages/core/src/components/FormLabel/FormLabel.test.jsx
index 945c86f0ef..5d0c6dafa3 100644
--- a/packages/core/src/components/FormLabel/FormLabel.test.jsx
+++ b/packages/core/src/components/FormLabel/FormLabel.test.jsx
@@ -84,8 +84,9 @@ describe('FormLabel', () => {
   it('renders as a legend element', () => {
     const props = { component: 'legend' };
     const wrapper = shallow(<FormLabel {...props}>{labelText}</FormLabel>);
+    const legend = wrapper.find('legend');
 
-    expect(wrapper.is('legend')).toBe(true);
+    expect(legend.length).toBe(1);
   });
 
   it('is inversed', () => {