From 07e5f260ad4c88879f27c3fc8742155f872e8994 Mon Sep 17 00:00:00 2001
From: Owen Jacobson <owen@grimoire.ca>
Date: Thu, 22 May 2025 00:21:35 -0400
Subject: Use browser-native methods to hide elements, not CSS alone.

The hidden `textarea` used to attach the form value to the DOM was being included in the ARIA accessibility tree, at least in testing (I didn't check in a browser). While we could suppress this iwth `aria-role="hidden"`, the WHATWG recommendation is to Not Do That, and to find another way to hide the element, instead. Marking the element as hidden accomplishes that goal, _and_ gets rid of a style rule.
---
 ui/lib/components/MessageInput.svelte | 2 +-
 ui/styles/forms.css                   | 4 ----
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/ui/lib/components/MessageInput.svelte b/ui/lib/components/MessageInput.svelte
index cdb855e..30038c6 100644
--- a/ui/lib/components/MessageInput.svelte
+++ b/ui/lib/components/MessageInput.svelte
@@ -46,7 +46,7 @@
 </script>
 
 <form {onsubmit}>
-  <textarea bind:value class="hidden" {disabled}></textarea>
+  <textarea bind:value hidden {disabled}></textarea>
   <div
     role="textbox"
     tabindex="0"
diff --git a/ui/styles/forms.css b/ui/styles/forms.css
index 98fd43e..f4d218f 100644
--- a/ui/styles/forms.css
+++ b/ui/styles/forms.css
@@ -26,7 +26,3 @@ form.form > button {
 .disabled {
   color: var(--light-text);
 }
-
-.hidden {
-  display: none;
-}
-- 
cgit v1.2.3


From 53e13f79842f1b01c8ded526b2ba8492e489e86a Mon Sep 17 00:00:00 2001
From: Owen Jacobson <owen@grimoire.ca>
Date: Thu, 22 May 2025 00:23:14 -0400
Subject: Suppress testing of the MessageInput's, uh, text input.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

We … can't test this, I think, because of a bug in `user-event`. Maybe there's an alternative that directly manipulates the DOM, but I'd prefer not to do that.
---
 ui/tests/lib/components/MessageInput.svelte.test.js | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/ui/tests/lib/components/MessageInput.svelte.test.js b/ui/tests/lib/components/MessageInput.svelte.test.js
index 508fb43..c9aaa88 100644
--- a/ui/tests/lib/components/MessageInput.svelte.test.js
+++ b/ui/tests/lib/components/MessageInput.svelte.test.js
@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/svelte';
 import userEvent from '@testing-library/user-event';
-import { beforeEach, expect, test, describe, it, vi } from 'vitest';
+import { beforeEach, expect, describe, it, vi } from 'vitest';
 import MessageInput from '$lib/components/MessageInput.svelte';
 
 const user = userEvent.setup();
@@ -17,7 +17,12 @@ describe('CreateChannelForm', async () => {
   });
 
   describe('sends a message', async () => {
-    it('with non-empty content', async () => {
+    // Skipped as `user-event` can't actually type into a div with
+    // `contenteditable="plaintext-only"` at this time. This capability is
+    // pretty core, though; we'll notice (immediately) if it breaks.
+    //
+    // See <https://github.com/testing-library/user-event/issues/1197>.
+    it.skip('with non-empty content', async () => {
       const input = screen.getByRole('textbox');
       await user.type(input, 'a happy surprise');
 
-- 
cgit v1.2.3