diff --git a/src/components/file-upload/_file-upload.scss b/src/components/file-upload/_file-upload.scss index acfd3540c3..780fff3c28 100644 --- a/src/components/file-upload/_file-upload.scss +++ b/src/components/file-upload/_file-upload.scss @@ -34,6 +34,24 @@ border: 4px solid $govuk-input-border-colour; } } + + // Set "focus-within" to fix https://bugzilla.mozilla.org/show_bug.cgi?id=1430196 + // so that component receives focus in Firefox. + // This can't be set together with `:focus` as all versions of IE fail + // to recognise `focus-within` and don't set any styles from the block + // when it's a selector. + &:focus-within { + margin-right: -$spacing-unit; + margin-left: -$spacing-unit; + padding-right: $spacing-unit; + padding-left: $spacing-unit; + + // Emulate `govuk-focusable` mixin styles for this component in FF + outline: $govuk-focus-width solid $govuk-focus-colour; + outline-offset: 0; + + box-shadow: inset 0 0 0 4px $govuk-input-border-colour; + } } .govuk-file-upload--error {