Skip to content

Commit

Permalink
Improve accessibility on the homepage (#5412)
Browse files Browse the repository at this point in the history
  • Loading branch information
@g123k
g123k committed Jun 19, 2024
1 parent 39b65d2 commit 93d460c
Show file tree
Hide file tree
Showing 7 changed files with 165 additions and 126 deletions.
36 changes: 20 additions & 16 deletions packages/scanner/shared/lib/src/scanner_visor.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -160,23 +160,27 @@ class VisorButton extends StatelessWidget {

@override
Widget build(BuildContext context) {
return Material(
type: MaterialType.transparency,
child: InkWell(
onTap: onTap,
borderRadius: const BorderRadius.all(
Radius.circular(
SmoothBarcodeScannerVisor.CORNER_PADDING,
return Semantics(
label: tooltip,
excludeSemantics: true,
child: Material(
type: MaterialType.transparency,
child: InkWell(
onTap: onTap,
borderRadius: const BorderRadius.all(
Radius.circular(
SmoothBarcodeScannerVisor.CORNER_PADDING,
),
),
),
child: Tooltip(
message: tooltip,
enableFeedback: true,
child: Padding(
padding: const EdgeInsets.all(12.0),
child: IconTheme(
data: const IconThemeData(color: Colors.white),
child: child,
child: Tooltip(
message: tooltip,
enableFeedback: true,
child: Padding(
padding: const EdgeInsets.all(12.0),
child: IconTheme(
data: const IconThemeData(color: Colors.white),
child: child,
),
),
),
),
Expand Down
4 changes: 2 additions & 2 deletions packages/smooth_app/lib/data_models/news_feed/newsfeed_provider.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -192,9 +192,9 @@ final class AppNewsStateLoading extends AppNewsState {
}

class AppNewsStateLoaded extends AppNewsState {
const AppNewsStateLoaded(this.tagLineContent);
const AppNewsStateLoaded(this.content);

final AppNews tagLineContent;
final AppNews content;
}

class AppNewsStateError extends AppNewsState {
Expand Down
42 changes: 24 additions & 18 deletions packages/smooth_app/lib/helpers/strings_helper.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,25 +110,31 @@ class FormattedText extends StatelessWidget {
@override
Widget build(BuildContext context) {
final TextStyle defaultTextStyle = textStyle ?? const TextStyle();
return RichText(
text: TextSpan(
style: DefaultTextStyle.of(context).style,
children: TextHelper.getPartsBetweenSymbol(
text: text,
symbol: r'\*\*',
symbolLength: 2,
defaultStyle: defaultTextStyle,
highlightedStyle: const TextStyle(fontWeight: FontWeight.bold))
.map(
((String, TextStyle?) part) {
return TextSpan(
text: part.$1,
style: defaultTextStyle.merge(part.$2),
);
},
).toList(growable: false),
return Semantics(
value: text.replaceAll(r'**', '').replaceAll('\n', ' '),
excludeSemantics: true,
child: RichText(
text: TextSpan(
style: DefaultTextStyle.of(context).style,
children: TextHelper.getPartsBetweenSymbol(
text: text,
symbol: r'\*\*',
symbolLength: 2,
defaultStyle: defaultTextStyle,
highlightedStyle:
const TextStyle(fontWeight: FontWeight.bold))
.map(
((String, TextStyle?) part) {
return TextSpan(
text: part.$1,
style: defaultTextStyle.merge(part.$2),
semanticsLabel: '-',
);
},
).toList(growable: false),
),
textAlign: textAlign ?? TextAlign.start,
),
textAlign: textAlign ?? TextAlign.start,
);
}
}
13 changes: 13 additions & 0 deletions packages/smooth_app/lib/l10n/app_en.arb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -781,6 +781,15 @@
"@homepage_main_card_search_field_tooltip": {
"description": "Description for accessibility of the search field on the homepage"
},
"scan_tagline_news_item_accessibility": "Latest news: {news_title}",
"@scan_tagline_news_item_accessibility": {
"description": "Accessibility label for the title of a news",
"placeholders": {
"news_title": {
"type": "String"
}
}
},
"tagline_app_review": "Do you like the app?",
"tagline_app_review_button_positive": "I love it! 😍",
"tagline_app_review_button_negative": "Not really…",
Expand Down Expand Up @@ -1226,6 +1235,10 @@
"@camera_play_sound_subtitle": {
"description": "SubTitle for the Camera play sound toggle"
},
"camera_window_accessibility_label": "Scan a barcode with your camera",
"@camera_window_accessibility_label": {
"description": "Accessibility label for the camera window"
},
"app_haptic_feedback_title": "Vibration & Haptics",
"@app_haptic_feedback_title": {
"description": "Title for the Haptic feedback toggle"
Expand Down
26 changes: 15 additions & 11 deletions packages/smooth_app/lib/pages/scan/camera_scan_page.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,17 +95,21 @@ class _CameraScannerPageState extends State<CameraScannerPage>
return ScreenVisibilityDetector(
child: Stack(
children: <Widget>[
GlobalVars.barcodeScanner.getScanner(
onScan: _onNewBarcodeDetected,
hapticFeedback: () => SmoothHapticFeedback.click(),
onCameraFlashError: CameraScannerPage.onCameraFlashError,
trackCustomEvent: AnalyticsHelper.trackCustomEvent,
hasMoreThanOneCamera: CameraHelper.hasMoreThanOneCamera,
toggleCameraModeTooltip: appLocalizations.camera_toggle_camera,
toggleFlashModeTooltip: appLocalizations.camera_toggle_flash,
contentPadding: _model.compareFeatureEnabled
? EdgeInsets.only(top: _headerHeight ?? 0.0)
: null,
Semantics(
label: appLocalizations.camera_window_accessibility_label,
explicitChildNodes: true,
child: GlobalVars.barcodeScanner.getScanner(
onScan: _onNewBarcodeDetected,
hapticFeedback: () => SmoothHapticFeedback.click(),
onCameraFlashError: CameraScannerPage.onCameraFlashError,
trackCustomEvent: AnalyticsHelper.trackCustomEvent,
hasMoreThanOneCamera: CameraHelper.hasMoreThanOneCamera,
toggleCameraModeTooltip: appLocalizations.camera_toggle_camera,
toggleFlashModeTooltip: appLocalizations.camera_toggle_flash,
contentPadding: _model.compareFeatureEnabled
? EdgeInsets.only(top: _headerHeight ?? 0.0)
: null,
),
),
Align(
alignment: Alignment.topCenter,
Expand Down
119 changes: 63 additions & 56 deletions packages/smooth_app/lib/pages/scan/carousel/main_card/scan_main_card.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,20 +32,23 @@ class ScanMainCard extends StatelessWidget {
expandedMode: true,
);
} else {
return const Column(
children: <Widget>[
Expanded(
flex: 6,
child: _SearchCard(
expandedMode: false,
return Semantics(
explicitChildNodes: true,
child: const Column(
children: <Widget>[
Expanded(
flex: 6,
child: _SearchCard(
expandedMode: false,
),
),
),
SizedBox(height: MEDIUM_SPACE),
Expanded(
flex: 4,
child: ScanTagLine(),
),
],
SizedBox(height: MEDIUM_SPACE),
Expanded(
flex: 4,
child: ScanTagLine(),
),
],
),
);
}
},
Expand Down Expand Up @@ -79,6 +82,7 @@ class _SearchCard extends StatelessWidget {
horizontal: 0.0,
vertical: VERY_SMALL_SPACE,
),
ignoreDefaultSemantics: true,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Expand Down Expand Up @@ -123,54 +127,57 @@ class _SearchBar extends StatelessWidget {
Theme.of(context).extension<SmoothColorsThemeExtension>()!;
final bool lightTheme = !context.watch<ThemeProvider>().isDarkMode(context);

return SizedBox(
height: SEARCH_BAR_HEIGHT,
child: InkWell(
onTap: () => AppNavigator.of(context).push(AppRoutes.SEARCH),
borderRadius: BorderRadius.circular(30.0),
child: Ink(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30.0),
color: lightTheme ? Colors.white : theme.greyDark,
border: Border.all(color: theme.primaryBlack),
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Expanded(
child: Padding(
padding: const EdgeInsetsDirectional.only(
start: 20.0,
end: 10.0,
bottom: 3.0,
),
child: Text(
localizations.homepage_main_card_search_field_hint,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: lightTheme ? Colors.black : Colors.white,
return Semantics(
button: true,
child: SizedBox(
height: SEARCH_BAR_HEIGHT,
child: InkWell(
onTap: () => AppNavigator.of(context).push(AppRoutes.SEARCH),
borderRadius: BorderRadius.circular(30.0),
child: Ink(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30.0),
color: lightTheme ? Colors.white : theme.greyDark,
border: Border.all(color: theme.primaryBlack),
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Expanded(
child: Padding(
padding: const EdgeInsetsDirectional.only(
start: 20.0,
end: 10.0,
bottom: 3.0,
),
child: Text(
localizations.homepage_main_card_search_field_hint,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: lightTheme ? Colors.black : Colors.white,
),
),
),
),
),
AspectRatio(
aspectRatio: 1.0,
child: DecoratedBox(
decoration: BoxDecoration(
color: theme.primaryDark,
shape: BoxShape.circle,
),
child: const Padding(
padding: EdgeInsets.all(10.0),
child: Search(
size: 20.0,
color: Colors.white,
AspectRatio(
aspectRatio: 1.0,
child: DecoratedBox(
decoration: BoxDecoration(
color: theme.primaryDark,
shape: BoxShape.circle,
),
child: const Padding(
padding: EdgeInsets.all(10.0),
child: Search(
size: 20.0,
color: Colors.white,
),
),
),
),
)
],
)
],
),
),
),
),
Expand Down
51 changes: 28 additions & 23 deletions packages/smooth_app/lib/pages/scan/carousel/main_card/scan_tagline.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -202,31 +202,36 @@ class _TagLineContentTitle extends StatelessWidget {
Widget build(BuildContext context) {
final SmoothColorsThemeExtension theme =
Theme.of(context).extension<SmoothColorsThemeExtension>()!;
final AppLocalizations localizations = AppLocalizations.of(context);

return ConstrainedBox(
constraints: const BoxConstraints(minHeight: 30.0),
child: Row(
children: <Widget>[
SizedBox.square(
dimension: 11.0,
child: DecoratedBox(
decoration: BoxDecoration(
color: indicatorColor ?? theme.secondaryLight,
borderRadius: const BorderRadius.all(ROUNDED_RADIUS),
return Semantics(
label: localizations.scan_tagline_news_item_accessibility(title),
excludeSemantics: true,
child: ConstrainedBox(
constraints: const BoxConstraints(minHeight: 30.0),
child: Row(
children: <Widget>[
SizedBox.square(
dimension: 11.0,
child: DecoratedBox(
decoration: BoxDecoration(
color: indicatorColor ?? theme.secondaryLight,
borderRadius: const BorderRadius.all(ROUNDED_RADIUS),
),
),
),
),
const SizedBox(width: SMALL_SPACE),
Expanded(
child: Text(
title,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16.0,
color: titleColor ?? Colors.white,
),
))
],
const SizedBox(width: SMALL_SPACE),
Expanded(
child: Text(
title,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16.0,
color: titleColor ?? Colors.white,
),
))
],
),
),
);
}
Expand Down Expand Up @@ -369,7 +374,7 @@ class _ScanNewsFeedProvider extends ValueNotifier<_ScanTagLineState> {
emit(const _ScanTagLineStateNoContent());
case AppNewsStateLoaded():
_onTagLineContentAvailable(
(_newsFeedProvider.state as AppNewsStateLoaded).tagLineContent);
(_newsFeedProvider.state as AppNewsStateLoaded).content);
}
}

Expand Down

0 comments on commit 93d460c

Please sign in to comment.