Poor notification accessibility

[PosikBoy]

• Non-modal behavior

  • The notification window is not modal and does not implement focus trapping
  • This negatively impacts keyboard navigation and overall accessibility

• Incorrect list semantics

  • Notifications are presented visually as a list of similar items
  • However, they are not semantically marked up as a list in the code (<ul> / <ol>)

• Invalid interactive nesting

  • Action buttons are rendered in the header

  • If a notification itself is a <button> or <a>, this leads to:

    • ❌ buttons inside buttons
    • ❌ interactive elements inside links

  • This is an invalid and problematic pattern

• Missing accessible labels

  • Action buttons do not have proper aria-label attributes

  • Tooltips are present, but:

    • they are not accessible to screen readers
    • they do not replace semantic labeling

• Unread state is not accessible

  • Unread notifications are indicated only via visual styles
  • There is no non-visual indicator for assistive technologies
  • ✅ A visually hidden text label should be added (e.g. “Unread”)

• Improper heading structure

  • Headings are not implemented using semantic heading tags (<h1>–<h6>)
  • This makes navigation difficult for screen reader users
  • It also breaks the logical structure of the page