Skip to content

Commit

Permalink
docs(spindle-ui): fix Design Doc for BottomButton
Browse files Browse the repository at this point in the history
  • Loading branch information
tatz012 committed Oct 16, 2023
1 parent 2cf5972 commit d0971e3
Showing 1 changed file with 8 additions and 7 deletions.
15 changes: 8 additions & 7 deletions packages/spindle-ui/src/BottomButton/design-doc.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
# BottomButton

## 概要・背景
モーダルやLPなどで、ボタンを画面下部にスクロールさせずに固定させておくためのボタンです。これにより、ユーザーがどの位置にスクロールしていてもアクセスを容易にします
モーダルやLPなどで、ボタンを画面下部にスクロールさせずに固定させておくためのComponentです。これにより、ユーザーがページのどの位置にスクロールしていてもアクセスを容易にします

## スクリーンショット
<img width="334" alt="BottomButtonのイメージ画像。画面下部にボタンが固定されている" src="https://github.com/openameba/spindle/assets/44389443/2b75bbba-4f8c-4891-8e6f-36a44c5dfbe7">
Expand All @@ -18,7 +18,7 @@
```

### DO NOT
ボタンが大きすぎたり複数のボタンを画面に固定すると、ウェブページの本文や重要な情報を覆い隠してしまう可能性があります。ボタンの数やサイズは適切に調整し、コンテンツが見えにくくなることを避けてください。
ボタンが大きすぎたり複数のボタンを画面に固定すると、ウェブページの本文や重要な情報を覆い隠してしまう可能性があります。特にスマホで画面を横向きにした場合に縦幅が縮み隠れてしまう可能性があります。ボタンの数やサイズは適切に調整し、コンテンツが見えにくくなることを避けてください。

## 要素

Expand Down Expand Up @@ -58,13 +58,14 @@ return (
```

## アクセシビリティ
- [表示の向きを固定しない](https://a11y-guidelines.ameba.design/1/3/4/)[SHOULD]
- [表示の向きを固定しない](https://a11y-guidelines.ameba.design/1/3/4/)[できれば]
- [ ] 画面の向きに関わらず画面下部に表示されるように実装している
- [リフローできる](https://a11y-guidelines.ameba.design/1/4/10/)[SHOULD]
- [ ] 端末を横向きにしても、コンポーネントがコンテンツの視認性を妨げない
- [リフローできる](https://a11y-guidelines.ameba.design/1/4/10/)[できれば]
- [ ] 画面を400%まで拡大しても、画面幅に合わせて横幅が変動する
- [適切なフォーカス順序にする](https://a11y-guidelines.ameba.design/2/4/3/)[MUST]
- [ ] キーボード操作の順序が、見た目の順序と一致している
- [HTMLを正しく記述する](https://a11y-guidelines.ameba.design/4/1/1/)[MUST]
- [適切なフォーカス順序にする](https://a11y-guidelines.ameba.design/2/4/3/)[基本必須]
- [ ] BottomButton内に配置したボタンへのキーボード操作の順序が、見た目の順序と一致するように実装する
- [HTMLを正しく記述する](https://a11y-guidelines.ameba.design/4/1/1/)[基本必須]
- [ ] HTML仕様に準拠した実装をしている

## リンク集
Expand Down

0 comments on commit d0971e3

Please sign in to comment.