A dialog has a close button that shows only an X icon. Which markup gives it a proper accessible name?

aria-label="Close" gives the button its name, so the screen reader says "Close, button". aria-hidden="true" on the SVG hides the decorative icon, so nothing else is read.

The aria-describedby option is the tempting wrong answer. A description is extra help text, read after the name. It is not the name, so the button still has no name. alt="" on the only image leaves the button empty. The div has no role and no keyboard support.