Fix/modal buttons

[JeanKaddour]

This pull request introduces several enhancements to modal components in the frontend, focusing on improving user experience and accessibility. The key changes include adding keyboard event listeners to handle key presses and updating button styles to include additional content and size adjustments.

Enhancements to keyboard accessibility:

• frontend/src/components/modals/ConfirmationModal.tsx: Added useEffect to handle Enter and Escape key events for confirmation and closure actions.
• frontend/src/components/modals/DeployModal.tsx: Added useEffect to handle Escape key events for modal closure.
• frontend/src/components/modals/HelpModal.tsx: Added useEffect to handle Escape key events for modal closure.
• frontend/src/components/modals/HumanInputModal.tsx: Added useEffect to handle Enter (with Ctrl or Meta key) and Escape key events for submission and closure actions.
• frontend/src/components/modals/RunModal.tsx: Added useEffect to handle Enter (with Ctrl or Meta key) and Escape key events for execution and closure actions.
• frontend/src/components/modals/SettingsModal.tsx: Added useEffect to handle Escape key events for modal closure.
• frontend/src/components/modals/WelcomeModal.tsx: Added useEffect to handle Enter and Escape key events for closure actions.

Button style updates:

• frontend/src/components/modals/ConfirmationModal.tsx: Updated button size to lg and added end content to indicate keyboard shortcuts.
• frontend/src/components/modals/DeployModal.tsx: Updated button size to lg and added end content to indicate keyboard shortcuts.
• frontend/src/components/modals/HelpModal.tsx: Updated button size to lg and added end content to indicate keyboard shortcuts.
• frontend/src/components/modals/HumanInputModal.tsx: Updated button size to lg and added end content to indicate keyboard shortcuts.
• frontend/src/components/modals/RunModal.tsx: Updated button size to lg and added end content to indicate keyboard shortcuts.
• frontend/src/components/modals/SettingsModal.tsx: Updated button size to lg and added end content to indicate keyboard shortcuts.
• frontend/src/components/modals/WelcomeModal.tsx: Updated button size to lg and added end content to indicate keyboard shortcuts.
• frontend/src/components/textEditor/TextEditor.tsx: Updated button size to lg for consistency. [1] [2]

---

Important

Enhance modal components with keyboard accessibility and updated button styles for improved user experience and consistency across the frontend.

• Keyboard Accessibility:
  • Added useEffect to handle Enter and Escape key events for modals in ConfirmationModal.tsx, DeployModal.tsx, HelpModal.tsx, HumanInputModal.tsx, RunModal.tsx, SettingsModal.tsx, and WelcomeModal.tsx.
  • Specific key combinations like Ctrl+Enter or Meta+Enter are used for submission actions in HumanInputModal.tsx and RunModal.tsx.
• Button Style Updates:
  • Updated button size to lg and added end content to indicate keyboard shortcuts in ConfirmationModal.tsx, DeployModal.tsx, HelpModal.tsx, HumanInputModal.tsx, RunModal.tsx, SettingsModal.tsx, WelcomeModal.tsx, and TextEditor.tsx.
  • Consistent button styling across modals for a uniform user experience.

^{This description was created by for c5b1136. It will automatically update as commits are pushed.}

[ellipsis-dev]

❌ Changes requested. Reviewed everything up to c5b1136 in 2 minutes and 36 seconds

More details

• Looked at 421 lines of code in 8 files
• Skipped 0 files when reviewing.
• Skipped posting 16 drafted comments based on config settings.

1. frontend/src/components/modals/ConfirmationModal.tsx:32

• Draft comment:
  Great useEffect with keyboard listener; consider if invoking both onConfirm and onClose on Enter might trigger duplicate state updates.
• Reason this comment was not posted:
  Confidence changes required: 20% <= threshold 50%
  None

2. frontend/src/components/modals/DeployModal.tsx:252

• Draft comment:
  Consistent keyboard event listener; consider adding debouncing if rapid key presses could cause multiple closures.
• Reason this comment was not posted:
  Confidence changes required: 20% <= threshold 50%
  None

3. frontend/src/components/modals/HelpModal.tsx:11

• Draft comment:
  Keyboard shortcut integration is clear and accessible. No issues noted.
• Reason this comment was not posted:
  Confidence changes required: 0% <= threshold 50%
  None

