Last active
May 31, 2023 10:21
-
-
Save runys/9e6473f80b14ac460e9d4116627c3d7f to your computer and use it in GitHub Desktop.
Example used in the article Preparing your App for Voice Over: Labels, Values and Hints on Create with Swift (https://www.createwithswift.com/)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
struct Product { | |
let name: String | |
let type: String | |
let description: String | |
let imageName: String | |
} | |
struct ProductPageView: View { | |
@State var selectedSize: Int = 8 | |
@State var quantity: Double = 1 | |
let product: Product = Product(name: "The White Sneaker", | |
type: "Casual Sneakers", | |
description: "A classic sneaker. You really can't go wrong with it. Matches every style and every outfit, you would be crazy to buy just one.", | |
imageName: "white-sneaker") | |
var body: some View { | |
VStack(alignment: .leading, spacing: 12) { | |
Image(product.imageName) | |
.resizable() | |
.scaledToFit() | |
.cornerRadius(10) | |
VStack(alignment: .leading) { | |
Text(product.name) | |
.font(.title) | |
.fontWeight(.bold) | |
Text(product.type) | |
.font(.subheadline) | |
.foregroundColor(.secondary) | |
} | |
Text("Select Size") | |
.font(.headline) | |
Picker(selection: $selectedSize, label: Text("Select Size")) { | |
Text("8").tag(8) | |
Text("9").tag(9) | |
Text("10").tag(10) | |
Text("11").tag(11) | |
Text("12").tag(12) | |
} | |
.pickerStyle(.segmented) | |
Text("Description") | |
.font(.headline) | |
Text(product.description) | |
.foregroundColor(.secondary) | |
Spacer() | |
HStack { | |
Text("Quantity") | |
.font(.headline) | |
Spacer() | |
Text(String(format: "%.0f", quantity)) | |
.font(.headline) | |
} | |
Slider(value: $quantity, in: 1...10, step: 1.0) | |
Button { | |
self.addToCart() | |
} label: { | |
Text("Add to Cart") | |
.padding() | |
.frame(maxWidth: .infinity) | |
.background(Color.orange) | |
.foregroundColor(.white) | |
.cornerRadius(10) | |
} | |
} | |
.padding() | |
} | |
private func addToCart() { } | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
struct ProductPageView: View { | |
@State var selectedSize: Int = 8 | |
@State var quantity: Double = 1 | |
let product: Product = Product(name: "The White Sneaker", | |
type: "Casual Sneakers", | |
description: "A classic sneaker. You really can't go wrong with it. Matches every style and every outfit, you would be crazy to buy just one.", | |
imageName: "white-sneaker") | |
var body: some View { | |
VStack(alignment: .leading, spacing: 12) { | |
Image(product.imageName) | |
.resizable() | |
.scaledToFit() | |
.cornerRadius(10) | |
.accessibilityLabel("White sneaker made of leather with black details on the heel") | |
VStack(alignment: .leading) { | |
Text(product.name) | |
.font(.title) | |
.fontWeight(.bold) | |
Text(product.type) | |
.font(.subheadline) | |
.foregroundColor(.secondary) | |
} | |
Text("Select Size") | |
.font(.headline) | |
Picker(selection: $selectedSize, label: Text("Select Size")) { | |
Text("8").tag(8) | |
Text("9").tag(9) | |
Text("10").tag(10) | |
Text("11").tag(11) | |
Text("12").tag(12) | |
} | |
.pickerStyle(.segmented) | |
.accessibilityValue("The chosen size is \(self.selectedSize)") | |
Text("Description") | |
.font(.headline) | |
Text(product.description) | |
.foregroundColor(.secondary) | |
Spacer() | |
HStack { | |
Text("Quantity") | |
.font(.headline) | |
Spacer() | |
Text(String(format: "%.0f", quantity)) | |
.font(.headline) | |
} | |
Slider(value: $quantity, in: 1...10, step: 1.0) | |
.accessibilityValue(String(format: "Quantity selected: %.0f", quantity)) | |
Button { | |
self.addToCart() | |
} label: { | |
Text("Add to Cart") | |
.padding() | |
.frame(maxWidth: .infinity) | |
.background(Color.orange) | |
.foregroundColor(.white) | |
.cornerRadius(10) | |
} | |
.accessibilityHint("Adds the \(product.name) in the cart.") | |
} | |
.padding() | |
} | |
private func addToCart() { } | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment