Manipulate DOM elements

The marketing page needs the promo banner text updated and the close button to hide the banner. Find the banner element by id promo-banner, set its innerText to the new copy, and attach a click handler to the close button with id promo-close that sets display none on the banner. Do this and test in Chrome before pushing.

Before I hand the DOM changes to QA, make the banner easier to review: put the updated text near the top of the module, ensure the close handler also removes the aria-hidden attribute for screen readers, and flag any code that directly manipulates innerHTML instead of textContent.

I changed the close handler to set element.style.display = 'none', but testers report the banner still occupies space in Safari and VoiceOver still announces it. I can’t tell if the handler isn’t running or if CSS/ARIA is blocking it. What is the most likely cause and the quickest fix to both visually hide the banner and remove it from accessibility trees now?

Over several sprints small DOM tweaks—innerHTML edits, style toggles, appendChild calls—keep causing layout regressions and accessibility failures. I patch one and another breaks elsewhere. Which coding habit and review practice should I adopt to stop these regressions, and what lightweight tests or lint rules would catch the usual culprits before they ship?