Buttons on tvOS with text are blurred

When adding buttons to a sheet, on tvOS the text is blurred in the buttons, making it illegible. Feedback: FB21228496

(used GPT to extract an example from my project for a test project to attach here)

//  ButtonBlurTestView.swift
//  Icarus
//
//  Test view to reproduce blurred button issue on tvOS
//

import SwiftUI

struct ButtonBlurTestView: View {
    @State private var showSheet = false
    @State private var selectedTags: [Int] = []
    @State private var newTagName: String = ""
    
    // Hardcoded test data
    private let testTags = [
        TestTag(id: 1, label: "Action"),
        TestTag(id: 2, label: "Comedy"),
        TestTag(id: 3, label: "Drama"),
        TestTag(id: 4, label: "Sci-Fi"),
        TestTag(id: 5, label: "Thriller")
    ]
    
    var body: some View {
        NavigationStack {
            VStack {
                Text("Button Blur Test")
                    .font(.title)
                    .padding()
                
                Button("Show Test Sheet") {
                    showSheet = true
                }
                .buttonStyle(.borderedProminent)
                .padding()
                
                Text("Tap the button above to open a sheet with buttons inside a Form.")
                    .font(.caption)
                    .foregroundColor(.secondary)
                    .multilineTextAlignment(.center)
                    .padding()
            }
            .navigationTitle("Blur Test")
            .sheet(isPresented: $showSheet) {
                TestSheetView(
                    selectedTags: $selectedTags,
                    newTagName: $newTagName,
                    testTags: testTags
                )
            }
        }
    }
}

struct TestSheetView: View {
    @Environment(\.dismiss) private var dismiss
    @Binding var selectedTags: [Int]
    @Binding var newTagName: String
    let testTags: [TestTag]
    
    var body: some View {
        NavigationStack {
            VStack {
                // Header
                VStack {
                    Text("Testing")
                        .font(.title2)
                        .bold()
                    Text("Test TV Show")
                        .font(.subheadline)
                        .foregroundColor(.secondary)
                }
                .padding()
                
                // Form with buttons
                Form {
                    Section(header: Text("Summary")) {
                        Text("This is a test")
                            .font(.subheadline)
                            .foregroundColor(.secondary)
                    }
                    
                    Section(header: Text("Tags")) {
                        tagsSelectionView
                    }
                }
            }
            .navigationTitle("Add")
#if !os(tvOS)
            .navigationBarTitleDisplayMode(.inline)
#endif
            .toolbar {
                ToolbarItem(placement: .cancellationAction) {
                    Button("Cancel") { dismiss() }
                }
                ToolbarItem(placement: .confirmationAction) {
                    Button("Add") { dismiss() }
                }
            }
        }
    }
    
    private var tagsSelectionView: some View {
        VStack(alignment: .leading) {
            // Tag pills in a grid
            let columns = [GridItem(.adaptive(minimum: 80), spacing: 8)]
            LazyVGrid(columns: columns, alignment: .leading, spacing: 8) {
                ForEach(testTags, id: \.id) { tag in
                    TagPill(
                        tag: tag,
                        selected: selectedTags.contains(tag.id)
                    ) {
                        if selectedTags.contains(tag.id) {
                            selectedTags.removeAll { $0 == tag.id }
                        } else {
                            selectedTags.append(tag.id)
                        }
                    }
                }
            }
            
            Divider()
            
            // Add new tag button
            HStack {
                TextField("New tag name", text: $newTagName)
#if os(tvOS)
                    .textFieldStyle(PlainTextFieldStyle())
#else
                    .textFieldStyle(RoundedBorderTextFieldStyle())
#endif
                Button("Add") {
                    // Test action
                    newTagName = ""
                }
                .disabled(newTagName.trimmingCharacters(in: .whitespaces).isEmpty)
            }
        }
    }
}

// Tag Pill - matches the structure from original project
private struct TagPill: View {
    let tag: TestTag
    let selected: Bool
    let action: () -> Void
    
    var body: some View {
        Button(action: action) {
            Text(tag.label)
                .font(.callout)
                .lineLimit(1)
                .padding(.horizontal, 12)
                .padding(.vertical, 8)
                .background(
                    Capsule()
                        .fill(selected ? Color.accentColor : Color.secondary.opacity(0.15))
                )
                .overlay(
                    Capsule()
                        .stroke(selected ? Color.accentColor : Color.secondary.opacity(0.35), lineWidth: 1)
                )
                .foregroundStyle(selected ? Color.white : Color.primary)
                .contentShape(Capsule())
        }
        .buttonStyle(.plain)
#if os(tvOS)
        .focusable(true)
#endif
    }
}

struct TestTag {
    let id: Int
    let label: String
}

#Preview {
    ButtonBlurTestView()
}

Buttons on tvOS with text are blurred
 
 
Q