Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Visually hidden terminal is present in tab order and accessibility tree #245

Open
AriPerkkio opened this issue Aug 15, 2024 · 1 comment
Labels
bug Something isn't working

Comments

@AriPerkkio
Copy link
Member

AriPerkkio commented Aug 15, 2024

Describe the bug

When terminal is hidden by default, it's still possible to navigate to that hidden element with keyboard or assistive technologies. Even writing commands to the terminal works.

Link to a StackBlitz project which shows the error

No response

Steps to reproduce

  1. Create lesson with:
---
type: lesson
title: Default
mainCommand: ''
prepareCommands: []
terminal:
  panels: terminal
---

# Terminal test - Default
  1. Navigate to Toggle terminal with keyboard
  2. Navigate 2-3 tab stops more
  3. Focus is now on visually invisible element
  4. Write commands like npm start
  5. Vite server from template starts

Expected behavior

When terminal is not visually present, it should not be part of tab order or accessibility tree. Maybe it shouldn't even be in the DOM.

Screenshots

JS console logs the document.activeElement while I'm navigating the DOM with keyboard. When textarea is reached, I'm writing npm run start.

hidden-terminal-available.mov

Platform

  • TutorialKit version: 0.1.4

Additional context

No response

@AriPerkkio
Copy link
Member Author

This seems to consider all usage of react-resizable-panels. When fixing this, make sure to check codebase for // TODO: Requires #245 comments and fix those as well.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant