Skip to content

Commit

Permalink
Additional accessibility improvements, #637
Browse files Browse the repository at this point in the history 
Signed-off-by: James Hunt <10615884+thetwopct@users.noreply.github.com>
  • Loading branch information
@thetwopct
thetwopct committed Aug 22, 2024
1 parent ecfc327 commit 8e806bf
Show file tree
Hide file tree
Showing 3 changed files with 125 additions and 109 deletions.
216 changes: 112 additions & 104 deletions web/wp-content/themes/lfevents/src/scss/modules/_cookies.scss
View file
Original file line number Diff line number Diff line change
@@ -1,122 +1,130 @@

.osano-cm-window {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, Roboto, Ubuntu, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

.osano-cm-dialog, .osano-cm-info, .osano-cm-info-dialog-header, .osano-cm-header {
background: #333333;
color: #fff;
box-shadow: none;
box-sizing: unset;
line-height: 1.4;
}

.osano-cm-link, .osano-cm-toggle {
color: #fff;
font-weight: bold;
text-decoration: none;

&:hover, &:focus, &:active {
color: #e9e9e9;
}
}

.osano-cm-dialog .osano-cm-toggle__label {
margin-right: 1.5em;
}
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, Roboto, Ubuntu,
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';

div.osano-cm-drawer-item .osano-cm-toggle::after {
width: 8px;
height: 8px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #fff;
left: calc(100% - 1em);
position: absolute;
display: block;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
margin-top: 2px;
content: '';
}

.osano-cm-button {
background-color: #0077cc;
border: none;
color: #ffffff;
box-shadow: none;
border-radius: 5px;
transition: background-color 0.25s ease-out, color 0.25s ease-out;
font-weight: 600;
padding: 12px 24px;
font-size: 14px;
line-height: 14px;
margin-bottom: 0.5em;

&:hover, &:focus, &:active {
background-color: #0065ad;
color: #fefefe;
}
}

.osano-cm-dialog--type_bar .osano-cm-dialog__buttons {
margin-top: 2rem;
}
.osano-cm-dialog,
.osano-cm-info,
.osano-cm-info-dialog-header,
.osano-cm-header {
background: #333333;
color: #fff;
box-shadow: none;
box-sizing: unset;
line-height: 1.4;
}

.osano-cm-link,
.osano-cm-toggle {
color: #fff;
font-weight: bold;
text-decoration: none;

.osano-cm-info-dialog-header__close {
background-color: #333333;
border: none;
color: #fff;
stroke: #fff;
&:hover,
&:focus,
&:active {
color: #e9e9e9;
}
}

.osano-cm-powered-by__link {
color: #999;
.osano-cm-dialog .osano-cm-toggle__label {
margin-right: 1.5em;
}

&:hover, &:focus, &:active {
color: #999;
}
}
div.osano-cm-drawer-item .osano-cm-toggle::after {
width: 8px;
height: 8px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #fff;
left: calc(100% - 1em);
position: absolute;
display: block;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
margin-top: 2px;
content: '';
}

.osano-cm-header {
font-weight: bold;
}
.osano-cm-button {
background-color: #0077cc;
border: none;
color: #ffffff;
box-shadow: none;
border-radius: 5px;
transition:
background-color 0.25s ease-out,
color 0.25s ease-out;
font-weight: 600;
padding: 12px 24px;
font-size: 14px;
line-height: 14px;
margin-bottom: 0.5em;

.osano-cm-toggle__switch {
background-color: #999;
&:hover,
&:focus,
&:active {
background-color: #0065ad;
color: #fefefe;
}
}

.osano-cm-storage-policy::after {
content: " ";
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.662 15.286l-6.9-6.999a.994.994 0 0 0-1.414 0 1.016 1.016 0 0 0 0 1.428L21.544 16l-6.196 6.285a1.016 1.016 0 0 0 0 1.428.994.994 0 0 0 1.414 0l6.899-6.999a1.043 1.043 0 0 0 .001-1.428z' fill='%23fff'/%3E%3Cpath d='M16.662 15.286L9.763 8.287a.994.994 0 0 0-1.414 0 1.016 1.016 0 0 0 0 1.428L14.544 16l-6.196 6.285a1.016 1.016 0 0 0 0 1.428.994.994 0 0 0 1.414 0l6.899-6.999a1.043 1.043 0 0 0 .001-1.428z' fill='%23fff'/%3E%3C/svg%3E");
background-size: 1em 1em;
height: 0.9em;
width: 1em;
background-repeat: no-repeat;
margin-left: 0rem;
display: inline-flex;
white-space: nowrap;
align-self: center;
}
.osano-cm-dialog--type_bar .osano-cm-dialog__buttons {
margin-top: 2rem;
}

ul {
line-height: 1.4;
}
.osano-cm-info-dialog-header__close {
background-color: #333333;
border: none;
color: #fff;
stroke: #fff;
}

.osano-cm-drawer-toggle .osano-cm-label {
font-size: 1em;
}
.osano-cm-powered-by__link {
color: #999;

.osano-cm-info-dialog-header__header {
font-size: 1.2em;
&:hover,
&:focus,
&:active {
color: #999;
}
}
}

.osano-cm-widget__outline {
stroke: #333333;
.osano-cm-header {
font-weight: bold;
}

.osano-cm-toggle__switch {
background-color: #999;
}

.osano-cm-storage-policy::after {
content: ' ';
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.662 15.286l-6.9-6.999a.994.994 0 0 0-1.414 0 1.016 1.016 0 0 0 0 1.428L21.544 16l-6.196 6.285a1.016 1.016 0 0 0 0 1.428.994.994 0 0 0 1.414 0l6.899-6.999a1.043 1.043 0 0 0 .001-1.428z' fill='%23fff'/%3E%3Cpath d='M16.662 15.286L9.763 8.287a.994.994 0 0 0-1.414 0 1.016 1.016 0 0 0 0 1.428L14.544 16l-6.196 6.285a1.016 1.016 0 0 0 0 1.428.994.994 0 0 0 1.414 0l6.899-6.999a1.043 1.043 0 0 0 .001-1.428z' fill='%23fff'/%3E%3C/svg%3E");
background-size: 1em 1em;
height: 0.9em;
width: 1em;
background-repeat: no-repeat;
margin-left: 0rem;
display: inline-flex;
white-space: nowrap;
align-self: center;
}

ul {
line-height: 1.4;
}

.osano-cm-drawer-toggle .osano-cm-label {
font-size: 1em;
}

.osano-cm-info-dialog-header__header {
font-size: 1.2em;
}
}

button.osano-cm-widget:focus {
outline: none;
.osano-cm-widget__outline {
stroke: #333333;
}
16 changes: 12 additions & 4 deletions web/wp-content/themes/lfevents/src/scss/modules/_event-header.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,13 +87,19 @@
padding-right: 2rem;
padding-left: 2rem;
transform-origin: 0 0;
transition: transform 0.2s ease-in-out 0s, box-shadow 0.2s ease-in-out 0s, background-color 0.1s ease-in-out 0s,
transition:
transform 0.2s ease-in-out 0s,
box-shadow 0.2s ease-in-out 0s,
background-color 0.1s ease-in-out 0s,
border-bottom-right-radius 0.2s ease-in-out 0s;

.event-header.is-stuck & {
background-color: transparent !important;
transition: transform 0.3s ease-in-out 0.3s, box-shadow 0.3s ease-in-out 0.3s,
background-color 0.3s ease-in-out 0.6s, border-bottom-right-radius 0.3s ease-in-out 0.3s;
transition:
transform 0.3s ease-in-out 0.3s,
box-shadow 0.3s ease-in-out 0.3s,
background-color 0.3s ease-in-out 0.6s,
border-bottom-right-radius 0.3s ease-in-out 0.3s;

img {
transition: transform 0.3s ease-in-out 0.3s;
Expand All @@ -119,7 +125,9 @@
.event-menu {
clear: both;
background-color: inherit;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.1);
box-shadow:
0 3px 6px rgba(0, 0, 0, 0.1),
0 3px 6px rgba(0, 0, 0, 0.1);

ul,
li {
Expand Down
2 changes: 1 addition & 1 deletion web/wp-content/themes/lfevents/src/scss/modules/_non-event-footer.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@

&:focus {
color: $pure-white;
outline: 0;
outline: 0; // replaced with border-bottom.
padding-left: 0.5em;
padding-bottom: calc(0.5em);
border-bottom: 2px solid $white;
Expand Down

0 comments on commit 8e806bf

Please sign in to comment.