Assistance with Screen Reader Accessibility : `aria-hidden`

Hello coding friends!

I am currently working on a school project and would like some assistance with screen reader accessibility. It is not a requirement of the project, but I have been trying to be more conscious of accessibility and deliberate with aria attributes.

Here is a small screenshot of what I am working with:
image

And here is the HTML (I have removed the classes for readability):

<ol>
  <li>
      <div>
          <div>
              <span>1</span>
          </div>
          <p>Optimist</p>
      </div>
      <input type="checkbox" role="checkbox" name="display_cat" id="optimist" aria-expanded="false" aria-checked="false">
      <svg>
          <path/>
      </svg>
      <div aria-hidden="true">
          <p>Well-suited for:</p>
          <ul>
              <li>Leading a team</li>
              <li>Sales</li>
              <li>Project management</li>
              <li>Marketing</li>
          </ul>
      </div>
  </li>
.
.
.
</ol>

What I would like to happen, is that when a user clicks or presses down on an arrow:
image
That screen readers would announce the change by reading the information in the box that slides down.

I have JavaScript that changes the attributes:

// When a dropdown is clicked or pressed in STRENGTHS checkbox is marked as checked and expanded
checkBoxes.forEach((box) => {
    box.addEventListener('click', ariaSwitchOne);
    box.addEventListener('click', ariaSwitchTwo);
});

checkBoxes.forEach((box) => {
    box.addEventListener('keydown', ariaSwitchOne);
    box.addEventListener('keydown', ariaSwitchTwo);
});

function ariaSwitchOne() {
    checkBoxes.forEach((check) => {
        if(check.checked) {
            check.setAttribute('aria-checked', 'true');
            check.setAttribute('aria-expanded', 'true');
        } else {
            check.setAttribute('aria-checked', 'false');
            check.setAttribute('aria-expanded', 'false');
        }
    });
}

function ariaSwitchTwo() {
    checkBoxes.forEach((check) => {
        var strInfo = check.parentNode.querySelector('.str__info');
        if(check.checked) {
            strInfo.setAttribute('aria-hidden', 'false');
        } else {
            strInfo.setAttribute('aria-hidden', 'true');
        }
    })
}

And when clicking on the arrows, the attributes do change.

I have tried using aria-live, aria-atomic, and aria-relevant to get the SR to announce the aria-hidden change to no success. My initial problem is that I am still learning a lot about accessibility and don’t quite understand a lot about the attributes. (I have read up on it quite a bit, but confess that it is quite intimidating to learn on top of HTML, CSS, and JS)

I have tried putting the attributes on the .str__info div itself, the <li> parent, and <ol> but :person_shrugging:

Do any of you fine people have knowledge that could assist me in this regard?
(I am also open to any unsolicited advice when it comes to accessibility in my HTML markup)

Thank you!