Accessibility - Edge Screen Reader

[alinasavin]

Hei there. I am using your plugin to build my carousel component in vue 3. I have some issues with accessibility and was wondering if anyone would know the fix.

I have my carousel component and inside the carousel item I am rendering a banner component. The issues that I am having is that the screen reader is skipping everything that is inside the carousel and my carousel additions. I am using my own custom navigation.

Code for carousel:

`

  <carousel :settings="settingsCarousel" :mouseDrag="false"  ref="myCarousel">
    <slide v-for="(item,index) in content.cards" :key="index">
      <div class="carousel__item" >
        <testimonial-banner-component :content="item" :altColors="content.altColors" />
      </div>
    </slide>

  </carousel>

  <carousel-additions v-if="content.cards.length > 1"
                      :button-color="GetBannerButtonColor"
                      :arrow-hover-color="GetArrowHoverColor"
                      offset="-75" height="0" :my-carousel="myCarousel"/>

</div>`

Code for Testimonial banner that is rendered inside the carousel_item:

`

    <svg :class="smAndSmaller ? 'd-block' : 'd-none' " fill="none" height="64" viewBox="0 0 89 77" width="89"
         xmlns="http://www.w3.org/2000/svg">
      <path
          d="M21.2826 77C14.1884 77 8.81401 74.7542 5.15942 70.2625C1.71981 65.7708 0 60.2097 0 53.5792C0 44.8097 2.36473 35.2917 7.0942 25.025C12.0386 14.5444 17.9505 6.20277 24.8297 0L35.471 7.7C25.7971 19.25 20.4227 31.0139 19.3478 42.9917C21.0676 42.5639 22.25 42.35 22.8949 42.35C27.6244 42.35 31.6014 43.8472 34.8261 46.8417C38.0507 49.8361 39.663 53.6861 39.663 58.3917C39.663 63.7389 37.9432 68.2306 34.5036 71.8667C31.279 75.2889 26.872 77 21.2826 77ZM70.6196 77C63.5254 77 58.151 74.7542 54.4964 70.2625C51.0568 65.7708 49.337 60.2097 49.337 53.5792C49.337 44.8097 51.7017 35.2917 56.4312 25.025C61.3756 14.7583 67.2874 6.41666 74.1667 0L84.808 7.7C75.1341 19.25 69.7597 31.0139 68.6848 42.9917C70.4046 42.5639 71.587 42.35 72.2319 42.35C76.9613 42.35 80.9384 43.8472 84.163 46.8417C87.3877 49.8361 89 53.6861 89 58.3917C89 63.7389 87.2802 68.2306 83.8406 71.8667C80.6159 75.2889 76.2089 77 70.6196 77Z"
          :fill="!content?.altColors ? '#C5DAED' : '#005A84'"/>
    </svg>

    <div :class="JustifyAlignment(content.textAlignment)" class="d-flex align-items-center testimonial-content" >

      <div class="testimonial-text p-3 d-flex flex-column align-items-center justify-content-center" :class="[!content?.altColors ? 'text-shades-300' : 'text-shades-50']">
        <div  v-if="content.textBlock?.html" class="w-75 m-auto"  v-html="content.textBlock.html"/>

        <div v-if="content.person.name" :class=" !content.altColors ? 'main-border' : 'alt-colors-border'"
             class="body mt-4 ">
             <div class="pt-3">
          <span >{{ content.person.name }}<span v-if="content.person.jobRole"
                                               class="body fw-bold"> | {{ content.person.jobRole }}</span></span>
                                              </div>
           </div>
      </div>
    </div>
  </div>
</div>`

Code for custom navigation:

<div class="container d-flex justify-content-center align-items-center carousel-additions" :style="[transform: translateY(${offset}px),height: ${height}px`]">
<button ref="previousHoverElement" @click="prev" class="d-flex justify-content-center align-items-center position-relative" aria-labelledby="prev-button" aria-label="Navigate to previous slide">

  <icon v-if="!previousIsHovered" class="ring small" icon="@custom:custom:circle-stroke" aria-label="arrowLeft"  />
  <icon v-else class="ring small" icon="@custom:custom:circle-fill" aria-label="arrowLeft" />

  <icon class="arrow small" icon="feather:arrow-left" aria-label="arrowLeft" />
  <span class="visually-hidden" tabindex="0">Previous button</span>
</button>

<div class="d-flex justify-content-center align-items-center px-5">
  <button v-for="index in slideCount" :key="index" :class="currentSlide === index -1 ? 'active' : ''"
          class="carousel-pagination-button px-0"
          @click="goToSlide(index -1)">
    <icon v-if="currentSlide === index -1" class="bullet" icon="@custom:custom:circle-fill"/>
    <icon v-else class="bullet" icon="@custom:custom:circle-stroke"/>
    <span class="visually-hidden">{{'Bullet Icon' + index}}</span>
  </button>


</div>

<button  aria-labelledby="next-button" aria-label="Navigate to next slide" ref="nextHoverElement" @click="next" class="d-flex justify-content-center align-items-center position-relative">
  <icon v-if="!nextIsHovered" class="ring small" icon="@custom:custom:circle-stroke" aria-label="arrowRight"  role="img"/>
  <icon v-else class="ring small" icon="@custom:custom:circle-fill" aria-label="arrowRight" />

  <icon class="arrow small" icon="feather:arrow-right" aria-label="arrowRight" />
  <span class="visually-hidden">Next Button</span>
</button>

`

I am not sure what will be the issues. I am also using the carousel to load some testimonial cards and the screen reader is skipping those as well. Is there a variable/settings I am missing here I should add to have this accessibility working? Or is this something that is not supported. Any advice will be much appreciated.