Screen reader handling of dynamic search form result - accessibility

Question

I'm trying to improve accessibility on a site and I can't seem to solve a problem with NVDA screen reader and loading the results of a search page.
I've created a StackBlitz example which uses Angular and AG-Grid.
The result grid is not initially visible. When I load the results for the first time, it reads out the screen-reader-only texts, then it starts reading the whole table. I would prefer if the table was not read out loud, but that's not the issue.
The problem is when I load results again, simulating another search, the reader behaves very weird. It reads something random, and says numbers like 1 1 3... which I assume are part of the pagination. Sometimes it reads the table again, sometimes it doesn't.
On the search form I'm using aria-controls="queryResultRegion" and the target has role="region" and aria-live="polite" to make the reader aware that there's dynamic content
<form action="." aria-controls="queryResultRegion">
<button (click)="loadResults()">Load result</button>
<button (click)="noResult()">Load no result</button>
</form>
<div role="region" aria-live="polite" id="queryResultRegion">
<my-grid [rowData]="rowData"></my-grid>
</div>
On the result component I the class="sr-only" elements conditionally say either the number of results or just "No results".
<ng-container *ngIf="rowData">
<h2 class="sr-only" #resultHeader>Search Result</h2>
<div *ngIf="rowData.length < 1; else elseBlock" class="sr-only">
No results
</div>
<ng-template #elseBlock>
<div class="sr-only">
Number of results: {{ rowData.length }}
</div>
</ng-template>
<ag-grid-angular style="width: 100%; height: 200px;" class="ag-theme-alpine" [rowData]="rowData"
[columnDefs]="columnDefs" [gridOptions]="gridOptions">
</ag-grid-angular>
</ng-container>

Answer 1

Are you sure that a live region is the right thing for the results table?
I can understand the use of a live region to tell you "X results" or "No results", but not for the results themselves, which (I would expect) would be a browsable list containing a brief abstract and hyperlink for each entry.
If you mark up your results table correctly (with rowheaders and column headers) NVDA and other ATs will be able to browse it using special keyboard shortcuts. No need for a live region around it. This in itself might resolve (although not explain) your problem with 'weird' announcements.
A few more points:
aria-controls is not that useful. The spec gives no idea how it should actually behave, although the semantic is clear enough. AT support for it is currently poor. On the other hand, it does no actual harm, and makes a semantic relationship explicit. So... while I recommend that you keep it, don't expect it to do much (yet) either. I hope the community will work out a proper interaction pattern for aria-controls, because it would be handy in cases like this, and if you've already added it, it will 'just work'.
Region roles require an accessible name. One obvious way to do this is to use
aria-labeledby pointing at the id of the heading for the region, or if you don't want it to be visible, use aria-label.
If you want to offer the user some way of 'jumping' from the search field to the results (which is what aria-controls is supposed to facilitate), consider adding tabindex=-1 to the results element, as this will allow you to call focus() on that element when the results have arrived. The accessible name will be announced (if you add it), and then the AT user can use table-navigation keyboard shortcuts to browse through the results.