You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@beam.apache.org by pa...@apache.org on 2022/03/10 19:04:22 UTC
[beam] branch master updated: [BEAM-14079] playground - improve accessibility
This is an automated email from the ASF dual-hosted git repository.
pabloem pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/beam.git
The following commit(s) were added to refs/heads/master by this push:
new f16ef4f [BEAM-14079] playground - improve accessibility
new 0d007a7 Merge pull request #17065 from [BEAM-14079] [playground] Improve accessibility
f16ef4f is described below
commit f16ef4f05c573379527e5e1523879d4a1965f801
Author: Aydar Farrakhov <st...@gmail.com>
AuthorDate: Thu Mar 10 15:28:24 2022 +0300
[BEAM-14079] playground - improve accessibility
---
playground/frontend/lib/l10n/app_en.arb | 16 +++++
.../description_popover_button.dart | 34 +++++----
.../multifile_popover_button.dart | 30 ++++----
.../lib/modules/sdk/components/sdk_selector.dart | 1 +
.../shortcuts/components/shortcut_tooltip.dart | 1 +
.../components/editor_textarea_wrapper.dart | 83 ++++++++++++----------
.../feedback/feedback_dropdown_icon_button.dart | 24 ++++---
.../components/feedback/playground_feedback.dart | 3 +
.../lib/pages/playground/playground_page.dart | 11 +--
9 files changed, 127 insertions(+), 76 deletions(-)
diff --git a/playground/frontend/lib/l10n/app_en.arb b/playground/frontend/lib/l10n/app_en.arb
index 2b2b470..6a35a88 100644
--- a/playground/frontend/lib/l10n/app_en.arb
+++ b/playground/frontend/lib/l10n/app_en.arb
@@ -63,6 +63,14 @@
"@aboutApacheBeam": {
"description": "Title for the About Apache Beam menu item"
},
+ "enjoying": "Good Experience",
+ "@enjoying": {
+ "description": "Thumb up enjoying playground label"
+ },
+ "notEnjoying": "Bad Experience",
+ "@enjoying": {
+ "description": "Thumb down enjoying playground label"
+ },
"sendFeedback": "Send feedback",
"@sendFeedback": {
"description": "Title of the send feedback button"
@@ -195,6 +203,14 @@
"@addExample": {
"description": "Add example link text"
},
+ "exampleDescription": "Example Description",
+ "@exampleDescription": {
+ "description": "Description icon label"
+ },
+ "exampleMultifile": "Multifile example info",
+ "@exampleDescription": {
+ "exampleMultifile": "Multifile icon label"
+ },
"multifile": "Multifile",
"@multifile": {
"description": "Multifile example"
diff --git a/playground/frontend/lib/modules/examples/components/description_popover/description_popover_button.dart b/playground/frontend/lib/modules/examples/components/description_popover/description_popover_button.dart
index d2e60a9..5e935eb 100644
--- a/playground/frontend/lib/modules/examples/components/description_popover/description_popover_button.dart
+++ b/playground/frontend/lib/modules/examples/components/description_popover/description_popover_button.dart
@@ -18,6 +18,7 @@
import 'package:aligned_dialog/aligned_dialog.dart';
import 'package:flutter/material.dart';
+import 'package:flutter_gen/gen_l10n/app_localizations.dart';
import 'package:playground/config/theme.dart';
import 'package:playground/constants/sizes.dart';
import 'package:playground/modules/examples/components/description_popover/description_popover.dart';
@@ -43,21 +44,26 @@ class DescriptionPopoverButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
- return IconButton(
- iconSize: kIconSizeMd,
- splashRadius: kIconButtonSplashRadius,
- icon: Icon(
- Icons.info_outline_rounded,
- color: ThemeColors.of(context).grey1Color,
+ AppLocalizations appLocale = AppLocalizations.of(context)!;
+ return Semantics(
+ container: true,
+ child: IconButton(
+ iconSize: kIconSizeMd,
+ splashRadius: kIconButtonSplashRadius,
+ icon: Icon(
+ Icons.info_outline_rounded,
+ color: ThemeColors.of(context).grey1Color,
+ ),
+ tooltip: appLocale.exampleDescription,
+ onPressed: () {
+ _showDescriptionPopover(
+ parentContext ?? context,
+ example,
+ followerAnchor,
+ targetAnchor,
+ );
+ },
),
- onPressed: () {
- _showDescriptionPopover(
- parentContext ?? context,
- example,
- followerAnchor,
- targetAnchor,
- );
- },
);
}
diff --git a/playground/frontend/lib/modules/examples/components/multifile_popover/multifile_popover_button.dart b/playground/frontend/lib/modules/examples/components/multifile_popover/multifile_popover_button.dart
index 149194d..069830c 100644
--- a/playground/frontend/lib/modules/examples/components/multifile_popover/multifile_popover_button.dart
+++ b/playground/frontend/lib/modules/examples/components/multifile_popover/multifile_popover_button.dart
@@ -19,6 +19,7 @@
import 'package:aligned_dialog/aligned_dialog.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
+import 'package:flutter_gen/gen_l10n/app_localizations.dart';
import 'package:playground/constants/assets.dart';
import 'package:playground/constants/sizes.dart';
import 'package:playground/modules/examples/components/multifile_popover/multifile_popover.dart';
@@ -44,18 +45,23 @@ class MultifilePopoverButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
- return IconButton(
- iconSize: kIconSizeMd,
- splashRadius: kIconButtonSplashRadius,
- icon: SvgPicture.asset(kMultifileIconAsset),
- onPressed: () {
- _showMultifilePopover(
- parentContext ?? context,
- example,
- followerAnchor,
- targetAnchor,
- );
- },
+ AppLocalizations appLocale = AppLocalizations.of(context)!;
+ return Semantics(
+ container: true,
+ child: IconButton(
+ iconSize: kIconSizeMd,
+ splashRadius: kIconButtonSplashRadius,
+ icon: SvgPicture.asset(kMultifileIconAsset),
+ tooltip: appLocale.exampleMultifile,
+ onPressed: () {
+ _showMultifilePopover(
+ parentContext ?? context,
+ example,
+ followerAnchor,
+ targetAnchor,
+ );
+ },
+ ),
);
}
diff --git a/playground/frontend/lib/modules/sdk/components/sdk_selector.dart b/playground/frontend/lib/modules/sdk/components/sdk_selector.dart
index c19f718d..45cacfc 100644
--- a/playground/frontend/lib/modules/sdk/components/sdk_selector.dart
+++ b/playground/frontend/lib/modules/sdk/components/sdk_selector.dart
@@ -50,6 +50,7 @@ class SDKSelector extends StatelessWidget {
Widget build(BuildContext context) {
return Semantics(
container: true,
+ button: true,
label: AppLocalizations.of(context)!.selectSdkDropdown,
child: AppDropdownButton(
buttonText: Text(
diff --git a/playground/frontend/lib/modules/shortcuts/components/shortcut_tooltip.dart b/playground/frontend/lib/modules/shortcuts/components/shortcut_tooltip.dart
index 5ce5c6d..94f1467 100644
--- a/playground/frontend/lib/modules/shortcuts/components/shortcut_tooltip.dart
+++ b/playground/frontend/lib/modules/shortcuts/components/shortcut_tooltip.dart
@@ -33,6 +33,7 @@ class ShortcutTooltip extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Tooltip(
+ excludeFromSemantics: true,
message: getShortcutDisplayName(shortcut),
child: child,
);
diff --git a/playground/frontend/lib/pages/playground/components/editor_textarea_wrapper.dart b/playground/frontend/lib/pages/playground/components/editor_textarea_wrapper.dart
index 4f88f3d..d01c87b 100644
--- a/playground/frontend/lib/pages/playground/components/editor_textarea_wrapper.dart
+++ b/playground/frontend/lib/pages/playground/components/editor_textarea_wrapper.dart
@@ -69,49 +69,58 @@ class CodeTextAreaWrapper extends StatelessWidget {
children: [
if (state.selectedExample != null) ...[
if (state.selectedExample?.isMultiFile ?? false)
- MultifilePopoverButton(
+ Semantics(
+ container: true,
+ child: MultifilePopoverButton(
+ example: state.selectedExample!,
+ followerAnchor: Alignment.topRight,
+ targetAnchor: Alignment.bottomRight,
+ ),
+ ),
+ Semantics(
+ container: true,
+ child: DescriptionPopoverButton(
example: state.selectedExample!,
followerAnchor: Alignment.topRight,
targetAnchor: Alignment.bottomRight,
),
- DescriptionPopoverButton(
- example: state.selectedExample!,
- followerAnchor: Alignment.topRight,
- targetAnchor: Alignment.bottomRight,
),
],
- RunButton(
- disabled: state.selectedExample?.isMultiFile ?? false,
- isRunning: state.isCodeRunning,
- cancelRun: () {
- state.cancelRun().catchError(
- (_) => NotificationManager.showError(
- context,
- AppLocalizations.of(context)!.runCode,
- AppLocalizations.of(context)!.cancelExecution,
- ),
- );
- },
- runCode: () {
- AnalyticsService analyticsService =
- AnalyticsService.get(context);
- final stopwatch = Stopwatch()..start();
- final exampleName = getAnalyticsExampleName(
- state.selectedExample,
- state.isExampleChanged,
- state.sdk,
- );
- state.runCode(
- onFinish: () {
- analyticsService.trackRunTimeEvent(
- exampleName,
- stopwatch.elapsedMilliseconds,
- );
- },
- );
- AnalyticsService.get(context)
- .trackClickRunEvent(exampleName);
- },
+ Semantics(
+ container: true,
+ child: RunButton(
+ disabled: state.selectedExample?.isMultiFile ?? false,
+ isRunning: state.isCodeRunning,
+ cancelRun: () {
+ state.cancelRun().catchError(
+ (_) => NotificationManager.showError(
+ context,
+ AppLocalizations.of(context)!.runCode,
+ AppLocalizations.of(context)!.cancelExecution,
+ ),
+ );
+ },
+ runCode: () {
+ AnalyticsService analyticsService =
+ AnalyticsService.get(context);
+ final stopwatch = Stopwatch()..start();
+ final exampleName = getAnalyticsExampleName(
+ state.selectedExample,
+ state.isExampleChanged,
+ state.sdk,
+ );
+ state.runCode(
+ onFinish: () {
+ analyticsService.trackRunTimeEvent(
+ exampleName,
+ stopwatch.elapsedMilliseconds,
+ );
+ },
+ );
+ AnalyticsService.get(context)
+ .trackClickRunEvent(exampleName);
+ },
+ ),
),
],
),
diff --git a/playground/frontend/lib/pages/playground/components/feedback/feedback_dropdown_icon_button.dart b/playground/frontend/lib/pages/playground/components/feedback/feedback_dropdown_icon_button.dart
index 19dd160..b99a8df 100644
--- a/playground/frontend/lib/pages/playground/components/feedback/feedback_dropdown_icon_button.dart
+++ b/playground/frontend/lib/pages/playground/components/feedback/feedback_dropdown_icon_button.dart
@@ -29,6 +29,7 @@ const double kFeedbackDxLeftAlignment = 10.0;
const double kFeedbackDropdownWidth = 400.0;
class FeedbackDropdownIconButton extends StatefulWidget {
+ final String label;
final String iconAsset;
final String filledIconAsset;
final bool isSelected;
@@ -36,6 +37,7 @@ class FeedbackDropdownIconButton extends StatefulWidget {
const FeedbackDropdownIconButton({
Key? key,
+ required this.label,
required this.iconAsset,
required this.filledIconAsset,
required this.isSelected,
@@ -77,15 +79,19 @@ class _FeedbackDropdownIconButton extends State<FeedbackDropdownIconButton>
@override
Widget build(BuildContext context) {
- return IconButton(
- key: feedbackKey,
- padding: EdgeInsets.zero,
- onPressed: () {
- _changeSelectorVisibility();
- widget.onClick();
- },
- icon: SvgPicture.asset(
- widget.isSelected ? widget.filledIconAsset : widget.iconAsset,
+ return Semantics(
+ container: true,
+ child: IconButton(
+ key: feedbackKey,
+ padding: EdgeInsets.zero,
+ onPressed: () {
+ _changeSelectorVisibility();
+ widget.onClick();
+ },
+ tooltip: widget.label,
+ icon: SvgPicture.asset(
+ widget.isSelected ? widget.filledIconAsset : widget.iconAsset,
+ ),
),
);
}
diff --git a/playground/frontend/lib/pages/playground/components/feedback/playground_feedback.dart b/playground/frontend/lib/pages/playground/components/feedback/playground_feedback.dart
index 509e738..65afdc6 100644
--- a/playground/frontend/lib/pages/playground/components/feedback/playground_feedback.dart
+++ b/playground/frontend/lib/pages/playground/components/feedback/playground_feedback.dart
@@ -30,6 +30,7 @@ class PlaygroundFeedback extends StatelessWidget {
@override
Widget build(BuildContext context) {
+ AppLocalizations appLocale = AppLocalizations.of(context)!;
final isEnjoying = _getFeedbackState(context, true).isEnjoying;
return Row(
mainAxisSize: MainAxisSize.min,
@@ -39,12 +40,14 @@ class PlaygroundFeedback extends StatelessWidget {
style: const TextStyle(fontWeight: kBoldWeight),
),
FeedbackDropdownIconButton(
+ label: appLocale.enjoying,
iconAsset: kThumbUpIconAsset,
filledIconAsset: kThumbUpIconAssetFilled,
onClick: _setEnjoying(context, true),
isSelected: isEnjoying != null && isEnjoying,
),
FeedbackDropdownIconButton(
+ label: appLocale.notEnjoying,
iconAsset: kThumbDownIconAsset,
filledIconAsset: kThumbDownIconAssetFilled,
onClick: _setEnjoying(context, false),
diff --git a/playground/frontend/lib/pages/playground/playground_page.dart b/playground/frontend/lib/pages/playground/playground_page.dart
index 8af0437..75725c2 100644
--- a/playground/frontend/lib/pages/playground/playground_page.dart
+++ b/playground/frontend/lib/pages/playground/playground_page.dart
@@ -86,13 +86,16 @@ class PlaygroundPage extends StatelessWidget {
actions: const [ToggleThemeButton(), MoreActions()],
),
body: Column(
- children: const [
- Expanded(child: PlaygroundPageBody()),
- PlaygroundPageFooter(),
+ children: [
+ const Expanded(child: PlaygroundPageBody()),
+ Semantics(
+ container: true,
+ child: const PlaygroundPageFooter(),
+ ),
],
),
),
- )
+ ),
);
}
}