[MA-30]: Provide state information

Brightscout · Dec 18, 2024 · c1657a6 · c1657a6
1 parent f11ed97
commit c1657a6
Showing 1 changed file with 12 additions and 2 deletions.
diff --git a/webapp/channels/src/components/emoji_picker/components/emoji_picker_skin.tsx b/webapp/channels/src/components/emoji_picker/components/emoji_picker_skin.tsx
@@ -131,6 +131,7 @@ export class EmojiPickerSkin extends React.PureComponent<Props, State> {
                     onClick={() => this.hideSkinTonePicker(skin)}
                 >
                     <img
+                        alt={skinTone.label.defaultMessage}
                         src={imgTrans}
                         className={spriteClassName}
                     />
@@ -144,6 +145,8 @@ export class EmojiPickerSkin extends React.PureComponent<Props, State> {
                         className='skin-tones__close-icon style--none'
                         onClick={() => this.hideSkinTonePicker(this.props.userSkinTone)}
                         aria-label={closeButtonLabel}
+                        aria-expanded={this.state.pickerExtended}
+                        tabIndex={0}
                     >
                         <CloseIcon
                             size={16}
@@ -182,6 +185,7 @@ export class EmojiPickerSkin extends React.PureComponent<Props, State> {
                     className='style--none skin-tones__icon skin-tones__expand-icon'
                     onClick={this.showSkinTonePicker}
                     aria-label={expandButtonLabel}
+                    aria-controls='skin-tones-content'
                 >
                     <img
                         alt={'emoji skin tone picker'}
@@ -201,8 +205,14 @@ export class EmojiPickerSkin extends React.PureComponent<Props, State> {
                 timeout={200}
             >
                 <div className={classNames('skin-tones', {'skin-tones--active': this.state.pickerExtended})}>
-                    <div className={classNames('skin-tones__content', {'skin-tones__content__single': !this.state.pickerExtended})}>
-                        {this.state.pickerExtended ? this.extended() : this.collapsed()}
+                    <div
+                        id='skin-tones-content'
+                        className={classNames('skin-tones__content', {'skin-tones__content__single': !this.state.pickerExtended})}
+                        aria-orientation='horizontal'
+                        aria-expanded={this.state.pickerExtended}
+                    >
+                        {this.state.pickerExtended && this.extended() }
+                        {this.collapsed()}
                     </div>
                 </div>
             </CSSTransition>