flutter/dev/a11y_assessments/lib/main.dart
Joy Serquiña 85b3d97673
fix(flutter/a11y assessments): h1 missing a11y from each page on the web app (#152198)
Adds Semantic Widget to wrap the contents of each page's AppBar title attribute and adds header: true and headingLevel: 1 as Semantic attributes so the content of the title is compiled as an h1 tag to meet accessibility guidelines that each page must have a h1 tag present. Also updates the test cases for the home page and each use case page to check for its respective h1.

[Before Screenshot - Accessibility Assessments Home Page](https://screenshot.googleplex.com/4i9LuiGwvLnEcZ8)
[Before Screenshot - Checkbox List Title -- note: each use case page is missing an h1](https://screenshot.googleplex.com/3qQjfqvAMTehRsm)
[After Screenshot - Accessibility Assessments Home Page](https://screenshot.googleplex.com/APSJJXBmwNBP35m)
[After Screenshot - Checkbox List Title-- note: change is similar across each Accessibility use case page](https://screenshot.googleplex.com/6EGgZnTusEgeN5L)

Fixes b/338035526
2024-08-13 22:22:28 +00:00

95 lines
2.6 KiB
Dart

// Copyright 2014 The Flutter Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'use_cases/use_cases.dart';
void main() {
runApp(const App());
if (kIsWeb) {
SemanticsBinding.instance.ensureSemantics();
}
}
class App extends StatelessWidget {
const App({super.key});
@override
Widget build(BuildContext context) {
final ThemeData lightTheme = ThemeData(
colorScheme: ColorScheme.fromSeed(
seedColor: const Color(0xff6750a4),
contrastLevel: MediaQuery.highContrastOf(context) ? 1.0 : 0.0,
));
final ThemeData darkTheme = ThemeData(
colorScheme: ColorScheme.fromSeed(
brightness: Brightness.dark,
seedColor: const Color(0xff6750a4),
contrastLevel: MediaQuery.highContrastOf(context) ? 1.0 : 0.0,
));
final Map<String, WidgetBuilder> routes =
Map<String, WidgetBuilder>.fromEntries(
useCases.map((UseCase useCase) =>
MapEntry<String, WidgetBuilder>(useCase.route, useCase.build)),
);
return MaterialApp(
title: 'Accessibility Assessments',
theme: lightTheme,
darkTheme: darkTheme,
routes: <String, WidgetBuilder>{'/': (_) => const HomePage(), ...routes},
);
}
}
class HomePage extends StatefulWidget {
const HomePage({super.key});
@override
State<HomePage> createState() => HomePageState();
}
class HomePageState extends State<HomePage> {
final ScrollController scrollController = ScrollController();
@override
void dispose() {
scrollController.dispose();
super.dispose();
}
Widget _buildUseCaseItem(int index, UseCase useCase) {
return Padding(
padding: const EdgeInsets.all(10),
child: Builder(builder: (BuildContext context) {
return TextButton(
key: Key(useCase.name),
onPressed: () => Navigator.of(context).pushNamed(useCase.route),
child: Text(useCase.name),
);
}));
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Semantics(headingLevel: 1, child: const Text('Accessibility Assessments')),
),
body: Center(
child: ListView(
controller: scrollController,
children: List<Widget>.generate(
useCases.length,
(int index) => _buildUseCaseItem(index, useCases[index]),
),
),
),
);
}
}