WCAG - IDs used in ARIA and labels must be unique - FormGroupText Description

[fchaulandadasa]

I'm checking my code generated via this library against WCAG 2.0 standards using Axe plugin on Chrome
Axe raise a critical alert on the Description of an input using FormGroupText

    <FormGroupText
        as="input"
        status={validateField(
            formik.touched.WorksApproval,
            formik.errors.WorksApproval,
            formik.values.WorksApproval
        )}
        htmlId="WorksApproval"
        name="WorksApproval"
        label="Works Approval"
        helper="Water supply work approval number (Format: 00AA000000)"
        value={formik.values.WorksApproval}
        statusText={formik.errors.WorksApproval ? formik.errors.WorksApproval : formik.touched.WorksApproval ? 'OK' : ''}
        onBlur={formik.handleBlur}                            
        onChange={formik.handleChange}
        disabled={loading}
    />

To solve this, this span is supposed to have a unique ID :

nsw-design-system-react/src/component/forms/group-elements/index.js

Line 21 in 87657c4

<span className="material-icons nsw-material-icons" focusable="false" aria-hidden="true">

by probably re-using the same logic of the parent <span>

[fchaulandadasa]

After investigation the problem comes from the parrent span

In the example folder you can generate the example website.
It will render this part:

<div class="nsw-form__group ">
<label for="id1" class="nsw-form__label ">Your name</label>
<span id="helperid1" class="nsw-form__helper   undefined">
<span id="icon-id1" class="material-icons nsw-material-icons" focusable="false" aria-hidden="true"></span>as it is written on your drivers' licence</span>
<input class="nsw-form__input " aria-invalid="false" aria-describedby="helperid1" type="text" id="id1">
<span id="helperid1" class="nsw-form__helper   nsw-form__helper--valid undefined">
<span id="icon-check_circleid1" class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">check_circle</span>
Valid drivers licence
</span>
</div>

helperid1 is duplicated at it re-use twice the same component. One for the description, one for the message feedback

nsw-design-system-react/src/component/forms/group-elements/index.js

Line 20 in 87657c4

<span id={`${status === 'invalid' ? 'error' : 'helper'}${htmlId}`} className={`nsw-form__helper ${status === 'invalid' ? ' nsw-form__helper--error' : ''} ${status === 'valid' ? ' nsw-form__helper--valid' : ''} ${className}`} {...attributeOptions}>

This part should be changed :

id={`${status === 'invalid' ? 'error' : 'helper'}${htmlId}`}