Merge pull request #114 from atsign-foundation/bugfix/mobile-accessib…

…ility-testing fix: mobile accessibility testing
atsign-foundation · May 13, 2022 · 170f759 · 170f759
2 parents d1acb24 + 16a88f6
commit 170f759
Show file tree

Hide file tree

Showing 10 changed files with 242 additions and 206 deletions.
diff --git a/lib/screens/common_widgets/app_bar.dart b/lib/screens/common_widgets/app_bar.dart
@@ -208,44 +208,51 @@ class _CustomAppBarState extends State<CustomAppBar> {
   }
 
   Widget menuBar(BuildContext context) {
-    return GestureDetector(
-      onTap: () {
-        Scaffold.of(context).openEndDrawer();
-      },
-      child: Stack(
-        alignment: Alignment.topRight,
-        clipBehavior: Clip.none,
-        children: [
-          Container(
-            margin: EdgeInsets.only(top: 10.toHeight),
-            height: 22.toHeight,
-            width: 22.toWidth,
-            child: Image.asset(
-              ImageConstants.drawerIcon,
-            ),
-          ),
-          Consumer<FileDownloadChecker>(
-              builder: (context, _fileDownloadChecker, _) {
-            return _fileDownloadChecker.undownloadedFilesExist
-                ? Positioned(
-                    right: -4,
-                    top: 2,
-                    child: Container(
-                      decoration: BoxDecoration(
-                        color: Colors.white,
-                        shape: BoxShape.circle,
-                      ),
-                      padding: EdgeInsets.all(1.toHeight),
-                      child: CircleAvatar(
-                        backgroundColor: Colors.red,
-                        radius: 5.toWidth,
+    return Consumer<FileDownloadChecker>(
+      builder: (context, _fileDownloadChecker, _) {
+        return IconButton(
+          onPressed: () {
+            Scaffold.of(context).openEndDrawer();
+          },
+          alignment: Alignment.topCenter,
+          tooltip: _fileDownloadChecker.undownloadedFilesExist
+              ? 'Hamburger Menu & Dot'
+              : 'Hamburger Menu',
+          padding: EdgeInsets.zero,
+          icon: Stack(
+            alignment: Alignment.topRight,
+            clipBehavior: Clip.none,
+            children: [
+              Container(
+                margin: EdgeInsets.only(top: 10.toHeight),
+                height: 22.toHeight,
+                width: 22.toWidth,
+                child: Image.asset(
+                  ImageConstants.drawerIcon,
+                  semanticLabel: '',
+                ),
+              ),
+              _fileDownloadChecker.undownloadedFilesExist
+                  ? Positioned(
+                      right: -4,
+                      top: 2,
+                      child: Container(
+                        decoration: BoxDecoration(
+                          color: Colors.white,
+                          shape: BoxShape.circle,
+                        ),
+                        padding: EdgeInsets.all(1.toHeight),
+                        child: CircleAvatar(
+                          backgroundColor: Colors.red,
+                          radius: 5.toWidth,
+                        ),
                       ),
-                    ),
-                  )
-                : SizedBox();
-          }),
-        ],
-      ),
+                    )
+                  : SizedBox(),
+            ],
+          ),
+        );
+      },
     );
   }
 }
diff --git a/lib/screens/common_widgets/common_button.dart b/lib/screens/common_widgets/common_button.dart
@@ -25,8 +25,11 @@ class CommonButton extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     double deviceTextFactor = MediaQuery.of(context).textScaleFactor;
-    return InkWell(
-      onTap: onTap,
+    return TextButton(
+      onPressed: onTap,
+      style: TextButton.styleFrom(
+        padding: EdgeInsets.zero,
+      ),
       child: Container(
         width: width ?? 120.toWidth,
         height: height ?? 45.toHeight * deviceTextFactor,

diff --git a/lib/screens/common_widgets/custom_button.dart b/lib/screens/common_widgets/custom_button.dart
@@ -25,8 +25,11 @@ class CustomButton extends StatelessWidget {
       : super(key: key);
   @override
   Widget build(BuildContext context) {
-    return GestureDetector(
-      onTap: onPressed,
+    return TextButton(
+      onPressed: onPressed,
+      style: TextButton.styleFrom(
+        padding: EdgeInsets.zero,
+      ),
       child: Container(
         width: width ?? 158.toWidth,
         height: height ?? (50.toHeight),

diff --git a/lib/screens/common_widgets/side_bar.dart b/lib/screens/common_widgets/side_bar.dart
@@ -268,6 +268,10 @@ class _SideBarWidgetState extends State<SideBarWidget> {
                             _fileDownloadChecker.undownloadedFilesExist
                                 ? ColorConstants.orangeColor
                                 : ColorConstants.fadedText,
+                        showNotificationDot:
+                            _fileDownloadChecker.undownloadedFilesExist
+                                ? true
+                                : false,
                       );
                     },
                   ),

diff --git a/lib/screens/common_widgets/side_bar_list_item.dart b/lib/screens/common_widgets/side_bar_list_item.dart
@@ -13,6 +13,7 @@ class SideBarItem extends StatelessWidget {
   final WelcomeScreenProvider _welcomeScreenProvider = WelcomeScreenProvider();
   final Color displayColor;
   bool isScale;
+  final bool showNotificationDot;
   SideBarItem(
       {Key? key,
       this.image,
@@ -22,6 +23,7 @@ class SideBarItem extends StatelessWidget {
       this.showIconOnly = false,
       this.isScale = false,
       this.displayColor = ColorConstants.fadedText,
+      this.showNotificationDot = false,
       this.isDesktop = false})
       : super(key: key);
   @override
@@ -42,15 +44,34 @@ class SideBarItem extends StatelessWidget {
         height: 50,
         child: Row(
           children: [
-            Transform.scale(
-              scale: isScale ? 1.2 : 1,
-              child: Image.asset(
-                image!,
-                height: SizeConfig().isTablet(context) ? 24 : 22.toHeight,
-                color: displayColor,
-              ),
+            Stack(
+              children: [
+                Container(
+                  margin: EdgeInsets.only(right: isDesktop ? 20 : 10),
+                  child: Transform.scale(
+                    scale: isScale ? 1.2 : 1,
+                    child: Image.asset(
+                      image!,
+                      height: SizeConfig().isTablet(context) ? 24 : 22.toHeight,
+                      color: displayColor,
+                    ),
+                  ),
+                ),
+                if (showNotificationDot)
+                  Positioned(
+                    top: 0,
+                    right: (isDesktop ? 20 : 10) - 4.toWidth,
+                    child: Container(
+                      width: 8.toWidth,
+                      height: 8.toWidth,
+                      decoration: BoxDecoration(
+                        shape: BoxShape.circle,
+                        color: Colors.red,
+                      ),
+                    ),
+                  )
+              ],
             ),
-            SizedBox(width: isDesktop ? 20 : 10),
             !showIconOnly
                 ? Expanded(
                     child: Text(

diff --git a/lib/screens/history/widgets/received_file_list_tile.dart b/lib/screens/history/widgets/received_file_list_tile.dart
@@ -405,8 +405,12 @@ class _ReceivedFilesListTileState extends State<ReceivedFilesListTile> {
                     height: 3.toHeight,
                   ),
                   (!isOpen!)
-                      ? GestureDetector(
-                          onTap: () {
+                      ? TextButton(
+                          style: TextButton.styleFrom(
+                            padding: EdgeInsets.zero,
+                            tapTargetSize: MaterialTapTargetSize.shrinkWrap,
+                          ),
+                          onPressed: () {
                             if (mounted) {
                               setState(() {
                                 isOpen = !isOpen;
@@ -629,8 +633,12 @@ class _ReceivedFilesListTileState extends State<ReceivedFilesListTile> {
                             );
                           }),
                     ),
-                    GestureDetector(
-                      onTap: () {
+                    TextButton(
+                      style: TextButton.styleFrom(
+                        padding: EdgeInsets.zero,
+                        tapTargetSize: MaterialTapTargetSize.shrinkWrap,
+                      ),
+                      onPressed: () {
                         if (mounted) {
                           setState(() {
                             isOpen = !isOpen!;

diff --git a/lib/screens/home/home.dart b/lib/screens/home/home.dart
@@ -229,6 +229,8 @@ class _HomeState extends State<Home> {
                               children: [
                                 Text(
                                   TextStrings().homeDescriptionMobile,
+                                  semanticsLabel:
+                                      '${TextStrings().appName} \n ${TextStrings().homeDescriptionMobile}',
                                   style: GoogleFonts.playfairDisplay(
                                     textStyle: TextStyle(
                                       fontSize: 38.toFont,
@@ -266,18 +268,15 @@ class _HomeState extends State<Home> {
                                               await _backendService
                                                   .checkToOnboard();
                                             }),
-                                  SizedBox(height: 15.toHeight),
-                                  InkWell(
-                                    onTap: () {
+                                  // SizedBox(height: 15.toHeight),
+                                  CustomButton(
+                                    onPressed: () {
                                       CommonUtilityFunctions()
                                           .showResetAtsignDialog();
                                     },
-                                    child: Text(
-                                      TextStrings.resetButton,
-                                      style: TextStyle(
-                                          fontSize: 15.toFont,
-                                          fontWeight: FontWeight.bold),
-                                    ),
+                                    isInverted: true,
+                                    width: SizeConfig().screenWidth * 0.8,
+                                    buttonText: TextStrings.resetButton,
                                   ),
                                 ],
                               ),

diff --git a/lib/screens/welcome_screen/widgets/select_contact_widget.dart b/lib/screens/welcome_screen/widgets/select_contact_widget.dart
@@ -35,7 +35,6 @@ class _SelectContactWidgetState extends State<SelectContactWidget> {
         textTheme: TextTheme(
           subtitle1: TextStyle(
             color: ColorConstants.inputFieldColor,
-            fontWeight: FontWeight.normal,
           ),
         ),
       ),
@@ -62,36 +61,31 @@ class _ExpansionTileWidget extends StatelessWidget {
   _ExpansionTileWidget(this.headerText, this.onSelected);
   @override
   Widget build(BuildContext context) {
-    return ExpansionTile(
-      tilePadding: SizeConfig().isTablet(context)
-          ? EdgeInsets.symmetric(vertical: 10.toFont, horizontal: 10.toFont)
-          : EdgeInsets.only(left: 10.toFont, right: 10.toFont),
-      backgroundColor: ColorConstants.inputFieldColor,
-      title: InkWell(
-        onTap: () {
-          selectContact(context);
-        },
-        child: Text(
-          headerText!,
-          style: TextStyle(
-            color: ColorConstants.fadedText,
-            fontSize: 14.toFont,
-            fontWeight: FontWeight.normal,
-          ),
+    return ListTile(
+      // tilePadding: SizeConfig().isTablet(context)
+      //     ? EdgeInsets.symmetric(vertical: 10.toFont, horizontal: 10.toFont)
+      //     : EdgeInsets.only(left: 10.toFont, right: 10.toFont),
+      // backgroundColor: ColorConstants.inputFieldColor,
+      title: Text(
+        headerText!,
+        style: TextStyle(
+          color: ColorConstants.fadedText,
+          fontSize: 14.toFont,
+          fontWeight: FontWeight.normal,
         ),
+        semanticsLabel: 'Select @sign from contacts button',
       ),
-      trailing: InkWell(
-        onTap: () {
-          selectContact(context);
-        },
-        child: Container(
-          padding: EdgeInsets.symmetric(vertical: 15),
-          child: Image.asset(
-            ImageConstants.contactsIcon,
-            color: Colors.black,
-          ),
+      trailing: Container(
+        padding: EdgeInsets.symmetric(vertical: 15),
+        child: Image.asset(
+          ImageConstants.contactsIcon,
+          color: Colors.black,
+          semanticLabel: '',
         ),
       ),
+      onTap: () {
+        selectContact(context);
+      },
     );
   }