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

オープン
  • 何か問題がありますか？
#22 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
3/5
見積もり時間
半日
初心者へのやさしさ
70/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
活発
技術スタック
typescript
領域
accessibility, frontend

調査の方向性

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.

索引モデルが issue の本文から書いたものです。

説明

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.
主要言語
TypeScript
スター
1
フォーク
0
平均マージ
30分
マージ済み PR（30日）
9

環境構築

このプロジェクトには開発コンテナ、Dockerfile、コントリビューションガイドがありません。まず README を読み、一般的な手順ははじめてのコントリビューションガイドを参照してください。

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

johnfrog76/connected-deck のほかの issue

johnfrog76/connected-deck の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。