Ionic7では、ion-inputなどの入力要素のマークアップがとてもシンプルになる話。

Ionic7から、ion-inputなどの入力要素のマークアップがとてもシンプルになる予定です。該当するdiscussionはこちら。

現在のマークアップ方法は以下の通りです。

<ion-item>
  <ion-label>氏名</ion-label>
  <ion-input></ion-input>
  <span slot="error">氏名を入力ください</span>
</ion-item>

<ion-item fill="solid" counter="true">
  <ion-label>コメント</ion-label>
  <ion-textarea maxlength="500"></ion-textarea>
</ion-item>

<ion-item fill="outline">
  <ion-label>配色</ion-label>
  <ion-select>
    <ion-select-option value="red">赤</ion-select-option>
    <ion-select-option value="blue">青</ion-select-option>
    <ion-select-option value="green">緑</ion-select-option>
  </ion-select>
  <span slot="helper">あなたの好きな配色を選択ください</span>
</ion-item>

ただ、このマークアップはいくつかの問題を持っていました。

1. area-labelを設定すると、shadow root内のhostとinputの両方につくため、スクリーンリーダーは2度読み上げる
2. axe DevToolsはネストされたフォームインタラクティブとしてエラーを表示する
3. 入力コンポーネントが ion-item に密接に設計されたことで予期せぬ動作を熾すことがある（ion-itemとion-label[position=stacked]の組み合わせの時、ion-chipが追加されると不具合が起きるなど）

まぁそもそもForm内のアイテムとして書き方が冗長になっていて、正しく表示させるためには ion-item と ion-label の両方が必要とかちょっとつらいよねとか、すべてのion-itemに入力要素があるわけではないので最適化に向かないよねとか、そういう設計上の問題もありました。

そこで、以下のような書き方に変わる予定です。

<ion-input label="氏名" error="氏名を入力ください"></ion-input>

<ion-textarea fill="solid" counter="true" maxlength="500" label="コメント"></ion-textarea>

<ion-select label="配色" helper="あなたの好きな配色を選択ください">
  <ion-select-option value="red">赤</ion-select-option>
  <ion-select-option value="blue">青</ion-select-option>
  <ion-select-option value="green">緑</ion-select-option>
</ion-select>

入力要素を配置する時に、 ion-item と ion-label はもう必要ありません。これらは入力要素の属性に移行します。

ちなみに、上記以外に、 ion-checkbox 、 ion-radio 、 ion-range 、 ion-toggle も新しい書き方がでてきますので要チェックです。

よりシンプルに書けるようになると開発がはかどりますね。期待！

それではまた。