UPGRADE YOUR SKILLS: Learn advanced Swift and SwiftUI on Hacking with Swift+! >>

Day 53: Bookworm Delete Book Button (Use Label? or Image?)

Forums > 100 Days of SwiftUI

In the video Using an alert to pop a Navigation Link programmatically Paul crafts a delete button in a toolbar like this:

.toolbar {
    Button { showingDeleteAlert = true } 
    label: { Label("Delete this book?", systemImage: "trash") }
}

However, on the iPhone you will only see the rubbish bin icon. Where did the label go? You may wonder why you would use a Label view rather than just a simple Image(systemImage:) view?

The main reason you want to do this is for accessibility!

The Label view combines both image and title into a single accessibility element. SwiftUI uses the title as an accessibility label for the whole view.

For your customers who use VoiceOver to navigate your application, the words "Image Trash" doesn't hold much value. By using a label, VoiceOver instead will read out "Delete this book?" with appropriate voice inflection. Trés cool!

The documentation also states:

Some containers might apply a different default label style, such as only showing icons within toolbars on macOS and iOS. To opt in to showing both the title and the icon, you can apply the titleAndIcon label style

//=============== titleAndIcon example
.toolbar {
    Button { showingDeleteAlert = true } 
    label: { Label("Delete this book?", systemImage: "trash")
      .labelStyle(.titleAndIcon)  // this forces both title and icon
    }
}

This is very crowded on an iPhone. 10/10 Don't recommend. Maybe it looks better in a MacOS application?

2      

Hacking with Swift is sponsored by RevenueCat

SPONSORED Take the pain out of configuring and testing your paywalls. RevenueCat's Paywalls allow you to remotely configure your entire paywall view without any code changes or app updates.

Learn more here

Sponsor Hacking with Swift and reach the world's largest Swift community!

Archived topic

This topic has been closed due to inactivity, so you can't reply. Please create a new topic if you need to.

All interactions here are governed by our code of conduct.

 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.