Screen reader marks the CatButton as disabled / dimmed if the button has the disabled attribute on it.

[alexandra-stanciu-haiilo]

An example of how we use the CatButton:
<CatButton key={f} onClick={() => handleFilterClick(f)} active={f === selectedFilter} disabled={!searchedText} variant="outlined" color="primary" size="xs" nativeAttributes={{ "aria-pressed": Boolean(f === selectedFilter).toString(), }} > {filterLabels[f]} </CatButton>

Steps:
Mac OS Sonoma 14.5, in a chrome browser.
Turn on voice over available in the mac os settings, navigate to a CatButton.

Explanation of the problem:
The button, when we add a disabled condition on it, is viewed as dimmed / disabled by the screen reader, regardless if the condition is met or not.

If we press Enter or Ctrl + option + space to click the button, it doesn't do anything, assuming it's because the button is dimmed.

If we remove the disabled condition, the screen reader is ok, and can interact with the button (but not feasible, since we do need to disable the buttons under certain situations).