diff --git a/.eslintrc.yml b/.eslintrc.yml index 0ac026ba64..6aed8ef20d 100644 --- a/.eslintrc.yml +++ b/.eslintrc.yml @@ -79,6 +79,9 @@ overrides: - files: - '__tests__/**/*.js' + - '__tests__/**/*.jsx' + - '__tests__/**/*.ts' + - '__tests__/**/*.tsx' - '**/*.spec.js' - '**/*.spec.jsx' - '**/*.spec.ts' @@ -89,12 +92,21 @@ overrides: - '**/*.test.tsx' env: + browser: true jest: true + parserOptions: + ecmaFeatures: + jsx: true + rules: + '@typescript-eslint/no-namespace': off '@typescript-eslint/no-require-imports': off - no-magic-numbers: off 'react/forbid-elements': off + no-console: off + no-magic-numbers: off + prefer-arrow-callback: off + prefer-destructuring: off rules: # Only list rules that are not in *:recommended set diff --git a/__tests__/html2/accessibility/scanMode/ideal/interactMode1/clickNonInteractiveMessage.html b/__tests__/html2/accessibility/scanMode/ideal/interactMode1/clickNonInteractiveMessage.html new file mode 100644 index 0000000000..e92f7a1976 --- /dev/null +++ b/__tests__/html2/accessibility/scanMode/ideal/interactMode1/clickNonInteractiveMessage.html @@ -0,0 +1,41 @@ + + + + + + + +
+ + + diff --git a/__tests__/html2/accessibility/scanMode/ideal/interactMode1/clickTextBoxInsideMessage.html b/__tests__/html2/accessibility/scanMode/ideal/interactMode1/clickTextBoxInsideMessage.html new file mode 100644 index 0000000000..9dddc8521f --- /dev/null +++ b/__tests__/html2/accessibility/scanMode/ideal/interactMode1/clickTextBoxInsideMessage.html @@ -0,0 +1,31 @@ + + + + + + + +
+ + + diff --git a/__tests__/html2/accessibility/scanMode/ideal/interactMode1/dontKeepPositionWhenNotFocused.html b/__tests__/html2/accessibility/scanMode/ideal/interactMode1/dontKeepPositionWhenNotFocused.html new file mode 100644 index 0000000000..c63a13d783 --- /dev/null +++ b/__tests__/html2/accessibility/scanMode/ideal/interactMode1/dontKeepPositionWhenNotFocused.html @@ -0,0 +1,52 @@ + + + + + + + +
+ + + diff --git a/__tests__/html2/accessibility/scanMode/ideal/interactMode1/keepPositionWhenFocused.html b/__tests__/html2/accessibility/scanMode/ideal/interactMode1/keepPositionWhenFocused.html new file mode 100644 index 0000000000..f2a8d1cb58 --- /dev/null +++ b/__tests__/html2/accessibility/scanMode/ideal/interactMode1/keepPositionWhenFocused.html @@ -0,0 +1,43 @@ + + + + + + + +
+ + + diff --git a/__tests__/html2/accessibility/scanMode/ideal/interactMode1/pressArrowKeyOnTextBox.html b/__tests__/html2/accessibility/scanMode/ideal/interactMode1/pressArrowKeyOnTextBox.html new file mode 100644 index 0000000000..3bc43605ce --- /dev/null +++ b/__tests__/html2/accessibility/scanMode/ideal/interactMode1/pressArrowKeyOnTextBox.html @@ -0,0 +1,37 @@ + + + + + + + +
+ + + diff --git a/__tests__/html2/accessibility/scanMode/ideal/interactMode1/pressArrowKeyToMoveAcrossMessages.html b/__tests__/html2/accessibility/scanMode/ideal/interactMode1/pressArrowKeyToMoveAcrossMessages.html new file mode 100644 index 0000000000..b71194b04e --- /dev/null +++ b/__tests__/html2/accessibility/scanMode/ideal/interactMode1/pressArrowKeyToMoveAcrossMessages.html @@ -0,0 +1,53 @@ + + + + + + + +
+ + + diff --git a/__tests__/html2/accessibility/scanMode/ideal/interactMode1/pressEnterOnMessage.html b/__tests__/html2/accessibility/scanMode/ideal/interactMode1/pressEnterOnMessage.html new file mode 100644 index 0000000000..a882f3a41c --- /dev/null +++ b/__tests__/html2/accessibility/scanMode/ideal/interactMode1/pressEnterOnMessage.html @@ -0,0 +1,31 @@ + + + + + + + +
+ + + diff --git a/__tests__/html2/accessibility/scanMode/ideal/interactMode1/pressEnterOnSubmitButton.html b/__tests__/html2/accessibility/scanMode/ideal/interactMode1/pressEnterOnSubmitButton.html new file mode 100644 index 0000000000..5aa1d0ebff --- /dev/null +++ b/__tests__/html2/accessibility/scanMode/ideal/interactMode1/pressEnterOnSubmitButton.html @@ -0,0 +1,42 @@ + + + + + + + +
+ + + diff --git a/__tests__/html2/accessibility/scanMode/ideal/interactMode1/pressEscapeOnForm.html b/__tests__/html2/accessibility/scanMode/ideal/interactMode1/pressEscapeOnForm.html new file mode 100644 index 0000000000..76d198e9b5 --- /dev/null +++ b/__tests__/html2/accessibility/scanMode/ideal/interactMode1/pressEscapeOnForm.html @@ -0,0 +1,30 @@ + + + + + + + +
+ + + diff --git a/__tests__/html2/accessibility/scanMode/ideal/interactMode1/pressEscapeOnMessage.html b/__tests__/html2/accessibility/scanMode/ideal/interactMode1/pressEscapeOnMessage.html new file mode 100644 index 0000000000..d91b06db43 --- /dev/null +++ b/__tests__/html2/accessibility/scanMode/ideal/interactMode1/pressEscapeOnMessage.html @@ -0,0 +1,33 @@ + + + + + + + +
+ + + diff --git a/__tests__/html2/accessibility/scanMode/ideal/interactMode1/pressEscapeOnMessageBody.html b/__tests__/html2/accessibility/scanMode/ideal/interactMode1/pressEscapeOnMessageBody.html new file mode 100644 index 0000000000..53834a3368 --- /dev/null +++ b/__tests__/html2/accessibility/scanMode/ideal/interactMode1/pressEscapeOnMessageBody.html @@ -0,0 +1,36 @@ + + + + + + + +
+ + + diff --git a/__tests__/html2/accessibility/scanMode/ideal/interactMode1/pressShiftTabOnChatHistory.html b/__tests__/html2/accessibility/scanMode/ideal/interactMode1/pressShiftTabOnChatHistory.html new file mode 100644 index 0000000000..7171796009 --- /dev/null +++ b/__tests__/html2/accessibility/scanMode/ideal/interactMode1/pressShiftTabOnChatHistory.html @@ -0,0 +1,40 @@ + + + + + + + + + +
+ + + diff --git a/__tests__/html2/accessibility/scanMode/ideal/interactMode1/pressShiftTabOnInteractiveMessageBody.html b/__tests__/html2/accessibility/scanMode/ideal/interactMode1/pressShiftTabOnInteractiveMessageBody.html new file mode 100644 index 0000000000..5365cbbbb7 --- /dev/null +++ b/__tests__/html2/accessibility/scanMode/ideal/interactMode1/pressShiftTabOnInteractiveMessageBody.html @@ -0,0 +1,43 @@ + + + + + + + +
+ + + diff --git a/__tests__/html2/accessibility/scanMode/ideal/interactMode1/pressShiftTabOnNonInteractiveMessageBody.html b/__tests__/html2/accessibility/scanMode/ideal/interactMode1/pressShiftTabOnNonInteractiveMessageBody.html new file mode 100644 index 0000000000..78cb671062 --- /dev/null +++ b/__tests__/html2/accessibility/scanMode/ideal/interactMode1/pressShiftTabOnNonInteractiveMessageBody.html @@ -0,0 +1,32 @@ + + + + + + + +
+ + + diff --git a/__tests__/html2/accessibility/scanMode/ideal/interactMode1/pressShiftTabOnSendBox.html b/__tests__/html2/accessibility/scanMode/ideal/interactMode1/pressShiftTabOnSendBox.html new file mode 100644 index 0000000000..df15fef4b2 --- /dev/null +++ b/__tests__/html2/accessibility/scanMode/ideal/interactMode1/pressShiftTabOnSendBox.html @@ -0,0 +1,28 @@ + + + + + + + +
+ + + diff --git a/__tests__/html2/accessibility/scanMode/ideal/interactMode1/pressTabFromAbove.html b/__tests__/html2/accessibility/scanMode/ideal/interactMode1/pressTabFromAbove.html new file mode 100644 index 0000000000..6b85cb9f49 --- /dev/null +++ b/__tests__/html2/accessibility/scanMode/ideal/interactMode1/pressTabFromAbove.html @@ -0,0 +1,39 @@ + + + + + + + + + +
+ + + diff --git a/__tests__/html2/accessibility/scanMode/ideal/interactMode1/pressTabOnChatHistory.html b/__tests__/html2/accessibility/scanMode/ideal/interactMode1/pressTabOnChatHistory.html new file mode 100644 index 0000000000..9dee9d058e --- /dev/null +++ b/__tests__/html2/accessibility/scanMode/ideal/interactMode1/pressTabOnChatHistory.html @@ -0,0 +1,31 @@ + + + + + + + +
+ + + diff --git a/__tests__/html2/accessibility/scanMode/ideal/interactMode1/pressTabOnInteractiveMessageBody.html b/__tests__/html2/accessibility/scanMode/ideal/interactMode1/pressTabOnInteractiveMessageBody.html new file mode 100644 index 0000000000..53bb78b1f0 --- /dev/null +++ b/__tests__/html2/accessibility/scanMode/ideal/interactMode1/pressTabOnInteractiveMessageBody.html @@ -0,0 +1,37 @@ + + + + + + + +
+ + + diff --git a/__tests__/html2/accessibility/scanMode/ideal/interactMode1/pressTabOnNonInteractiveMessageBody.html b/__tests__/html2/accessibility/scanMode/ideal/interactMode1/pressTabOnNonInteractiveMessageBody.html new file mode 100644 index 0000000000..3a3140ef02 --- /dev/null +++ b/__tests__/html2/accessibility/scanMode/ideal/interactMode1/pressTabOnNonInteractiveMessageBody.html @@ -0,0 +1,46 @@ + + + + + + + +
+ + + diff --git a/__tests__/html2/accessibility/scanMode/ideal/interactMode1/saveFocusedMessage.html b/__tests__/html2/accessibility/scanMode/ideal/interactMode1/saveFocusedMessage.html new file mode 100644 index 0000000000..d18602ca6d --- /dev/null +++ b/__tests__/html2/accessibility/scanMode/ideal/interactMode1/saveFocusedMessage.html @@ -0,0 +1,36 @@ + + + + + + + +
+ + + diff --git a/__tests__/html2/accessibility/scanMode/ideal/interactMode2/chatHistoryShouldSaveFocus.html b/__tests__/html2/accessibility/scanMode/ideal/interactMode2/chatHistoryShouldSaveFocus.html new file mode 100644 index 0000000000..4821ef7ba3 --- /dev/null +++ b/__tests__/html2/accessibility/scanMode/ideal/interactMode2/chatHistoryShouldSaveFocus.html @@ -0,0 +1,42 @@ + + + + + + + +
+ + + diff --git a/__tests__/html2/accessibility/scanMode/ideal/interactMode2/clickNonInteractiveMessage.html b/__tests__/html2/accessibility/scanMode/ideal/interactMode2/clickNonInteractiveMessage.html new file mode 100644 index 0000000000..66a1d0cee7 --- /dev/null +++ b/__tests__/html2/accessibility/scanMode/ideal/interactMode2/clickNonInteractiveMessage.html @@ -0,0 +1,36 @@ + + + + + + + +
+ + + diff --git a/__tests__/html2/accessibility/scanMode/ideal/interactMode2/clickTextBox.html b/__tests__/html2/accessibility/scanMode/ideal/interactMode2/clickTextBox.html new file mode 100644 index 0000000000..0098d944d5 --- /dev/null +++ b/__tests__/html2/accessibility/scanMode/ideal/interactMode2/clickTextBox.html @@ -0,0 +1,33 @@ + + + + + + + +
+ + + diff --git a/__tests__/html2/accessibility/scanMode/ideal/interactMode2/incomingMessageShouldMoveFocusWhenFocusedAway.html b/__tests__/html2/accessibility/scanMode/ideal/interactMode2/incomingMessageShouldMoveFocusWhenFocusedAway.html new file mode 100644 index 0000000000..bf916ea9a2 --- /dev/null +++ b/__tests__/html2/accessibility/scanMode/ideal/interactMode2/incomingMessageShouldMoveFocusWhenFocusedAway.html @@ -0,0 +1,47 @@ + + + + + + + +
+ + + diff --git a/__tests__/html2/accessibility/scanMode/ideal/interactMode2/incomingMessageShouldNotMoveFocus.html b/__tests__/html2/accessibility/scanMode/ideal/interactMode2/incomingMessageShouldNotMoveFocus.html new file mode 100644 index 0000000000..186bbcb8a8 --- /dev/null +++ b/__tests__/html2/accessibility/scanMode/ideal/interactMode2/incomingMessageShouldNotMoveFocus.html @@ -0,0 +1,44 @@ + + + + + + + +
+ + + diff --git a/__tests__/html2/accessibility/scanMode/ideal/interactMode2/pressArrowKeyOnTextBox.html b/__tests__/html2/accessibility/scanMode/ideal/interactMode2/pressArrowKeyOnTextBox.html new file mode 100644 index 0000000000..c14ad671e3 --- /dev/null +++ b/__tests__/html2/accessibility/scanMode/ideal/interactMode2/pressArrowKeyOnTextBox.html @@ -0,0 +1,37 @@ + + + + + + + +
+ + + diff --git a/__tests__/html2/accessibility/scanMode/ideal/interactMode2/pressArrowKeyToMoveAcrossMessages.html b/__tests__/html2/accessibility/scanMode/ideal/interactMode2/pressArrowKeyToMoveAcrossMessages.html new file mode 100644 index 0000000000..d5b398f2ee --- /dev/null +++ b/__tests__/html2/accessibility/scanMode/ideal/interactMode2/pressArrowKeyToMoveAcrossMessages.html @@ -0,0 +1,53 @@ + + + + + + + +
+ + + diff --git a/__tests__/html2/accessibility/scanMode/ideal/interactMode2/pressEnterFromMessage.html b/__tests__/html2/accessibility/scanMode/ideal/interactMode2/pressEnterFromMessage.html new file mode 100644 index 0000000000..71dfd673e8 --- /dev/null +++ b/__tests__/html2/accessibility/scanMode/ideal/interactMode2/pressEnterFromMessage.html @@ -0,0 +1,31 @@ + + + + + + + +
+ + + diff --git a/__tests__/html2/accessibility/scanMode/ideal/interactMode2/pressEnterOnSubmitButton.html b/__tests__/html2/accessibility/scanMode/ideal/interactMode2/pressEnterOnSubmitButton.html new file mode 100644 index 0000000000..a82e112f0a --- /dev/null +++ b/__tests__/html2/accessibility/scanMode/ideal/interactMode2/pressEnterOnSubmitButton.html @@ -0,0 +1,42 @@ + + + + + + + +
+ + + diff --git a/__tests__/html2/accessibility/scanMode/ideal/interactMode2/pressEscapeKeyOnInteractiveMessage.html b/__tests__/html2/accessibility/scanMode/ideal/interactMode2/pressEscapeKeyOnInteractiveMessage.html new file mode 100644 index 0000000000..30778a1ffe --- /dev/null +++ b/__tests__/html2/accessibility/scanMode/ideal/interactMode2/pressEscapeKeyOnInteractiveMessage.html @@ -0,0 +1,41 @@ + + + + + + + +
+ + + diff --git a/__tests__/html2/accessibility/scanMode/ideal/interactMode2/pressEscapeOnNonInteractiveMessage.html b/__tests__/html2/accessibility/scanMode/ideal/interactMode2/pressEscapeOnNonInteractiveMessage.html new file mode 100644 index 0000000000..84a896427c --- /dev/null +++ b/__tests__/html2/accessibility/scanMode/ideal/interactMode2/pressEscapeOnNonInteractiveMessage.html @@ -0,0 +1,35 @@ + + + + + + + +
+ + + diff --git a/__tests__/html2/accessibility/scanMode/ideal/interactMode2/pressShiftTabFromChatHistory.html b/__tests__/html2/accessibility/scanMode/ideal/interactMode2/pressShiftTabFromChatHistory.html new file mode 100644 index 0000000000..35ceeda448 --- /dev/null +++ b/__tests__/html2/accessibility/scanMode/ideal/interactMode2/pressShiftTabFromChatHistory.html @@ -0,0 +1,40 @@ + + + + + + + + + +
+ + + diff --git a/__tests__/html2/accessibility/scanMode/ideal/interactMode2/pressTabFromAbove.html b/__tests__/html2/accessibility/scanMode/ideal/interactMode2/pressTabFromAbove.html new file mode 100644 index 0000000000..0c03df7534 --- /dev/null +++ b/__tests__/html2/accessibility/scanMode/ideal/interactMode2/pressTabFromAbove.html @@ -0,0 +1,40 @@ + + + + + + + + + +
+ + + diff --git a/__tests__/html2/accessibility/scanMode/ideal/interactMode2/pressTabFromNonInteractiveMessage.html b/__tests__/html2/accessibility/scanMode/ideal/interactMode2/pressTabFromNonInteractiveMessage.html new file mode 100644 index 0000000000..efdca54974 --- /dev/null +++ b/__tests__/html2/accessibility/scanMode/ideal/interactMode2/pressTabFromNonInteractiveMessage.html @@ -0,0 +1,31 @@ + + + + + + + +
+ + + diff --git a/__tests__/html2/accessibility/scanMode/ideal/interactMode2/pressTabInsideInteractiveMessage.html b/__tests__/html2/accessibility/scanMode/ideal/interactMode2/pressTabInsideInteractiveMessage.html new file mode 100644 index 0000000000..6177d5b684 --- /dev/null +++ b/__tests__/html2/accessibility/scanMode/ideal/interactMode2/pressTabInsideInteractiveMessage.html @@ -0,0 +1,43 @@ + + + + + + + +
+ + + diff --git a/__tests__/html2/accessibility/scanMode/ideal/interactMode2/pressTabToFocusAwayFromInteractiveMessage.html b/__tests__/html2/accessibility/scanMode/ideal/interactMode2/pressTabToFocusAwayFromInteractiveMessage.html new file mode 100644 index 0000000000..611167dd2e --- /dev/null +++ b/__tests__/html2/accessibility/scanMode/ideal/interactMode2/pressTabToFocusAwayFromInteractiveMessage.html @@ -0,0 +1,44 @@ + + + + + + + +
+ + + diff --git a/__tests__/html2/accessibility/scanMode/ideal/interactMode2/restoreFocusInsideMessage.html b/__tests__/html2/accessibility/scanMode/ideal/interactMode2/restoreFocusInsideMessage.html new file mode 100644 index 0000000000..4836ec4521 --- /dev/null +++ b/__tests__/html2/accessibility/scanMode/ideal/interactMode2/restoreFocusInsideMessage.html @@ -0,0 +1,47 @@ + + + + + + + +
+ + + diff --git a/__tests__/html2/accessibility/scanMode/ideal/playground-mode1.skip.html b/__tests__/html2/accessibility/scanMode/ideal/playground-mode1.skip.html new file mode 100644 index 0000000000..de3b1c7cdb --- /dev/null +++ b/__tests__/html2/accessibility/scanMode/ideal/playground-mode1.skip.html @@ -0,0 +1,35 @@ + + + + + + + + +
+ +
+ +
+ + + diff --git a/__tests__/html2/accessibility/scanMode/ideal/playground-mode2.skip.html b/__tests__/html2/accessibility/scanMode/ideal/playground-mode2.skip.html new file mode 100644 index 0000000000..580bfb2777 --- /dev/null +++ b/__tests__/html2/accessibility/scanMode/ideal/playground-mode2.skip.html @@ -0,0 +1,35 @@ + + + + + + + + +
+ +
+ +
+ + + diff --git a/__tests__/html2/accessibility/scanMode/ideal/static/index.css b/__tests__/html2/accessibility/scanMode/ideal/static/index.css new file mode 100644 index 0000000000..995271f397 --- /dev/null +++ b/__tests__/html2/accessibility/scanMode/ideal/static/index.css @@ -0,0 +1,96 @@ +body { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; +} + +.chat-history { + border-radius: 8px; + display: flex; + flex-direction: column; + gap: 12px; + padding: 6px; + width: 360px; +} + +.chat-history.chat-history--interact-mode-1 { + background-color: rgba(0, 255, 0, 0.1); +} + +.chat-history.chat-history--interact-mode-2 { + background-color: rgba(255, 0, 0, 0.1); +} + +button:focus { + background-color: yellow !important; +} + +.chat-history:focus-within:has(.chat-message__body:focus) { + outline: solid 2px black; +} + +.chat-message:focus-within:has(.chat-message__body:focus) { + outline: dashed 2px black; + outline-offset: -2px; +} + +.chat-message__body:focus { + outline: none; +} + +.chat-message { + background-color: White; + border: solid 1px #ddd; + border-radius: 8px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); + padding: 8px; + position: relative; + transition: opacity ease-out 50ms; +} + +.chat-message__header { + color: #999; + font-size: smaller; + font-weight: lighter; + margin-block-start: 0; + margin-block-end: 0.2em; +} + +.chat-history:focus-within .chat-message:not(:focus-within) { + opacity: 0.4; +} + +.chat-message__body > .focus-trap > p:first-of-type, +.chat-message__body > p:first-of-type { + margin-block-start: 0; +} + +.chat-message__body > .focus-trap > p:last-of-type, +.chat-message__body > p:last-of-type { + margin-block-end: 0; +} + +.chat-message__content, +.focus-trap { + /* These elements are meaningless in CSS world, adding "display: contents" to save some CPUs. */ + display: contents; +} + +.send-box { + margin: 6px; +} + +.focus-sentinel { + /* Cannot use display: contents because it would mark the element as non-focusable. */ + clip: rect(0, 0, 0, 0); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} + +.ac-adaptiveCard { + /* background-color: #f7f7f7 !important; */ + border: solid 1px #f0f0f0; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); + margin-top: 0.5em; +} diff --git a/__tests__/html2/accessibility/scanMode/ideal/static/index.js b/__tests__/html2/accessibility/scanMode/ideal/static/index.js new file mode 100644 index 0000000000..fde55b6e7d --- /dev/null +++ b/__tests__/html2/accessibility/scanMode/ideal/static/index.js @@ -0,0 +1,90 @@ +// @ts-ignore +import init, { transform } from 'https://esm.sh/@esm.sh/tsx'; +// @ts-ignore +import { waitFor } from 'https://esm.sh/@testduet/wait-for'; +import './private/FocusTrap.js'; + +async function render({ interactMode } = { interactMode: 1 }) { + if (!location.hash.startsWith('#mode=')) { + location.replace(`#mode=${interactMode ?? 1}`); + } + + await init(); + + const res = await fetch(new URL('private/index.tsx', import.meta.url)); + + if (!res.ok) { + throw new Error(`Failed to load ./private/index.tsx, server returned ${res.status}`); + } + + const code = await res.text(); + + const importMap = { + imports: { + classnames: 'https://esm.sh/classnames', + 'jest-mock': 'https://esm.sh/jest-mock', + react: 'https://esm.sh/react', + 'react-dom': 'https://esm.sh/react-dom' + } + }; + + const transformed = transform({ filename: '/index.tsx', code, importMap }); + + const decoder = new TextDecoder(); + + const transformedCode = decoder.decode(transformed.code); + + const scriptElement = document.createElement('script'); + + scriptElement.setAttribute('type', 'module'); + scriptElement.textContent = transformedCode; + + document.body.append(scriptElement); + + await waitFor( + () => { + const textAreaElement = document.querySelector('textarea'); + + if (!textAreaElement) { + throw new Error('No