IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-25 18:55:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

A11Y: Add clearer focus states for date picker elements (#17890)

Browse Source 
Affects date dropdowns, prev/next month arrows and day grid.
This commit is contained in:
Penar Musaraj 2022-08-15 14:50:07 -04:00 committed by GitHub
parent 5043669d05
commit 0d6fd1a606
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 18 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
app/assets/stylesheets/vendor/pikaday.scss vendored
View File

@ -116,8 +116,9 @@ $pd-font-family: Arial, sans-serif !default;
background-size: 75% 75%; background-size: 75% 75%;
opacity: .5; opacity: .5;
&:hover { &:hover, &:focus {
opacity: 1; opacity: 1;
background: var(--tertiary);
} }
&.is-disabled { &.is-disabled {
@ -249,3 +250,9 @@ $pd-font-family: Arial, sans-serif !default;
box-shadow: none; box-shadow: none;
border-radius: 3px; border-radius: 3px;
} }
.pika-day {
&:focus {
background-color: var(--tertiary-very-low);
}
}

20
plugins/discourse-local-dates/assets/stylesheets/common/discourse-local-dates.scss
View File

@ -180,6 +180,16 @@ div[data-tippy-root] {
.date-time { .date-time {
color: var(--primary-medium); color: var(--primary-medium);
background: var(--primary-very-low); background: var(--primary-very-low);
padding: 1em 0.5em 1em 2em;
border: 0;
outline: none;
flex: 1;
@include ellipsis;
width: 100%;
justify-content: flex-start;
&:focus {
background-color: var(--tertiary-50);
}
} }
.d-icon { .d-icon {
@ -203,16 +213,6 @@ div[data-tippy-root] {
color: var(--primary-high); color: var(--primary-high);
border-radius: 0 0 5px 0; border-radius: 0 0 5px 0;
} }
.date-time {
padding: 1em 0.5em 1em 2em;
border: 0;
outline: none;
flex: 1;
@include ellipsis;
width: 100%;
justify-content: flex-start;
}
} }
.inputs-panel { .inputs-panel {