fix(tab-button): use darker text to pass a11y (#27355)

Issue number: N/A

---------

- Changes the default Material Design tab color to
`$text-color-step-350` or `#a6a6a6`
- Changes the default iOS tab color to `$text-color-step-400` or
`#999999`
- Removes the axe skip in the e2e test

These were the minimum color changes needed to pass axe.

---------

Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>

core/src/components/tab-button/test/a11y/tab-button.e2e.ts

@@ -7,8 +7,7 @@ configs().forEach(({ title, config }) => {
     test('should not have any axe violations', async ({ page }) => {
       await page.goto('/src/components/tab-button/test/a11y', config);
 
-      // TODO FW-3604
+      const results = await new AxeBuilder({ page }).analyze();
-      const results = await new AxeBuilder({ page }).disableRules('color-contrast').analyze();
       expect(results.violations).toEqual([]);
     });
   });

core/src/themes/ionic.theme.default.ios.scss

@@ -16,7 +16,7 @@ $overlay-ios-background-color:              var(--ion-overlay-background-color,
 $tabbar-ios-background:                     var(--ion-tab-bar-background, var(--ion-color-step-50, #f7f7f7)) !default;
 $tabbar-ios-background-focused:             var(--ion-tab-bar-background-focused, get-color-shade(#fff)) !default;
 $tabbar-ios-border-color:                   var(--ion-tab-bar-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, .2)))) !default;
-$tabbar-ios-color:                          var(--ion-tab-bar-color, $text-color-step-600) !default;
+$tabbar-ios-color:                          var(--ion-tab-bar-color, $text-color-step-400) !default;
 $tabbar-ios-color-selected:                 var(--ion-tab-bar-color-selected, ion-color(primary, base)) !default;
 
 // iOS Toolbar

core/src/themes/ionic.theme.default.md.scss

@@ -17,7 +17,7 @@ $overlay-md-background-color:               var(--ion-overlay-background-color,
 $tabbar-md-background:                      var(--ion-tab-bar-background, $background-color) !default;
 $tabbar-md-background-focused:              var(--ion-tab-bar-background-focused, get-color-shade(#fff)) !default;
 $tabbar-md-border-color:                    var(--ion-tab-bar-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, .07)))) !default;
-$tabbar-md-color:                           var(--ion-tab-bar-color, $text-color-step-400) !default;
+$tabbar-md-color:                           var(--ion-tab-bar-color, $text-color-step-350) !default;
 $tabbar-md-color-selected:                  var(--ion-tab-bar-color-selected, ion-color(primary, base)) !default;
 
 // Material Design Toolbar