[SwiftUI]Buttonにframeを付けるとアクセシビリティ的に良くない

Buttonにframeを付けるとアクセシビリティ的に良くない

以下の二つのボタンはいずれも32x32にframe指定したボタンです。

HStack {
    Button {
        
    } label: {
        Text("Button")
            .frame(width: 32, height: 32)
    }
    
    Button {
        
    } label: {
        Text("Button")
    }
    .frame(width: 32, height: 32)
}

左のボタンはlabelに対して、右のボタンはButtonに対してframeを指定しています。
このボタンに対して、Button Shapeアクセシビリティをオンにします。

すると、左のボタンがタップ範囲を広げてボタンの形を表示するのに対して、右のボタンは32x32のままボタンの形が表示され、元のボタンよりもlabel部分が小さく表示されています。

良くないコード例

labelにframeを与える必要があるということは、次のような〇〇ボタンのようなViewは外からlabelにframeを与えられない良くないコードの一例と言えるでしょう。

struct ImageButton {
  let systemName: String
  
  var body: some View {
    Button() {
      Image(systemName: systemName).resizable()
    }
  }
}

ボタンを作るときは、その場でボタンを作り見た目はButtonStyleを使って整えることが基本になることを覚えておくと良いでしょう。