From 3f9aa4a212fad75a3414508e576f57f922366d17 Mon Sep 17 00:00:00 2001
From: Saurabh Sharma <saurabh.sharma@brightscout.com>
Date: Tue, 14 Jan 2025 23:48:20 +0530
Subject: [PATCH] [MM-61604]: Provide proper name, role, and state information
 to skin tone accordion (#29742)

* [MA-30]: Provide state information

* [MA-30]: Update aria attributes

* [MA-30]: Remove unnecessary id

---------

Co-authored-by: Mattermost Build <build@mattermost.com>
---
 .../components/emoji_picker_skin.tsx          | 20 ++++++++++++++++---
 1 file changed, 17 insertions(+), 3 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
index 1e7646ef3b..5e31a93c3f 100644
--- 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,9 @@ 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}
+                        aria-controls='skin-tones-icons'
                     >
                         <CloseIcon
                             size={16}
@@ -156,7 +160,12 @@ export class EmojiPickerSkin extends React.PureComponent<Props, State> {
                         />
                     </div>
                 </div>
-                <div className='skin-tones__icons'>
+                <div
+                    className='skin-tones__icons'
+                    id='skin-tones-icons'
+                    aria-label='Skin tone icons'
+                    role='region'
+                >
                     {choices}
                 </div>
             </>
@@ -180,6 +189,8 @@ 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-icons'
+                    aria-expanded={this.state.pickerExtended}
                 >
                     <img
                         alt={'emoji skin tone picker'}
@@ -199,8 +210,11 @@ 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
+                        className={classNames('skin-tones__content', {'skin-tones__content__single': !this.state.pickerExtended})}
+                        aria-orientation='horizontal'
+                    >
+                        {this.state.pickerExtended ? this.extended() : this.collapsed() }
                     </div>
                 </div>
             </CSSTransition>