I'm using the tool Level Access to test my application for 508 violations and which is producing errors on my custom dropdown form.

This SPAN has an id attribute of 'aria-context', which is not unique in the same DOM

and

This SPAN has an id attribute of 'aria-selection-event', which is not unique in the same DOM

Im using react-select for the dropdown and the error I'm getting is from line https://github.com/JedWatson/react-select/blob/master/packages/react-select/src/components/LiveRegion.tsx#L202-L204

it looks like the aria-selection and aria-context spans should only be used during the initial focus, but for some reason stays indefinitely instead of switching to the live region.

<AvSelect
              name="payer"
              labelKey="displayName"
              valueKey="id"
              id={{payers.map(x => x.id)}
              label="Payer"
              placeholder="Choose one ..."
              options={payers}
              index={payers.map(x => x.id)}
              onChange={payer => {
                this.changePayer(payer);
              }}
            />
          )}
            

Here is the screenshot attached for the highlight of the element causing the error and I'm using continuum explorer pro to test the accessibility for the page. Also we are targeting chrome, firefox and safari as main browsers. I see the span tag in the chrome dev tools but I don't see that anywhere in my react code