Skip to content

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

Open
@AriPerkkio

Description

@AriPerkkio

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions