I have the following html elements. The count is in span element and text is in DIV tag. When I hover on the count it is reading only the number and when I hover on the text of the DIV tag, it is reading only text. But I want the screen reader to read the complete text as '1 Document'. For that I kept 'aria-label' attribute with count and text for the parent DIV with class 'list-item'. But still its reading only text 'Document' but not the count as a whole.
<div class="list-item" title="documents" aria-label ="1 Document">
<span class="rt-count">1</span>
<div title="Documents" class="list-item-title" aria-labelledby="1 Document">Document</div>
</div>
You better try like this
<div class="list-item" title="documents" aria-label ="1 Document">
<div title="Documents" class="list-item-title"><span class="rt-count">1</span> Document</div>
</div>
now you it can read on hovering of div text "1 Document"