feat(app-rfi): add legend to fieldset for accessible form group labeling

UDS-2042

Author: juanmitriatti

packages/app-rfi/src/components/controls/RfiRadioGroup.js

@@ -5,7 +5,7 @@ import { Field } from "formik";
 import PropTypes from "prop-types";
 import React from "react";
 
-import { RfiError, RfiLabel } from "./controls-helpers";
+import {RfiError, RfiLabel, RfiLegend} from "./controls-helpers";
 
 const RfiRadioGroup = ({ name, id, options, label, onBlur }) => {
   return (
@@ -19,7 +19,7 @@ const RfiRadioGroup = ({ name, id, options, label, onBlur }) => {
         const isError = meta.error;
         return (
           <fieldset>
-            <RfiLabel label={label} name={name} id={id} />
+            <RfiLegend label={label} />
             <RfiError isError={isError} metaError={meta.error} />
             {options.map(option => (
               <div

packages/app-rfi/src/components/controls/controls-helpers.js

@@ -27,6 +27,18 @@ const RfiLabel = ({ label, name, id, requiredIcon }) => (
   </label>
 );
 
+const RfiLegend = ({ label, requiredIcon }) => (
+  <legend className="fw-bold">
+    {requiredIcon ? (
+      <span title="Required">
+        <i className="fas fa-circle uds-field-required" aria-hidden="true" />
+      </span>
+    ) : null}
+    &nbsp;
+    {label}
+  </legend>
+);
+
 const RfiError = ({ isError, metaError }) => (
   <div role="alert">
     {isError ? (
@@ -64,4 +76,4 @@ RfiError.propTypes = {
   isError: PropTypes.bool,
   metaError: PropTypes.string,
 };
-export { RfiLabel, RfiError, GaEventPropTypes };
+export { RfiLabel, RfiLegend, RfiError, GaEventPropTypes };