[MA-30]: Update aria attributes

Brightscout · Dec 20, 2024 · 0e4df0d · 0e4df0d
1 parent d5bbf21
commit 0e4df0d
Showing 1 changed file with 9 additions and 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
@@ -147,6 +147,7 @@ export class EmojiPickerSkin extends React.PureComponent<Props, State> {
                         aria-label={closeButtonLabel}
                         aria-expanded={this.state.pickerExtended}
                         tabIndex={0}
+                        aria-controls='skin-tones-icons'
                     >
                         <CloseIcon
                             size={16}
@@ -159,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>
             </>
@@ -185,7 +191,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-content'
+                    aria-controls='skin-tones-icons'
+                    aria-expanded={this.state.pickerExtended}
                 >
                     <img
                         alt={'emoji skin tone picker'}
@@ -209,7 +216,6 @@ export class EmojiPickerSkin extends React.PureComponent<Props, State> {
                         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>