Having an accessibility issue with a toggle input while using VoiceOver on a Mac. The problem is that when I turn the toggle off, VoiceOver says it's on, and vice versa. How can I fix this so that VoiceOver accurately states whether the toggle is on or off? The code appears to be correct, with all labels matching each toggle input; the only problem lies in the inaccurate information provided by VoiceOver.
Toggle.tsx
<div className={`flex items-center justify-between py-4 ${className}`}>
<div id={labelId}>{label}</div>
<label htmlFor={id} className="inline-flex cursor-pointer items-center">
<span className="relative">
<input
id={id}
aria-labelledby={labelId}
type="checkbox"
className="peer absolute opacity-0"
value={toggledOn ? 1 : 0}
onChange={onToggle}
/>
<span
className={`block h-6 w-10 rounded-full shadow-inner ${
toggledOn ? 'bg-bui-color-green' : 'bg-bui-color-gray'
} peer-focus-outline`}
/>
<span
className={`focus-within:shadow-outline absolute inset-y-0 left-0 mt-[0.125rem] ml-[0.125rem] block h-5 w-5 rounded-full bg-bui-color-white shadow transition-transform duration-300 ease-in-out ${
toggledOn ? 'ml-[-0.125rem] translate-x-full transform' : ''
}`}
/>
</span>
</label>
</div>
Utilized in Settings.tsx
{loading ? (
<Spinner />
) : (
data?.user?.savedSearches?.map((it: any) => (
<Toggle
id={it.searchId}
className={toggleClassNames}
key={it.searchId}
label={it?.title}
toggledOn={savedSearchesValues[it.searchId as keyof typeof savedSearchesValues]}
onToggle={() => {
handleSearchToggleChange(
it.searchId,
!savedSearchesValues[it.searchId as keyof typeof savedSearchesValues],
it.emailFrequency,
);
}}
/>
))
)}