diff --git a/stylesheets/components/MessageAudio.scss b/stylesheets/components/MessageAudio.scss index 21daf7e107..ae3f636108 100644 --- a/stylesheets/components/MessageAudio.scss +++ b/stylesheets/components/MessageAudio.scss @@ -161,6 +161,30 @@ outline: 0; } +.module-message__audio-attachment__button, +.module-message__audio-attachment__spinner, +.module-message__audio-attachment__waveform { + &:focus { + @include keyboard-mode { + outline: 2px solid $color-white-alpha-60; + } + @include ios-keyboard-mode { + outline: 2px solid $ultramarine-ui-light; + } + } + + .module-message__audio-attachment--outgoing & { + &:focus { + @include keyboard-mode { + outline: 2px solid $ultramarine-ui-light; + } + @include ios-keyboard-mode { + outline: 2px solid $color-white-alpha-60; + } + } + } +} + .module-message__audio-attachment__waveform__bar { display: inline-block; diff --git a/ts/components/conversation/Message.stories.tsx b/ts/components/conversation/Message.stories.tsx index 8c0ae60fad..c3298c558c 100644 --- a/ts/components/conversation/Message.stories.tsx +++ b/ts/components/conversation/Message.stories.tsx @@ -5,7 +5,7 @@ import * as React from 'react'; import { isBoolean } from 'lodash'; import { action } from '@storybook/addon-actions'; -import { boolean, number, text } from '@storybook/addon-knobs'; +import { boolean, number, select, text } from '@storybook/addon-knobs'; import { storiesOf } from '@storybook/react'; import { SignalService } from '../../protobuf'; @@ -70,7 +70,10 @@ const renderAudioAttachment: Props['renderAudioAttachment'] = props => ( const createProps = (overrideProps: Partial = {}): Props => ({ attachments: overrideProps.attachments, - author: overrideProps.author || getDefaultConversation(), + author: overrideProps.author || { + ...getDefaultConversation(), + color: select('authorColor', Colors, 'red'), + }, reducedMotion: boolean('reducedMotion', false), bodyRanges: overrideProps.bodyRanges, canReply: true,