Guard completion acceptance against Safari IME confirmation

Author: konojunya

src/App.test.tsx

@@ -295,6 +295,13 @@ describe("Stack Playground", () => {
     expect(screen.queryByRole("listbox")).not.toBeInTheDocument()
     fireEvent.compositionEnd(editor)
     await screen.findByRole("listbox")
+    fireEvent.keyDown(editor, { key: "Enter", isComposing: true })
+    expect(editor).toHaveValue(source)
+    expect(screen.getByRole("listbox")).toBeInTheDocument()
+    // Safari's confirming Enter may arrive after compositionend with isComposing false.
+    fireEvent.keyDown(editor, { key: "Enter", keyCode: 229, isComposing: false })
+    expect(editor).toHaveValue(source)
+    expect(screen.getByRole("listbox")).toBeInTheDocument()
     await user.keyboard("{ArrowDown}{Enter}")
 
     expect(editor).toHaveValue(source.slice(0, editStart) + "group")

src/components/editor-pane.tsx

@@ -408,6 +408,9 @@ export function EditorPane({
             source={source}
           />
 
+          <label className="sr-only" htmlFor="stack-source">
+            Stack source
+          </label>
           <textarea
             aria-activedescendant={activeOptionId}
             aria-autocomplete="list"
@@ -457,6 +460,8 @@ export function EditorPane({
             }}
             onKeyDown={(event) => {
               if (composingRef.current || event.nativeEvent.isComposing) return
+              // Safari can deliver compositionend before the IME-confirming Enter.
+              if (event.key === "Enter" && event.nativeEvent.keyCode === 229) return
               if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
                 event.preventDefault()
                 setCompletion(null)