diff --git a/rca/project_styleguide/templates/patterns/atoms/back-link/back-link.html b/rca/project_styleguide/templates/patterns/atoms/back-link/back-link.html index 4147a356e..964c6f85a 100644 --- a/rca/project_styleguide/templates/patterns/atoms/back-link/back-link.html +++ b/rca/project_styleguide/templates/patterns/atoms/back-link/back-link.html @@ -1,4 +1,4 @@ - + diff --git a/rca/project_styleguide/templates/patterns/molecules/video-modal/video-modal.html b/rca/project_styleguide/templates/patterns/molecules/video-modal/video-modal.html index e98f4514b..749111eb9 100644 --- a/rca/project_styleguide/templates/patterns/molecules/video-modal/video-modal.html +++ b/rca/project_styleguide/templates/patterns/molecules/video-modal/video-modal.html @@ -4,9 +4,9 @@ Open video {% endif %}
- +
{% embed video %} diff --git a/rca/static_src/sass/components/_back-link.scss b/rca/static_src/sass/components/_back-link.scss index 9d652a62f..dd55e9003 100644 --- a/rca/static_src/sass/components/_back-link.scss +++ b/rca/static_src/sass/components/_back-link.scss @@ -8,6 +8,10 @@ display: flex; pointer-events: none; + &:focus { + outline: 2px solid $color--focus; + } + @include media-query(medium) { margin-top: ($gutter * 3.25); } @@ -31,7 +35,7 @@ } } - &:hover { + &:hover, &:focus { span { &::after { width: 100%; diff --git a/rca/static_src/sass/components/_video-modal.scss b/rca/static_src/sass/components/_video-modal.scss index bc03b3d91..238b0dd6e 100644 --- a/rca/static_src/sass/components/_video-modal.scss +++ b/rca/static_src/sass/components/_video-modal.scss @@ -43,6 +43,10 @@ top: 20px; right: 20px; + &:focus { + outline: 2px solid $color--focus; + } + .is-open & { pointer-events: all; }