JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Citazioni con Live Region</h1>

  <blockquote id="liveRegionQuotes" aria-live="polite" aria-atomic="true" tabindex="0"></blockquote>

  <p>In questo semplice esempio, vediamo come lo screen reader rileva i cambiamenti all'interno della pagina, segnalandoli all'utente.</p>

CSS

#liveRegionQuotes{
      position: relative;
      padding: 50px 100px 50px;
      background-color: rgb(238, 238, 238);
      width: 440px;
      font-size: 30px;
      font-style: italic;
      border: 1px solid rgb(201, 201, 201);
    }


    #liveRegionQuotes:before{
      position: absolute;
      left: 0px;
      top: 60px;
      font-size: 6em;
      line-height: 90px;
      color: rgb(197, 197, 197);
      content: '\0022';
    }

JavaScript

var quotes = new Array(
        "When Life Gives You Questions, Google has Answers",
        "If at first you don't succeed, call it version 1.0",
        "There are 10 types of people in the world: those who understand binary, and those who don't"
    );
    var timer = 8000;
    var index=0;
    var blockquoteID = "liveRegionQuotes";
    window.onload = liveQuote;

   
  function updateLiveRegion(liveRegionID, quote){
    textNode = document.createTextNode(quote);
          targetNode = document.getElementById(liveRegionID);
          while (targetNode.firstChild) {
             targetNode.removeChild(targetNode.firstChild);
             }
    targetNode.appendChild(textNode);
          }
   
  function liveQuote(){
     updateLiveRegion(blockquoteID, quotes[index++]);
     if (index > 2){
        index=0;
        }
     window.setTimeout(liveQuote, timer);
     }