I am trying to design accessible React application by utilizing aria labels. I am relatively new to aria, and I can’t find a lot of supporting documentation on the nitty-gritty of implementations.

I have a configurable delay field in my application. If the user has not configured a delay, it will default to 00:00:00. Currently this is narrating using a screen reader as “midnight”, but I need it to narrate as zero hours, zero minutes, and zero seconds. Or, “no delay configured”. I can’t seem to override this default behavior, though.

Of note, if any values are updated from the default, it narrates exactly as it should (00:09:00 reads as “nine minutes”), even without any aria attributes.

Here is my component, including my addition of an aria-label (not working)

<div>
    <MaskedTextField
        mask="dh:ms:ms"
        className="name"
        maskFormat={maskFormat}
        value={this.delay} //defaults to 00:00:00
        onChange={this.setDelay}
        aria-labelledby={this.delay === "00:00:00" ? "no delay configured" : this.delay}
    />
</div>

I’ve tried aria-label, aria-labelledby, and even aria-hiding my input field and trying to sneak in a hidden span with this information. Nothing works, it still narrates as “midnight”. How can I fix it to say its actual value, and why is it saying midnight?

Edit:

MaskedTextField renders a simple text box with a default input of 00:00:00. These fields are editable, but only if it matches the rules created in the mask.

image of the component