Narrator should read "no search results" if there is no result while searching

Question

I have a search box in my html page. On enter key press - it filter out the data list to be shown below.

One of the screen reader requirement says that it should read out that No results are found when nothing matches.

As "no result found" is a non actionable element and ideally tab focus should not go that label. So how indicate that user of "No results found"

Not able to implement it using using aria-label aria-live

Sample Code : HTML :

<input tabindex="1" type="text" id="textIn" />
 <div tabindex="1" id="searchContent" style="width:100px;height:50px;" aria-live="assertive">

 </div>

Javascript

$("#textIn").on('keydown', function (e)  {
         if(e.keyCode == '13') {
             shout();
         }
     })

     function shout() {
         var searchContent = $('#searchContent');
         var noResults = document.createElement('div');
         noResults.innerHTML = '<label class="">No Results found</label>';
         searchContent.append(noResults);
     }

Answer 1

This ARIA alert support article addresses Narrator support. It references an alert test page so you can play around with the options.

I made a CodePen from the two examples that work in Narrator. The code can be optimized a lot, but it shows how role="alert" can be used in conjunction JS and CSS to do what you need.

HTML

    <h2>Method 3: display error by Changing CSS display:none to inline</h2>
    <p><input type="submit" value="Method 3 alert - display" onclick="displayError()"></p>

    <h2>Method 4: display error by adding text using createTextNode()</h2>
    <p><input type="submit" value="Method 4 alert - display" onclick="addError()"></p>

    <div id="displayerror" class="display">
      <div class="alert" id="displayerror1" role="alert">alert via display none to block</div>
    </div>

    <div id="display2" role="alert"><span id="add1"></span></div>

CSS

    .display {
      position: absolute;
      top: 5px;
      left: 200px;
      height: 30px;
      width: 200px;
    }

    #display2 {
      position: absolute;
      top: 5px;
      left: 400px;
      height: 30px;
      width: 200px;
      clip: rect(0px, 0px, 0px, 0px);
      border: 1px dashed red;
      text-align: center;
      padding: 5px;
      background: #ffff00;
      font-weight: bold;
    }

JS

    function displayError() {
      var elem = document.getElementById("displayerror");
      document.getElementById('displayerror1').style.display = 'block';
    }

    function addError() {
      var elem1 = document.getElementById("add1");
      elem1.setAttribute("role", "alert");
      document.getElementById('display2').style.clip = 'auto';
      alertText = document.createTextNode("alert via createTextnode()");
      elem1.appendChild(alertText);
      elem1.style.display = 'none';
      elem1.style.display = 'inline';
    }