Issue number: resolves #28769

What is the current behavior?

As part of #28146, we allowed text wrapping inside of ion-item for accessibility purposes. One of the behaviors we added was to allow start, default, and end slotted containers to wrap to the next line to align with the iOS spec. However, this decision was based on an incorrect assumption.

The following screenshot shows the Settings app on iOS:

default scale	310% scale

At the default scale, the blue icon is in the iOS equivalent of the "start" slot, "Bluetooth" is in the default slot, and "On" is in the "end" slot. We incorrectly assumed the same markup was true when scaling the text up. However, at 310% scale the icon, "Bluetooth" text, and "On" text all become part of the default slot in a single container that wraps. You can tell because the bottom border runs underneath the blue icon at 310% whereas it does not at the default scale. This allows the text to wrap underneath the blue icon. When we originally implemented #28146 we thought that this meant the start, default, and end slot containers should wrap to the next line.

I further validated this behavior by creating an app with Swift UI. I created a list of items where each item has the native equivalent of a checkbox in the start slot and multiple ion-labels in the default slot of the item:

Default Scale	310% Scale

The content within each label wraps within the container, but the containers themselves never wrap to the next line.

Demo code:

import SwiftUI
struct ContentView: View {
    struct Item: Identifiable, Hashable {
        let id = UUID()
    }
    private var items = [
        Item(),
        Item(),
        Item(),
        Item(),
        Item()
    ]
    @State private var multiSelection = Set<UUID>()
    var body: some View {
        NavigationView {
            List(items, selection: $multiSelection) {_ in
                HStack {
                    Text("Column 1 with really long text")
                    Text("Column 2 with really long text")
                    Text("Column 3 with really long text")
                    Text("Column 4 with really long text")
                }
            }
            .toolbar { EditButton() }
        }
        Text("\(multiSelection.count) selections")
    }
}
#Preview {
    ContentView()
}

What is the new behavior?

• This PR removes the ability for the start, default, and end slot containers to wrap to the next line. This behavior aligns with pre-v7.6.0 behaviors. The containers inside of the default slot will not wrap to the next line. However, content within each container (such as text within an ion-label) will continue to wrap to meet the team's accessibility requirements.

Does this introduce a breaking change?

• Yes
• No

Other information

Dev build: 7.6.5-dev.11704916749.1e64a3a7