モーダルと戦う

アクセシビリティとメンテナビリティの両立

CodeGrid 5周年記念パーティー 2017/05/12

適当に作ると
アクセシビリティ最悪に

• スクロール
• 複数のモーダル管理
  （したくない）
• 表示順の問題
  body 直下に置かないと……

メンテナビリティも下がりがち

モーダルを一つの場所に集めて ID で呼び出すのもつらい

フレームワークのデータバインディングもうまくいかなくてつらい

モーダルと戦う者は、
その過程で自分自身もモーダルになることのないように
気をつけなくてはならない。

モーダルをのぞく時、
モーダルもまたこちらをのぞいているのだ。

両立させるための方針

One-Portal : Multi-Contents

• シングルトン
• fixed で配置 & overflow: auto でスクロール可能に
• html or body に overflow: hidden して
  コンテンツのスクロールを止める
• 中身は Content から挿入される

Portal

• 一意な name をつける
• どの場所で定義しても Portal へと送られる
• Portal で一元管理してるのでつらくない

Content

世の中のライブラリは？

• Modaal
  • いろいろ考慮されていてとても良い
  • jQuery なのがつらい……
• Bootstrap Modal
  • body の消えるスクロールバーを考慮して
    padding-right つける徹底ぶり
  • jQuery (ry
• react-modal
  • One-Portal : Multi-Contents っぽい
• vue-thin-modal
  • Vue には良いのがなさそうだったので作りました

まとめ

• アクセシビリティとメンテナビリティを両立して
  モーダル作るのは意外に難しい
• One-Portal : Multi-Contents で作るとつらさがなかった
• Bootstrap Modal から感じる闇