A responsive notifications panel demo with accessible list semantics and visual read/unread states.
notifications-panel shows recent notifications in a dropdown or sidebar style. Uses <ul role="list"> and <li role="listitem">, with emoji icons (role="img") and aria-label. Unread items have a distinct background for quick scanning.
<aside>withrole="region"andaria-label- Semantic list markup (
role="list",role="listitem") - Read/unread visual distinction via background colors
- Emoji icons with
role="img"andaria-label - Responsive and hover-friendly design
- index.html: Demo panel with sample notifications
- README.md: Project overview, features, file breakdown
- .gitignore: macOS, VSCode, node_modules ignores
- HTML5
- Tailwind CSS (via CDN)
Andrew Hueston