Comparison
aria-hiddenvsdisplay: none
aria-hidden
you hid the decorative icon from screen readers while leaving it perfectly visible on screen.
An attribute removing an element and its entire subtree from the accessibility tree while leaving it rendered. It is correct for decoration that duplicates adjacent text, and dangerous everywhere else: putting it on anything focusable produces a control a keyboard can reach and a screen reader cannot describe. It is not a way to hide things visually and it does not stop focus, which is what `inert` is for.
Full entry →display: none
you hid the panel and everything below it moved up to fill the space it used to take.
Removing an element from the render tree entirely: it takes no space, is not painted, is not reachable by keyboard, and is not announced by a screen reader. Toggling it forces a full reflow of everything after it, and any transition on the element cannot run because there is no box to transition. It is the right choice when the content genuinely should not exist for anyone, and the wrong one when you only wanted it invisible.
Full entry →