A11y - make visible that tab title is focused
After reverting outline in
Change-Id: I6d8f74c4d01004a88b0dbf207d9d9741a6965755
This change introduce different background color when tab title
is focused.
Change-Id: I92e1861dc9fa6bed4974251c83c2f7f59c9418c6
diff --git a/polygerrit-ui/app/mixins/keyboard-shortcut-mixin/keyboard-shortcut-mixin.ts b/polygerrit-ui/app/mixins/keyboard-shortcut-mixin/keyboard-shortcut-mixin.ts
index 3d5a208..5f53819 100644
--- a/polygerrit-ui/app/mixins/keyboard-shortcut-mixin/keyboard-shortcut-mixin.ts
+++ b/polygerrit-ui/app/mixins/keyboard-shortcut-mixin/keyboard-shortcut-mixin.ts
@@ -815,8 +815,11 @@
(tagName === 'INPUT' && type !== 'checkbox') ||
tagName === 'TEXTAREA' ||
// Suppress shortcuts if the key is 'enter'
- // and target is an anchor or button.
- (e.keyCode === 13 && (tagName === 'A' || tagName === 'BUTTON'))
+ // and target is an anchor or button or paper-tab.
+ (e.keyCode === 13 &&
+ (tagName === 'A' ||
+ tagName === 'BUTTON' ||
+ tagName === 'PAPER-TAB'))
) {
return true;
}
diff --git a/polygerrit-ui/app/styles/shared-styles.ts b/polygerrit-ui/app/styles/shared-styles.ts
index 287cf68..a8274cc 100644
--- a/polygerrit-ui/app/styles/shared-styles.ts
+++ b/polygerrit-ui/app/styles/shared-styles.ts
@@ -239,9 +239,13 @@
font-family: var(--header-font-family);
-webkit-font-smoothing: initial;
}
+ --paper-tab-content: {
+ margin-bottom: var(--spacing-s);
+ }
--paper-tab-content-focused: {
/* paper-tabs uses 700 here, which can look awkward */
font-weight: var(--font-weight-h3);
+ background: var(--gray-background-focus);
}
--paper-tab-content-unselected: {
/* paper-tabs uses 0.8 here, but we want to control the color directly */
@@ -249,6 +253,10 @@
color: var(--deemphasized-text-color);
}
}
+ paper-tab:focus {
+ padding-left: 0px;
+ padding-right: 0px;
+ }
iron-autogrow-textarea {
/** This is needed for firefox */
--iron-autogrow-textarea_-_white-space: pre-wrap;
diff --git a/polygerrit-ui/app/styles/themes/app-theme.ts b/polygerrit-ui/app/styles/themes/app-theme.ts
index 1996800..134003b 100644
--- a/polygerrit-ui/app/styles/themes/app-theme.ts
+++ b/polygerrit-ui/app/styles/themes/app-theme.ts
@@ -128,20 +128,20 @@
--error-foreground: var(--red-700);
--error-background: var(--red-50);
- --error-background-hover: linear-gradient(var(--red-700-04), var(--red-700-04)), var(--red-50);
- --error-background-focus: linear-gradient(var(--red-700-12), var(--red-700-12)), var(--red-50);
+ --error-background-hover: linear-gradient(var(--red-700-04), var(--red-700-04), var(--red-50));
+ --error-background-focus: linear-gradient(var(--red-700-12), var(--red-700-12), var(--red-50));
--error-ripple: var(--red-700-10);
--warning-foreground: var(--orange-700);
--warning-background: var(--orange-50);
- --warning-background-hover: linear-gradient(var(--orange-700-04), var(--orange-700-04)), var(--orange-50);
- --warning-background-focus: linear-gradient(var(--orange-700-12), var(--orange-700-12)), var(--orange-50);
+ --warning-background-hover: linear-gradient(var(--orange-700-04), var(--orange-700-04), var(--orange-50));
+ --warning-background-focus: linear-gradient(var(--orange-700-12), var(--orange-700-12), var(--orange-50));
--warning-ripple: var(--orange-700-10);
--info-foreground: var(--blue-700);
--info-background: var(--blue-50);
- --info-background-hover: linear-gradient(var(--blue-700-04), var(--blue-700-04)), var(--blue-50);
- --info-background-focus: linear-gradient(var(--blue-700-12), var(--blue-700-12)), var(--blue-50);
+ --info-background-hover: linear-gradient(var(--blue-700-04), var(--blue-700-04), var(--blue-50));
+ --info-background-focus: linear-gradient(var(--blue-700-12), var(--blue-700-12), var(--blue-50));
--info-ripple: var(--blue-700-10);
--primary-button-text-color: white;
@@ -154,14 +154,14 @@
--success-foreground: var(--green-700);
--success-background: var(--green-50);
- --success-background-hover: linear-gradient(var(--green-700-04), var(--green-700-04)), var(--green-50);
- --success-background-focus: linear-gradient(var(--green-700-12), var(--green-700-12)), var(--green-50);
+ --success-background-hover: linear-gradient(var(--green-700-04), var(--green-700-04), var(--green-50));
+ --success-background-focus: linear-gradient(var(--green-700-12), var(--green-700-12), var(--green-50));
--success-ripple: var(--green-700-10);
--gray-foreground: var(--gray-700);
--gray-background: var(--gray-100);
- --gray-background-hover: linear-gradient(var(--gray-700-04), var(--gray-700-04)), var(--gray-100);
- --gray-background-focus: linear-gradient(var(--gray-700-12), var(--gray-700-12)), var(--gray-100);
+ --gray-background-hover: linear-gradient(var(--gray-700-04), var(--gray-700-04), var(--gray-100));
+ --gray-background-focus: linear-gradient(var(--gray-700-12), var(--gray-700-12), var(--gray-100));
--gray-ripple: var(--gray-700-10);
--disabled-foreground: var(--gray-800-38);
diff --git a/polygerrit-ui/app/styles/themes/dark-theme.ts b/polygerrit-ui/app/styles/themes/dark-theme.ts
index 926b02d..69256b2 100644
--- a/polygerrit-ui/app/styles/themes/dark-theme.ts
+++ b/polygerrit-ui/app/styles/themes/dark-theme.ts
@@ -38,20 +38,20 @@
--error-foreground: var(--red-200);
--error-background: var(--red-tonal);
- --error-background-hover: linear-gradient(var(--white-04), var(--white-04)), var(--red-tonal);
- --error-background-focus: linear-gradient(var(--white-12), var(--white-12)), var(--red-tonal);
+ --error-background-hover: linear-gradient(var(--white-04), var(--white-04), var(--red-tonal));
+ --error-background-focus: linear-gradient(var(--white-12), var(--white-12), var(--red-tonal));
--error-ripple: var(--white-10);
--warning-foreground: var(--orange-200);
--warning-background: var(--orange-tonal);
- --warning-background-hover: linear-gradient(var(--white-04), var(--white-04)), var(--orange-tonal);
- --warning-background-focus: linear-gradient(var(--white-12), var(--white-12)), var(--orange-tonal);
+ --warning-background-hover: linear-gradient(var(--white-04), var(--white-04), var(--orange-tonal));
+ --warning-background-focus: linear-gradient(var(--white-12), var(--white-12), var(--orange-tonal));
--warning-ripple: var(--white-10);
--info-foreground: var(--blue-200);
--info-background: var(--blue-tonal);
- --info-background-hover: linear-gradient(var(--white-04), var(--white-04)), var(--blue-tonal);
- --info-background-focus: linear-gradient(var(--white-12), var(--white-12)), var(--blue-tonal);
+ --info-background-hover: linear-gradient(var(--white-04), var(--white-04), var(--blue-tonal));
+ --info-background-focus: linear-gradient(var(--white-12), var(--white-12), var(--blue-tonal));
--info-ripple: var(--white-10);
--primary-button-text-color: black;
@@ -64,14 +64,14 @@
--success-foreground: var(--green-200);
--success-background: var(--green-tonal);
- --success-background-hover: linear-gradient(var(--white-04), var(--white-04)), var(--green-tonal);
- --success-background-focus: linear-gradient(var(--white-12), var(--white-12)), var(--green-tonal);
+ --success-background-hover: linear-gradient(var(--white-04), var(--white-04), var(--green-tonal));
+ --success-background-focus: linear-gradient(var(--white-12), var(--white-12), var(--green-tonal));
--success-ripple: var(--white-10);
--gray-foreground: var(--gray-300);
--gray-background: var(--gray-tonal);
- --gray-background-hover: linear-gradient(var(--white-04), var(--white-04)), var(--gray-tonal);
- --gray-background-focus: linear-gradient(var(--white-12), var(--white-12)), var(--gray-tonal);
+ --gray-background-hover: linear-gradient(var(--white-04), var(--white-04), var(--gray-tonal));
+ --gray-background-focus: linear-gradient(var(--white-12), var(--white-12), var(--gray-tonal));
--gray-ripple: var(--white-10);
--disabled-foreground: var(--gray-200-38);
