8000 Flutter web on iOS tightly wraps headers · Issue #166791 · flutter/flutter · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Flutter web on iOS tightly wraps headers #166791

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
Renzo-Olivares opened this issue Apr 8, 2025 · 2 comments
Open

Flutter web on iOS tightly wraps headers #166791

Renzo-Olivares opened this issue Apr 8, 2025 · 2 comments
Labels
a: accessibility Accessibility, e.g. VoiceOver or TalkBack. (aka a11y) P2 Important issues not at the top of the work list platform-ios iOS applications specifically platform-web Web applications specifically team-accessibility Owned by Framework Accessibility team (i.e. responsible for accessibility code in flutter/flutter) triaged-accessibility Triaged by Framework Accessibility team

Comments

@Renzo-Olivares
Copy link
Contributor
Renzo-Olivares commented Apr 8, 2025 •
edited
Loading

Steps to reproduce

  1. Use voiceover and swipe right to traverse to the next item.

Expected results

Accessibility focus ring wraps the entire element.

Actual results

Accessibility focus tightly wraps invisible label.

Code sample

Code sample 
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

/// Flutter code sample for [SliverEnsureSemantics].

void main() {
  runApp(const SliverEnsureSemanticsExampleApp());
  SemanticsBinding.instance.ensureSemantics();
}

class SliverEnsureSemanticsExampleApp extends StatelessWidget {
  const SliverEnsureSemanticsExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: const SliverEnsureSemanticsExample());
  }
}

class SliverEnsureSemanticsExample extends StatefulWidget {
  const SliverEnsureSemanticsExample({super.key});

  @override
  State<SliverEnsureSemanticsExample> createState() =>
      _SliverEnsureSemanticsExampleState();
}

class _SliverEnsureSemanticsExampleState
    extends State<SliverEnsureSemanticsExample> {
  @override
  Widget build(BuildContext context) {
    final ThemeData theme = Theme.of(context);
    return Scaffold(
      appBar: AppBar(
        backgroundColor: theme.colorScheme.inversePrimary,
        title: Text('SliverEnsureSemantics Demo'),
      ),
      body: Center(
        child: CustomScrollView(
          semanticChildCount: 1,
          slivers: <Widget>[
            SliverToBoxAdapter(
              child: IndexedSemantics(
                index: 0,
                child: Card(
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Semantics(
                          header: true,
                          child: Text('Steps to reproduce', style: theme.textTheme.headlineSmall),
                        ),
                        const Text('Issue description'),
                        Semantics(
                          header: true,
                          child: Text('Expected Results', style: theme.textTheme.headlineSmall),
                        ),
                        Semantics(
                          header: true,
                          child: Text('Actual Results', style: theme.textTheme.headlineSmall),
                        ),
                        Semantics(
                          header: true,
                          child: Text('Code Sample', style: theme.textTheme.headlineSmall),
                        ),
                        Semantics(
                          header: true,
                          child: Text('Screenshots', style: theme.textTheme.headlineSmall),
                        ),
                        Semantics(
                          header: true,
                          child: Text('Logs', style: theme.textTheme.headlineSmall),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Screenshots or Video

Screenshots / Video demonstration

Image
@Renzo-Olivares Renzo-Olivares changed the title iOS Safari tightly wraps headers iOS tightly wraps headers Apr 8, 2025
@Renzo-Olivares Renzo-Olivares added a: accessibility Accessibility, e.g. VoiceOver or TalkBack. (aka a11y) platform-web Web applications specifically platform-ios iOS applications specifically labels Apr 8, 2025
@loic-sharma loic-sharma added fyi-ios For the attention of iOS platform team team-accessibility Owned by Framework Accessibility team (i.e. responsible for accessibility code in flutter/flutter) labels Apr 8, 2025
@loic-sharma
Copy link
Member

@Renzo-Olivares Does this affect Flutter Web as well? If so, this might be an issue with the framework. I routed this to the accessibility team, but feel free to sent it back to the iOS team if needed!

@Renzo-Olivares
Copy link
Contributor Author
Renzo-Olivares commented Apr 8, 2025 •
edited
Loading

Oh sorry it only affects flutter web on iOS, i'm bad at labels.

@Renzo-Olivares Renzo-Olivares changed the title iOS tightly wraps headers Flutter web on iOS tightly wraps headers Apr 8, 2025
@Renzo-Olivares Renzo-Olivares added triaged-accessibility Triaged by Framework Accessibility team P2 Important issues not at the top of the work list labels Apr 10, 2025
@vashworth vashworth added the triaged-ios Triaged by iOS platform team label Apr 25, 2025
@flutter-triage-bot flutter-triage-bot bot removed fyi-ios For the attention of iOS platform team triaged-ios Triaged by iOS platform team labels Apr 25, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
a: accessibility Accessibility, e.g. VoiceOver or TalkBack. (aka a11y) P2 Important issues not at the top of the work list platform-ios iOS applications specifically platform-web Web applications specifically team-accessibility Owned by Framework Accessibility team (i.e. responsible for accessibility code in flutter/flutter) triaged-accessibility Triaged by Framework Accessibility team
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@loic-sharma @Renzo-Olivares @vashworth
0