🤲 feat(a11y): Initial a11y improvements, added linters, tests; fix: close sidebars in mobile view (#3536)

* chore: playwright setup update

* refactor: update ChatRoute component with accessible loading spinner with live region

* chore(Message): typing

* ci: first pass, a11y testing

* refactor: update lang attribute in index.html to "en-US"

* ci: jsx-a11y dev eslint plugin

* ci: jsx plugin

* fix: Exclude 'vite.config.ts' from TypeScript compilation for testing

* fix(a11y): Remove tabIndex from non-interactive element in MessagesView component

* fix(a11y):
- Visible, non-interactive elements with click handlers must have at least one keyboard listener.eslintjsx-a11y/click-events-have-key-events
- Avoid non-native interactive elements. If using native HTML is not possible, add an appropriate role and support for tabbing, mouse, keyboard, and touch inputs to an interactive content element.eslintjsx-a11y/no-static-element-interactions
chore: remove unused bookmarks panel
- fix some "Unexpected nullable boolean value in conditional" warnings

* fix(NewChat): a11y, nested button issue, add aria-label, remove implicit role

* fix(a11y):
- partially address #3515 with `main` landmark
other:
- eslint@typescript-eslint/strict-boolean-expressions

* chore(MenuButton): Use button element instead of div for accessibility

* chore: Update TitleButton to use button element for accessibility

* chore: Update TitleButton to use button element for accessibility

* refactor(ChatMenuItem): Improve focus accessibility and code readability

* chore(MenuButton): Update aria-label to dynamically include primaryText

* fix(a11y): SearchBar
- If a form control does not have a properly associated text label, the function or purpose of that form control may not be presented to screen reader users. Visible form labels also provide visible descriptions and larger clickable targets for form controls which placeholders do not.

* chore: remove duplicate SearchBar twcss

* fix(a11y):
- The edit and copy buttons that are visually hidden are exposed to Assistive technology and are announced to screen reader users.

* fix(a11y): visible focus outline

* fix(a11y): The button to select the LLM Model has the aria-haspopup and aria- expanded attributes which makes its role ambuguous and unclear. It functions like a combobox but doesn't fully support that interaction and also fucntions like a dialog but doesn't completely support that interaction either.

* fix(a11y): fix visible focus outline

* fix(a11y): Scroll to bottom button missing accessible name #3474

* fix(a11y): The page lacks any heading structure. There should be at least one H1 and other headings to help users understand the orgainzation of the page and the contents.

Note: h1 won't be correct here so made it h2

* fix(a11y): LLM controls aria-labels

* fix(a11y): There is no visible focus outline to the 'send message' button

* fix(a11y): fix visible focus outline for Fork button

* refactor(MessageRender): add focus ring to message cards, consolidate complex conditions, add logger for setting latest message, add tabindex for card

* fix: focus border color and fix set latest message card condition

* fix(a11y): Adequate contrast for MessageAudio buttton

* feat: Add GitHub Actions workflow for accessibility linting

* chore: Update GitHub Actions workflow for accessibility linting to include client/src/** path

* fix(Nav): navmask and accessibility

* fix: Update Nav component to handle potential undefined type in SearchContext

* fix(a11y): add focus visibility to attach files button #3475

* fix(a11y): discernible text for NewChat button

* fix(a11y): accessible landmark names, all page content in landmarks, ensures landmarks are unique #3514 #3515

* fix(Prompts): update isChatRoute prop to be required in List component

* fix(a11y): buttons must have discernible text

e2e/playwright.config.a11y.ts

@@ -0,0 +1,50 @@
+import { PlaywrightTestConfig } from '@playwright/test';
+import mainConfig from './playwright.config';
+import path from 'path';
+const absolutePath = path.resolve(process.cwd(), 'api/server/index.js');
+import dotenv from 'dotenv';
+dotenv.config();
+
+const config: PlaywrightTestConfig = {
+  ...mainConfig,
+  retries: 0,
+  globalSetup: require.resolve('./setup/global-setup.local'),
+  globalTeardown: require.resolve('./setup/global-teardown.local'),
+  webServer: {
+    ...mainConfig.webServer,
+    command: `node ${absolutePath}`,
+    env: {
+      ...process.env,
+      SEARCH: 'false',
+      NODE_ENV: 'CI',
+      EMAIL_HOST: '',
+      TITLE_CONVO: 'false',
+      SESSION_EXPIRY: '60000',
+      REFRESH_TOKEN_EXPIRY: '300000',
+      LOGIN_VIOLATION_SCORE: '0',
+      REGISTRATION_VIOLATION_SCORE: '0',
+      CONCURRENT_VIOLATION_SCORE: '0',
+      MESSAGE_VIOLATION_SCORE: '0',
+      NON_BROWSER_VIOLATION_SCORE: '0',
+      ILLEGAL_MODEL_REQ_SCORE: '0',
+      LOGIN_MAX: '20',
+      LOGIN_WINDOW: '1',
+      REGISTER_MAX: '20',
+      REGISTER_WINDOW: '1',
+      LIMIT_CONCURRENT_MESSAGES: 'false',
+      CONCURRENT_MESSAGE_MAX: '20',
+      LIMIT_MESSAGE_IP: 'false',
+      MESSAGE_IP_MAX: '100',
+      MESSAGE_IP_WINDOW: '1',
+      LIMIT_MESSAGE_USER: 'false',
+      MESSAGE_USER_MAX: '100',
+      MESSAGE_USER_WINDOW: '1',
+    },
+  },
+  fullyParallel: false, // if you are on Windows, keep this as `false`. On a Mac, `true` could make tests faster (maybe on some Windows too, just try)
+  // workers: 1,
+  testMatch: /a11y/,
+  // retries: 0,
+};
+
+export default config;