Skip to content
This repository was archived by the owner on Apr 24, 2024. It is now read-only.

Commit bc5075e

Browse files
WadeBarnesWadeBarnes
authored
Merge pull request #17 from andrewwhitehead/fix/more-a11y
Accessibility improvements
2 parents 6f218f8 + 7dae11e commit bc5075e

File tree

6 files changed

+175
-88
lines changed

6 files changed

+175
-88
lines changed

‎dist/css/bootstrap-theme.min.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/scss/_overrides.scss

+22-2
Original file line numberDiff line numberDiff line change
@@ -5,19 +5,30 @@
55
// Reference: http://www2.gov.bc.ca/gov/content/governments/services-for-government/policies-procedures/web-content-development-guides/developers-guide/css-elements
66
// sass-lint:disable force-element-nesting, force-pseudo-nesting
77

8-
.nav-link, .navbar-brand, .page-link, a.btn {
8+
.nav-link,
9+
.navbar-brand,
10+
.page-link,
11+
a.btn {
912
text-decoration: none;
1013
}
1114

1215
// Highlight focused links
1316
a:not(.btn):focus {
1417
color: $link-hover-color;
1518
}
19+
.nav-tabs .nav-link:not(.active) {
20+
@include hover-focus {
21+
background-color: $control-link-bg;
22+
border-color: $control-link-border-color;
23+
color: $control-link-color;
24+
}
25+
}
1626

1727
// Add focus ring to btn-link, highlight as regular link
1828
.btn.btn-link {
1929
text-decoration: underline;
20-
&:focus, &.focus {
30+
&:focus,
31+
&.focus {
2132
box-shadow: 0 0 0 $btn-focus-width $btn-link-outline-color;
2233
color: $link-hover-color;
2334
}
@@ -74,3 +85,12 @@ footer nav {
7485
.alert.alert-warning {
7586
border-color: theme-color-level(warning, -4);
7687
}
88+
89+
// Override table row border colours
90+
@each $color, $value in $theme-colors {
91+
@include table-row-variant(
92+
$color,
93+
theme-color-level($color, $table-bg-level),
94+
$table-border-color
95+
);
96+
}

‎dist/scss/_variables.scss

+65-41
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
// New variables and overridden variables from Bootstrap.
33
// check out the variables.scss file in bootstrap for additional ones that are available.
44
//---------------------------------------------------------------------------------------
5+
// Reference: http://www2.gov.bc.ca/gov/content/governments/services-for-government/policies-procedures/web-content-development-guides/developers-guide/css-elements
56

67
// Change theme-colors
78
$theme-colors: (
@@ -18,54 +19,77 @@ $theme-colors: (
1819

1920
// Add our font as default
2021
$bcgov-font-path: "../fonts" !default;
21-
$font-family-sans-serif: BCSans, 'Noto Sans', Verdana, Arial, sans serif;
22-
$font-family-base: $font-family-sans-serif;
23-
$line-height-base: 1.6;
24-
$body-color: #494949;
22+
$font-family-sans-serif: BCSans, "Noto Sans", Verdana, Arial, sans serif !default;
23+
$font-family-base: $font-family-sans-serif !default;
24+
$line-height-base: 1.6 !default;
25+
$body-color: #494949 !default;
2526

2627
// Headings
27-
$headings-font-weight: 700;
28-
$headings-line-height: 1.1;
29-
$headings-margin-bottom: 1.25rem;
30-
$h1-font-size: 2.074rem;
31-
$h2-font-size: 1.54912rem;
32-
$h3-font-size: 1.33882rem;
33-
$h4-font-size: 1rem;
34-
$h5-font-size: 0.86425rem;
35-
$h6-font-size: 0.80345rem;
28+
$headings-font-weight: 700 !default;
29+
$headings-line-height: 1.1 !default;
30+
$headings-margin-bottom: 1.25rem !default;
31+
$h1-font-size: 2.074rem !default;
32+
$h2-font-size: 1.54912rem !default;
33+
$h3-font-size: 1.33882rem !default;
34+
$h4-font-size: 1rem !default;
35+
$h5-font-size: 0.86425rem !default;
36+
$h6-font-size: 0.80345rem !default;
3637

3738
// Links
38-
$link-decoration: underline;
39-
$link-color: #1a5a96;
40-
$link-hover-color: #0000f3;
39+
$link-decoration: underline !default;
40+
$link-color: #1a5a96 !default;
41+
$link-hover-color: #0631f3 !default;
42+
$btn-link-outline-color: rgba(theme-color(primary), 0.5) !default;
4143

4244
// Navbar - header and footer
43-
$header-box-shadow-color: rgba(51, 51, 51, 0.5);
44-
$nav-link-padding-x: 0.8rem;
45-
$nav-link-padding-y: 0.4rem;
46-
$navbar-nav-link-padding-x: 0.8rem;
47-
$navbar-nav-link-padding-y: 0.4rem;
48-
$navbar-dark-color: #fff;
49-
$navbar-dark-toggler-border-color: rgba(255, 255, 255, 0.6);
50-
$footer-separator-color: #4b5e73;
45+
$header-box-shadow-color: rgba(51, 51, 51, 0.5) !default;
46+
$nav-link-padding-x: 0.8rem !default;
47+
$nav-link-padding-y: 0.4rem !default;
48+
$navbar-nav-link-padding-x: 0.8rem !default;
49+
$navbar-nav-link-padding-y: 0.4rem !default;
50+
$navbar-dark-color: #fff !default;
51+
$navbar-dark-toggler-border-color: rgba(255, 255, 255, 0.6) !default;
52+
$footer-separator-color: #4b5e73 !default;
5153

5254
// Table header
53-
$table-dark-bg: theme-color(primary);
54-
$table-dark-border-color: theme-color(primary);
55+
$table-dark-bg: theme-color(primary) !default;
56+
$table-dark-border-color: theme-color(primary) !default;
5557

56-
// Slightly darker borders
57-
$gray-400: #ced4da;
58-
$alert-border-level: -7;
59-
$card-border-color: rgba(0, 0, 0, 0.2);
60-
$hr-border-color: rgba(0, 0, 0, 0.2);
61-
$border-color: $gray-400;
62-
$nav-tabs-border-color: $gray-400;
63-
$pagination-border-color: $gray-400;
64-
$pagination-hover-border-color: $gray-400;
65-
$table-border-color: $gray-400;
58+
// Darker borders
59+
$gray-300: #dee2e6 !default;
60+
$gray-400: #ced4da !default;
61+
$gray-450: #bdc5cc !default;
62+
$gray-500: #adb5bd !default;
63+
$alpha-border-color: rgba(black, 0.3) !default;
64+
$alert-border-level: -7 !default;
65+
$card-border-color: $alpha-border-color !default;
66+
$hr-border-color: $alpha-border-color !default;
67+
$border-color: $gray-400 !default;
68+
$input-border-color: $gray-500 !default;
69+
$list-group-border-color: $alpha-border-color !default;
70+
$nav-tabs-border-color: $gray-500 !default;
71+
$nav-tabs-link-active-border-color: $gray-500 $gray-500 white !default;
72+
$pagination-border-color: $gray-500 !default;
73+
$pagination-disabled-border-color: $gray-400 !default;
74+
// $pagination-active-border-color: $pagination-active-bg !default;
75+
$table-border-color: $gray-450 !default;
76+
$table-border-level: -5 !default;
6677

67-
// List groups
68-
$list-group-active-bg: lighten(theme-color(secondary-nav), 10%);
69-
$list-group-active-border-color: lighten(theme-color(secondary-nav), 8%);
70-
71-
$btn-link-outline-color: rgba(theme-color(primary), 0.5);
78+
// Clearer hover states
79+
$control-link-color: white !default;
80+
$control-link-bg: lighten(
81+
theme-color(secondary-nav),
82+
10%
83+
) !default; // custom var
84+
$control-link-border-color: lighten(
85+
theme-color(secondary-nav),
86+
8%
87+
) !default; // custom var
88+
$pagination-hover-color: $control-link-color;
89+
$pagination-hover-bg: $control-link-bg !default;
90+
$pagination-hover-border-color: $control-link-border-color !default;
91+
$list-group-active-bg: $control-link-bg !default;
92+
$list-group-active-border-color: $control-link-border-color !default;
93+
$list-group-action-hover-color: $link-hover-color;
94+
$nav-tabs-link-hover-border-color: $control-link-color $control-link-color
95+
$nav-tabs-border-color !default;

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@bcgov/bootstrap-theme",
3-
"version": "1.1.2",
3+
"version": "1.1.3",
44
"description": "Government of British Columbia Bootstrap v4 theme",
55
"style": "dist/css/bootstrap-theme.min.css",
66
"main": "dist/js/bootstrap-theme.min.js",

‎src/styles/_overrides.scss

+22-2
Original file line numberDiff line numberDiff line change
@@ -5,19 +5,30 @@
55
// Reference: http://www2.gov.bc.ca/gov/content/governments/services-for-government/policies-procedures/web-content-development-guides/developers-guide/css-elements
66
// sass-lint:disable force-element-nesting, force-pseudo-nesting
77

8-
.nav-link, .navbar-brand, .page-link, a.btn {
8+
.nav-link,
9+
.navbar-brand,
10+
.page-link,
11+
a.btn {
912
text-decoration: none;
1013
}
1114

1215
// Highlight focused links
1316
a:not(.btn):focus {
1417
color: $link-hover-color;
1518
}
19+
.nav-tabs .nav-link:not(.active) {
20+
@include hover-focus {
21+
background-color: $control-link-bg;
22+
border-color: $control-link-border-color;
23+
color: $control-link-color;
24+
}
25+
}
1626

1727
// Add focus ring to btn-link, highlight as regular link
1828
.btn.btn-link {
1929
text-decoration: underline;
20-
&:focus, &.focus {
30+
&:focus,
31+
&.focus {
2132
box-shadow: 0 0 0 $btn-focus-width $btn-link-outline-color;
2233
color: $link-hover-color;
2334
}
@@ -74,3 +85,12 @@ footer nav {
7485
.alert.alert-warning {
7586
border-color: theme-color-level(warning, -4);
7687
}
88+
89+
// Override table row border colours
90+
@each $color, $value in $theme-colors {
91+
@include table-row-variant(
92+
$color,
93+
theme-color-level($color, $table-bg-level),
94+
$table-border-color
95+
);
96+
}

‎src/styles/_variables.scss

+64-41
Original file line numberDiff line numberDiff line change
@@ -19,54 +19,77 @@ $theme-colors: (
1919

2020
// Add our font as default
2121
$bcgov-font-path: "../fonts" !default;
22-
$font-family-sans-serif: BCSans, 'Noto Sans', Verdana, Arial, sans serif;
23-
$font-family-base: $font-family-sans-serif;
24-
$line-height-base: 1.6;
25-
$body-color: #494949;
22+
$font-family-sans-serif: BCSans, "Noto Sans", Verdana, Arial, sans serif !default;
23+
$font-family-base: $font-family-sans-serif !default;
24+
$line-height-base: 1.6 !default;
25+
$body-color: #494949 !default;
2626

2727
// Headings
28-
$headings-font-weight: 700;
29-
$headings-line-height: 1.1;
30-
$headings-margin-bottom: 1.25rem;
31-
$h1-font-size: 2.074rem;
32-
$h2-font-size: 1.54912rem;
33-
$h3-font-size: 1.33882rem;
34-
$h4-font-size: 1rem;
35-
$h5-font-size: 0.86425rem;
36-
$h6-font-size: 0.80345rem;
28+
$headings-font-weight: 700 !default;
29+
$headings-line-height: 1.1 !default;
30+
$headings-margin-bottom: 1.25rem !default;
31+
$h1-font-size: 2.074rem !default;
32+
$h2-font-size: 1.54912rem !default;
33+
$h3-font-size: 1.33882rem !default;
34+
$h4-font-size: 1rem !default;
35+
$h5-font-size: 0.86425rem !default;
36+
$h6-font-size: 0.80345rem !default;
3737

3838
// Links
39-
$link-decoration: underline;
40-
$link-color: #1a5a96;
41-
$link-hover-color: #0000f3;
39+
$link-decoration: underline !default;
40+
$link-color: #1a5a96 !default;
41+
$link-hover-color: #0631f3 !default;
42+
$btn-link-outline-color: rgba(theme-color(primary), 0.5) !default;
4243

4344
// Navbar - header and footer
44-
$header-box-shadow-color: rgba(51, 51, 51, 0.5);
45-
$nav-link-padding-x: 0.8rem;
46-
$nav-link-padding-y: 0.4rem;
47-
$navbar-nav-link-padding-x: 0.8rem;
48-
$navbar-nav-link-padding-y: 0.4rem;
49-
$navbar-dark-color: #fff;
50-
$navbar-dark-toggler-border-color: rgba(255, 255, 255, 0.6);
51-
$footer-separator-color: #4b5e73;
45+
$header-box-shadow-color: rgba(51, 51, 51, 0.5) !default;
46+
$nav-link-padding-x: 0.8rem !default;
47+
$nav-link-padding-y: 0.4rem !default;
48+
$navbar-nav-link-padding-x: 0.8rem !default;
49+
$navbar-nav-link-padding-y: 0.4rem !default;
50+
$navbar-dark-color: #fff !default;
51+
$navbar-dark-toggler-border-color: rgba(255, 255, 255, 0.6) !default;
52+
$footer-separator-color: #4b5e73 !default;
5253

5354
// Table header
54-
$table-dark-bg: theme-color(primary);
55-
$table-dark-border-color: theme-color(primary);
55+
$table-dark-bg: theme-color(primary) !default;
56+
$table-dark-border-color: theme-color(primary) !default;
5657

57-
// Slightly darker borders
58-
$gray-400: #ced4da;
59-
$alert-border-level: -7;
60-
$card-border-color: rgba(0, 0, 0, 0.2);
61-
$hr-border-color: rgba(0, 0, 0, 0.2);
62-
$border-color: $gray-400;
63-
$nav-tabs-border-color: $gray-400;
64-
$pagination-border-color: $gray-400;
65-
$pagination-hover-border-color: $gray-400;
66-
$table-border-color: $gray-400;
58+
// Darker borders
59+
$gray-300: #dee2e6 !default;
60+
$gray-400: #ced4da !default;
61+
$gray-450: #bdc5cc !default;
62+
$gray-500: #adb5bd !default;
63+
$alpha-border-color: rgba(black, 0.3) !default;
64+
$alert-border-level: -7 !default;
65+
$card-border-color: $alpha-border-color !default;
66+
$hr-border-color: $alpha-border-color !default;
67+
$border-color: $gray-400 !default;
68+
$input-border-color: $gray-500 !default;
69+
$list-group-border-color: $alpha-border-color !default;
70+
$nav-tabs-border-color: $gray-500 !default;
71+
$nav-tabs-link-active-border-color: $gray-500 $gray-500 white !default;
72+
$pagination-border-color: $gray-500 !default;
73+
$pagination-disabled-border-color: $gray-400 !default;
74+
// $pagination-active-border-color: $pagination-active-bg !default;
75+
$table-border-color: $gray-450 !default;
76+
$table-border-level: -5 !default;
6777

68-
// List groups
69-
$list-group-active-bg: lighten(theme-color(secondary-nav), 10%);
70-
$list-group-active-border-color: lighten(theme-color(secondary-nav), 8%);
71-
72-
$btn-link-outline-color: rgba(theme-color(primary), 0.5);
78+
// Clearer hover states
79+
$control-link-color: white !default;
80+
$control-link-bg: lighten(
81+
theme-color(secondary-nav),
82+
10%
83+
) !default; // custom var
84+
$control-link-border-color: lighten(
85+
theme-color(secondary-nav),
86+
8%
87+
) !default; // custom var
88+
$pagination-hover-color: $control-link-color;
89+
$pagination-hover-bg: $control-link-bg !default;
90+
$pagination-hover-border-color: $control-link-border-color !default;
91+
$list-group-active-bg: $control-link-bg !default;
92+
$list-group-active-border-color: $control-link-border-color !default;
93+
$list-group-action-hover-color: $link-hover-color;
94+
$nav-tabs-link-hover-border-color: $control-link-color $control-link-color
95+
$nav-tabs-border-color !default;

0 commit comments

Comments
 (0)