With accessibility

[timea-solid]

This PR adds HTML5 and ARIA and other WCAG2.1 basic accessibility elements.
CSS has been separated out in dedicated .css files and imported accordingly.
We are NOT using CSS modules.

[Copilot]

Pull request overview

This PR implements HTML5 semantic markup, ARIA attributes, and improved accessibility across the profile pane. It introduces CSS modules support, adds accessibility-focused tests using axe-core, and removes deprecated inline styling in favor of CSS files with accessibility-focused design tokens.

Changes:

• Adds HTML5 semantic elements (<article>, <section>, <nav>, <aside>, <header>) with proper ARIA attributes throughout components
• Implements CSS module support via webpack configuration with style-loader and css-loader
• Adds comprehensive accessibility testing using axe-core for all major components
• Refactors styling from inline JavaScript to external CSS files with accessibility-focused design tokens

Reviewed changes

Copilot reviewed 56 out of 60 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
webpack.dev.config.mjs	Adds CSS and CSS module loaders
webpack.config.mjs	New production webpack configuration with CSS support
src/ProfileCard.ts	Refactored with semantic HTML and ARIA attributes
src/QRCodeCard.ts	Adds accessibility checks and proper ARIA labeling
src/ProfileView.ts	Restructured with semantic landmarks and navigation
src/SocialCard.ts	Implements accessible list structure with ARIA
src/CVCard.ts	Refactored with semantic sections and proper headings
src/FriendList.ts	Adds ARIA attributes for friend list items
src/ChatWithMe.ts	Implements accessible button states and error handling
src/buttonsHelper.ts	New helper with ARIA live regions for messages
src/styles/*.css	New CSS files with accessibility design tokens
test/*accessibility.test.ts	New axe-core accessibility tests
package.json	Updates dependencies and build configuration
jest.config.js	Adds CSS module support for tests

Comments suppressed due to low confidence (3)

test/button-helpers.test.ts:20

• the function complain does not return anything, yet the return value is used.
  test/button-helpers.test.ts:31
• the function mention does not return anything, yet the return value is used.
  test/button-helpers.test.ts:42
• the function clearPreviousMessage does not return anything, yet the return value is used.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.