Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

編集面ユーザビリティ向上 #32

Open
7 tasks
kobapi28 opened this issue Dec 16, 2022 · 2 comments
Open
7 tasks

編集面ユーザビリティ向上 #32

kobapi28 opened this issue Dec 16, 2022 · 2 comments
Assignees
Labels
task:frontend frontend task

Comments

@kobapi28
Copy link
Contributor

kobapi28 commented Dec 16, 2022

雑にやることを定義する

  • buttonはactiveをcssで定義してあげて押したことを見えるようにする
  • input要素に関してはバリデーションを見える形に
  • input要素にlabelをつける
  • 画面遷移時のローディングアニメーション
  • 成功時のtoast等の表示

検討するもの

  • inputタグを選択した時の画面自動ズーム(iOS only?)
    • 検討するとしている理由としてはアクセシビリティ的にこれが良くないのであれば避けたい

時間があればやるもの

  • axe Devtool でa11y check してひっかかったものを片っ端から修正する。HTMLのセマンティクス的なところでひっかかるものがかなりありそうな予感
@kobapi28 kobapi28 added the task:frontend frontend task label Dec 16, 2022
@kobapi28 kobapi28 self-assigned this Dec 16, 2022
@kobapi28
Copy link
Contributor Author

activeの状態を表現するのにカラーちょっといじるかも。
デフォルトで使うのを800番台にして、900番台はactiveなときに使う。

800番台のカラーはコントラスト確保できるように調節する

@kobapi28
Copy link
Contributor Author

  • ボタンのactive状態は、$yellow900-reactionを定義したのでそれをつける形で:ok:
  • disabled状態は$gray400

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
task:frontend frontend task
Projects
None yet
Development

No branches or pull requests

1 participant