Screen reader – Only read element with role=”alert” and not on focus

I’m building a filter for a site that needs to work with a screen reader and i’m currently facing this problem.

The filter is built in a modal that houses a set of checkboxes and one button that displays how many hits the user has got after selecting each checkbox. The text in the button is dynamic and changes depending on the number of hits there is after a checkbox has been selected.

The text in the button says “Show X hits”. I have added a role=”alert” to the button so that the screen reader pick ups imidiatly if the value/text changes in the button.

My question is, is it possible for the screen reader to read the text “X hits” when the button is triggerd by the role=”alert” and the text “Show X hits” when the user navigtes down to the button?

Example of my button:

<button type="button" role="alert" class="btn btn-primary" v-on:click="search()">
   <span class="sr-only">{{amount}} hits.</span>
   <span>Show {{amount}} hits.</span>
</button>

I’m trying to set aria-hidden=”true” on the first span when reacing the button with the screen reader, but I can’t get it to work.