The bars show fullscreen only where it works, and name every control

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

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
Half a day
Newbie friendliness
70/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
typescript
Domain
accessibility, frontend

Research direction

Start with the fullscreen button in src/deck-engine/DeckChromeViewer.tsx and DeckChromePresenter.tsx, then the isFullscreen initial value in DeckController.tsx. Hide the button when document.fullscreenEnabled is false, add aria-label={EXIT_DECK_LABEL} to the presenter's Exit button, and move the compact bar's ✕ and chevron sizes into named constants in viewerBarLayout.ts. Done when a wide browser without the Fullscreen API shows no fullscreen button, and the engine's tests pass.

Written by the indexing model from the issue text.

Description

enhancement good first issue

Why

There are three small gaps in the bars.

  1. Fullscreen. src/deck-engine/DeckChromeViewer.tsx and DeckChromePresenter.tsx draw the fullscreen button at every non-compact width, even in a browser with no Fullscreen API (document.fullscreenEnabled is false, as on an iPhone held in landscape). There the button does nothing, which reads as broken. DeckController.tsx also starts isFullscreen at false, even when the page is already fullscreen.
  2. Names. The presenter bar's Exit button has no aria-label, unlike the viewer's, which uses EXIT_DECK_LABEL.
  3. Glyph sizes. On the compact bar, Exit's ✕ and the chevrons share one 20px size. Exit is the control most often reached for in a hurry; a slightly larger ✕ (22px) and slightly smaller chevrons (18px) make it easier to find.

What changes

  1. Both bars render the fullscreen button only when document.fullscreenEnabled is true, checked once.
  2. isFullscreen starts from !!document.fullscreenElement.
  3. The presenter's Exit gets aria-label={EXIT_DECK_LABEL}.
  4. On the compact bar, Exit's ✕ is 22px and the chevrons are 18px, each as a named constant beside the bar's other sizes in viewerBarLayout.ts.

Done when

  • At a wide width, a browser without the Fullscreen API shows no fullscreen button, and F does nothing.
  • Every presenter-bar button has an accessible name.
  • The engine's tests pass.

Out of scope

  • The presenter's previous and next glyphs, which issue 18 covers.
  • Any layout change.
Dominant language
TypeScript
Stars
1
Forks
0
Avg merge
30m
Merged PRs (30d)
9

Getting set up

This project ships no dev container, Dockerfile or contributing guide, so setting up is up to you: start from its README, and see our first-contribution guide for the general steps.

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 johnfrog76/connected-deck

All issues in johnfrog76/connected-deck

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.