4. frontend/src/components/modals/HumanInputModal.tsx:40

• Draft comment:
  When handling Ctrl+Enter and Escape keys, ensure dependency array covers functions like handleSubmit to avoid stale closures.
• Reason this comment was not posted:
  Confidence changes required: 40% <= threshold 50%
  None

5. frontend/src/components/modals/RunModal.tsx:84

• Draft comment:
  Good implementation of keyboard shortcuts for running and cancelling; consider debouncing to prevent rapid repeated triggers.
• Reason this comment was not posted:
  Confidence changes required: 30% <= threshold 50%
  None

6. frontend/src/components/modals/SettingsModal.tsx:364

• Draft comment:
  Keyboard event listener for Escape is implemented consistently. Nice addition to improve accessibility.
• Reason this comment was not posted:
  Confidence changes required: 0% <= threshold 50%
  None

7. frontend/src/components/modals/WelcomeModal.tsx:19

• Draft comment:
  Using Enter and Escape keys to trigger handleClose is clear and improves UX; implementation looks clean.
• Reason this comment was not posted:
  Confidence changes required: 0% <= threshold 50%
  None

8. frontend/src/components/textEditor/TextEditor.tsx:55

• Draft comment:
  Button sizes were updated to 'lg' for consistency. Consider memoizing getEditorExtensions if extensions rarely change to optimize performance.
• Reason this comment was not posted:
  Confidence changes required: 20% <= threshold 50%
  None

9. frontend/src/components/modals/ConfirmationModal.tsx:32

• Draft comment:
  Good addition of keyboard event listeners for 'Enter' and 'Escape'. The buttons are updated with a larger size and include shortcut indicators, improving accessibility.
• Reason this comment was not posted:
  Confidence changes required: 0% <= threshold 50%
  None

10. frontend/src/components/modals/DeployModal.tsx:252

• Draft comment:
  Keyboard accessibility has been improved by adding a listener for the 'Escape' key to close the modal. The button styling now includes a larger size and shortcut hint.
• Reason this comment was not posted:
  Confidence changes required: 0% <= threshold 50%
  None

11. frontend/src/components/modals/HelpModal.tsx:11

• Draft comment:
  The HelpModal now closes on 'Escape' with an added keydown listener, and the close button has been updated for better accessibility.
• Reason this comment was not posted:
  Confidence changes required: 0% <= threshold 50%
  None

12. frontend/src/components/modals/HumanInputModal.tsx:40

• Draft comment:
  The keyboard event listener handles Ctrl/Meta+Enter for submission and Escape for closing the modal efficiently. Button updates with uniform 'lg' size and shortcut hints enhance the user experience.
• Reason this comment was not posted:
  Confidence changes required: 0% <= threshold 50%
  None

13. frontend/src/components/modals/RunModal.tsx:87

• Draft comment:
  RunModal now supports keyboard shortcuts for running (Ctrl/Meta+Enter) and closing (Escape), along with updated button sizing and shortcut indicators which improve consistency and accessibility.
• Reason this comment was not posted:
  Confidence changes required: 0% <= threshold 50%
  None

14. frontend/src/components/modals/SettingsModal.tsx:364

• Draft comment:
  The SettingsModal now listens for the Escape key to close and API key buttons have been updated to 'lg' size with shortcut indicators, leading to a more consistent UI.
• Reason this comment was not posted:
  Confidence changes required: 0% <= threshold 50%
  None

15. frontend/src/components/modals/WelcomeModal.tsx:19

• Draft comment:
  Enhanced accessibility in WelcomeModal by adding keydown handlers for both 'Enter' and 'Escape', with the action reflected in an updated 'Get Started' button.
• Reason this comment was not posted:
  Confidence changes required: 0% <= threshold 50%
  None

16. frontend/src/components/textEditor/TextEditor.tsx:457

• Draft comment:
  TextEditor button sizes have been updated to 'lg' for consistency with the other modal components. This ensures a uniform look and improves readability across different sections.
• Reason this comment was not posted:
  Confidence changes required: 0% <= threshold 50%
  None

Workflow ID: wflow_gpwDUZEBpBnlm4iZ

---

Want Ellipsis to fix these issues? Tag @ellipsis-dev in a comment. You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.