[content-carousel] Replace arrows with arrows in non-psuedo elements

[jonathanmtran]

Is your feature request related to a problem? Please describe.
When our accessibility group tests the content carousels, it is noted that the arrow buttons do not have focus, especially in Google Chrome.
I believe that this is due to how arrows are rendered. They're "injected" into the carousel by CSS using the ::before pseudo element.

Presently, we're adding the following to slick-options and adding the appropriate styles to have them look the way they should

"prevArrow":"<button class=\"arrow prev-arrow\"><span aria-hidden=\"true\">&#x2190;</span><span class=\"sr-only\">Previous</span></button>",
"nextArrow":"<button class=\"arrow next-arrow\"><span aria-hidden=\"true\">&#x2192;</span><span class=\"sr-only\">Next</span></button>"

The resulting element ends up like the following

<content-carousel
  type="rss"
  source="/Announcements/getRssFeed?topic=476977"
  slick-options='{"slidesToShow":1,"infinite":true,"arrows":true,"autoplay":true,"autoplaySpeed":8000,"prevArrow":"<button class=\"arrow prev-arrow\"><span aria-hidden=\"true\">&#x2190;</span><span class=\"sr-only\">Previous</span></button>","nextArrow":"<button class=\"arrow next-arrow\"><span aria-hidden=\"true\">&#x2192;</span><span class=\"sr-only\">Next</span></button>"}'
  carousel-height="30rem"
  fit-to-container="true"
>
  <div slot="header">
    <style>
    :root {
      --cc-slick-arrow-fg-color: #fff;
      --cc-slick-arrow-position: .50%;
    }
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0,0,0,0);
      border: 0;
    }
    .slick-list { height: 30rem; }
    .slick-controls { margin-left: 1px; }
    .slick-controls button svg {
      min-width: 1rem;
      max-width: 1rem;
    }
    .arrow {
      background: none;
      border: 0;
      width: 24px;
      height: 24px;
      z-index: 2;
      padding: 0;
      position: absolute;
      top: 50%;
    }
    .arrow span {
      font-family: slick;
      font-size: 24px;
      color: var(--cc-slick-arrow-fg-color, #fff);
      display: flex;
    }
    .prev-arrow {
      left: var(--cc-slick-arrow-position, -24px);
    }
    .next-arrow {
      right: var(--cc-slick-arrow-position, -24px);
    }
    /* snip */
    }
    </style>
    <h3 class="sr-only">Campus Spotlight</h3>
  </div>
</content-carousel>

Describe the solution you'd like
I would like have the component updated such that it doesn't rely on the ::before psuedo element