Broken keyboard navigation

Open
  • Is something wrong?
#247 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
35/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Stale
Tech stack
javascript
Domain
accessibility, frontend

Research direction

Inspect the page DOM and the navigation component placement, then check how the Gitter chat window is inserted and hidden. Verify keyboard focus order with the Tab key: navigation should receive focus first, chat contents should not precede it, and the navigation links should not come after the page content.

Written by the indexing model from the issue text.

Description

bug PR welcome

Expected behavior:
Pressing the Tab key first time moves focus to the first navigation element.
Actual behavior:
Visually nothing.
There are two problems here:

  1. Gitter chat window is inserted before other page elements (outside body!). It should be hidden by "display: none", but it use "translateX(110%)". So, elements inside this window get focus before navigation links.
  2. Navigation component is placed after page content, so it's elements get focus only after other links.
Dominant language
JavaScript
Stars
81
Forks
43
No merged PRs in 30d

Getting set up

Open in Codespaces

Starts the project's dev container in your browser, under your own GitHub account.

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from postcss/postcss.org

All issues in postcss/postcss.org

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.