How Does Screen Reader Announce aria-haspopup

I noticed on W3C website, it adds an aria-haspopup=true attribute to the toggle button along with an aria-expanded=false . On small viewport, clicking the button will toggle a navigation menu.

In ARIA, interactive menus, listboxes, trees, grids, and dialogs that appear on top of other content when triggered to appear are considered “popups”. The presence of the aria-haspopup, with one of six enumerated values - menu, listbox, tree, grid, dialog, or true - indicates the element can trigger a popup and what kind of popup will be displayed. The value true is the same as menu. Any other value, including an empty string or other role, is treated as if false were set. - MDN

<button
	class="button button-menu"
	aria-haspopup="true"
	aria-expanded="false"
	id="openmenu"
>
	<span>
		<svg focusable="false" aria-hidden="true" class="icon-menu ">
			<use xlink:href="/WAI/assets/images/icons.svg#icon-menu"></use>
		</svg>
		Menu
	</span>
</button>

Below you’ll see this exact button I set up to test the VoiceOver.

I switch on VoiceOver on my Mac (Version: 14.3.1) and navigate to this button, and it announces the button as:

• Menu, menu pop up collapsed, button
• You are currently on a button. To display a list of options, press Caps Lock-Space.

To react to this button clicking, I’ve also set up a script to toggle the aria-expanded between true and false when it’s clicked. Once I press Caps Lock and Space key, VoiceOver announces: Menu, menu pop up expanded, button.