Your .active Class Is Lying to Screen Readers
If I had to guess the single most common code smell in front-end projects, it wouldn't be a missing semicolon or a messy folder structure — it would be this: .hidden { display : none ; } .disabled { opacity : 0.5 ; pointer-events : none ; } .active { font-weight : bold ; } .loading { cursor : wait ; } .error { border-color : red ; } Every one of these classes is solving a problem the browser…
We haven't written up this one. Dev.to has the full story — the link below goes straight to it.