Does this fail 4.1.2 Name, Role, Value? Options List.

[A11yTea]

Hi WCAG community,
I need your help in determining if the following situation is a WCAG failure. We have a coded solution which instead of using radio buttons, the developer wanted to use a list that would be interactable. I tried it with a screen reader and the code seems to work pretty good with pretty nice feedback. I know we should be using HTML by default, but did this developer fail 4.1.2 Name, Role, Value for making a custom component rather than a radio button control?

HTML Code:

<div>
    <div aria-live="polite" aria-atomic="true">Number of items in Option list: 4</div>
    <div>Showing items 1 to 4</div>
  </div>
  <div aria-label="Option list" role="list" tabindex="52">
    <div aria-labelledby="label-1" role="listitem" aria-posinset="1" aria-setsize="4">
      <div id="label-1">Option. Selected.</div>
      <button type="button" aria-label="Banana Committee (BC)" tabindex="0">
        <span>BC</span>
      </button>
      <div>Banana Committee </div>
      <div role="button" aria-label="Icon selected" aria-disabled="true">
        <div aria-hidden="true" width="25px" height="25px">
          <svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" width="17px" height="15px" fill="rgba(255, 255, 255, 1)">
            <title></title>
          </svg>
        </div>
      </div>
    </div>
    <div aria-labelledby="label-2" role="listitem" aria-posinset="2" aria-setsize="4">
      <div id="label-2">Option.</div>
      <button type="button" aria-label="Kiwi Committee (KC)" tabindex="0">
        <span>KC</span>
      </button>
      <div>Kiwi Committee </div>
      <div role="button" aria-label="Icon selected" aria-disabled="true">
        <div aria-hidden="true" width="25px" height="25px">
          <svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" width="17px" height="15px" fill="rgba(255, 255, 255, 1)">
            <title></title>
          </svg>
        </div>
      </div>
    </div>
    <div aria-labelledby="label-3" role="listitem" aria-posinset="3" aria-setsize="4">
      <div id="label-3">Option.</div>
      <button type="button" aria-label="Mango Committee (MC)" tabindex="0">
        <span>MC</span>
      </button>
      <div>Mango Committee </div>
      <div role="button" aria-label="Icon selected" aria-disabled="true">
        <div aria-hidden="true" width="25px" height="25px">
          <svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" width="17px" height="15px" fill="rgba(255, 255, 255, 1)">
            <title></title>
          </svg>
        </div>
      </div>
    </div>
    <div aria-labelledby="label-4" role="listitem" aria-posinset="1" aria-setsize="4">
      <div id="label-4">Option.</div>
      <button type="button" aria-label="Watermelon Committee (WC)" tabindex="0">
        <span>WC</span>
      </button>
      <div>Executive Committee </div>
      <div role="button" aria-label="Icon selected" aria-disabled="true">
        <div aria-hidden="true" width="25px" height="25px">
          <svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" width="17px" height="15px" fill="rgba(255, 255, 255, 1)">
            <title></title>
          </svg>
        </div>
      </div>
    </div>
  </div>

[JAWS-test]

The HTML code is not sufficient to answer the question, as the keyboard and mouse operation implemented via JS is not visible. However, I suspect that in the end it comes down to the same problem as discussed here: #4190
This would be a violation of 4.1.2.
In order to be able to judge it exactly, you should provide a working example on Codepen, for example.