Styleguide

ID

Category

Namespace

All Colors

sw-Dialog

/src/assets/css/namespace/sitewide/_Dialog.scss

A11yに対応したダイアログ（モーダル）です。 複数のダイアログを使う場合はdata-a11y-dialog-show="sw-Dialog1"とid="sw-Dialog1"の値をsw-Dialog2やsw-Dialog3のように連番で指定してください。 最大で10個まで対応しています。 メインコンテンツに#mainを指定、ダイアログはそのID要素と兄弟関係になるようにしてください。 幅と高さはブレイクポイントごとに固定されています。


ダイアログ1のタイトル

ダイアログ1の概要

aria-labelledbyとaria-describedbyで、タイアログのタイトルと概要を紐づけています。

ダイアログ2のタイトル

ダイアログ2の概要

とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。

 
.l-Wrapper#main
  button.sw-Dialog_Link(data-a11y-dialog-show="sw-Dialog1") ダイアログ1を開く
  br
  button.sw-Dialog_Link(data-a11y-dialog-show="sw-Dialog2") ダイアログ2を開く

.sw-Dialog_Dialog#sw-Dialog1
  .sw-Dialog_Overlay(tabindex="-1" data-a11y-dialog-hide)
  dialog.sw-Dialog_Content(aria-labelledby="dialog-title1" aria-describedby1="dialogDescription")
    .sw-Dialog_Inner
      .sw-Dialog_Head
        button.sw-Dialog_Close(type="button" data-a11y-dialog-hide aria-label="この画面を閉じる")
          svg.sw-Dialog_CloseIcon(role="img")
            use(xlink:href="/assets/svg/sprite.svg#close1")
      .sw-Dialog_Body
        h3#dialog-title1 ダイアログ1のタイトル
        p#dialogDescription1 ダイアログ1の概要
        p `aria-labelledby`と`aria-describedby`で、タイアログのタイトルと概要を紐づけています。

.sw-Dialog_Dialog#sw-Dialog2
  .sw-Dialog_Overlay(tabindex="-1" data-a11y-dialog-hide)
  dialog.sw-Dialog_Content(aria-labelledby="dialog-title2" aria-describedby="dialogDescription2")
    .sw-Dialog_Inner
      .sw-Dialog_Head
        button.sw-Dialog_Close(type="button" data-a11y-dialog-hide aria-label="この画面を閉じる")
          svg.sw-Dialog_CloseIcon(role="img")
            use(xlink:href="/assets/svg/sprite.svg#close1")
      .sw-Dialog_Body
        h3#dialog-title2 ダイアログ2のタイトル
        p#dialogDescription2 ダイアログ2の概要
        p とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。