Voice-over skips announcement using control+option+arrows, but announces using tab key

Question

I have a list of product cards, each wrapped in a link tag. When using voice-over and tabbing through on Mac, it announces the aria-label description in the link, the aria-label description in the button, and the one in the div element with role="note".

However, using the control+option+arrow keys only announces the link while ignoring the button and div, and jumping to the next product card.

What could be causing this behaviour? Please help with suggestions on announcing the buttons and div using control+option+arrow.

Code:

<div className={styles.card_container}>
  <div className={styles.card}>
    <a href={`/home`} aria-label={`${product_name} ${price}`}>
      <div className={styles.imgAndPriceWrapper}>
        <div className={styles.img_container}>
          <img src="/images/hilns" alt="hilns" />
        </div>
        <div className={styles.iconButton}>
          <button onClick={handleImageClick} aria-label="Zoom in">
            Zoom
          </button>
        </div>
        <div className={styles.text_container}>
          <div className={styles.product_title}>
            <h2>{heading}</h2>
          </div>
          <div
            className={styles.finance}
            aria-label="Finance options available"
            role="note"
            tabIndex={0}
          >
            <span>Finance options available</span>
          </div>
        </div>
      </div>
    </a>
  </div>
  <div className="card">
    <a href={`/home`} aria-label={`${product_name} ${price}`}>
      <div className={styles.imgAndPriceWrapper}>
        <div className={styles.img_container}>
          <img src="/images/hilns" alt="hilns" />
        </div>
        <div className={styles.iconButton}>
          <button onClick={handleImageClick} aria-label="Zoom in">
            Zoom
          </button>
        </div>
        <div className={styles.text_container}>
          <div className={styles.product_title}>
            <h2>{heading}</h2>
          </div>
          <div
            className={styles.finance}
            aria-label="Finance options available"
            role="note"
            tabIndex={0}
          >
            <span>Finance options available</span>
          </div>
        </div>
      </div>
    </a>
  </div>
</div>;

Answer 1

You have a nested focusable elements problem. The button is inside a huge link which is itself focusable. This is an accessibility antipattern. Focusable elements musn't be nested.

• Upon clicking or pressing enter on the inner element, should the outer element also be triggered ?
• When on the inner element, should we consider that the outer element has also the focus ?
• Should the content of the inner element be read when the focus is on the outer element ? risking to read some content twice

OS, browsers, screen readers and assistive tools handle all that very differently one from another, so it must be avoided at all cost for a consistent experience.

Note also that the aria-label of your link completely replaces the whole natural content to be read. I guess it wasn't what was intended here either.