From d51f7863d19e784a939a85166cccaf88fadcdc03 Mon Sep 17 00:00:00 2001
From: Emmanuel Pelletier <manu@habite.la>
Date: Thu, 2 Mar 2023 18:29:09 +0100
Subject: [PATCH] fix(a11y/desktop picker): finish implementation of tabs aria
 pattern

update desktoppicker to use correct tabs aria pattern, just like the
chat in the previous commit
---
 lang/main.json                                |  3 +-
 .../components/DesktopPicker.tsx              | 38 +++++++++++++------
 2 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/lang/main.json b/lang/main.json
index 473aef9a4..cb721a35b 100644
--- a/lang/main.json
+++ b/lang/main.json
@@ -241,7 +241,8 @@
         "Yes": "Yes",
         "accessibilityLabel": {
             "close": "Close dialog",
-            "liveStreaming": "Live Stream"
+            "liveStreaming": "Live Stream",
+            "sharingTabs": "Sharing options"
         },
         "add": "Add",
         "addMeetingNote": "Add a note about this meeting",
diff --git a/react/features/desktop-picker/components/DesktopPicker.tsx b/react/features/desktop-picker/components/DesktopPicker.tsx
index 168e55809..f8741d4b6 100644
--- a/react/features/desktop-picker/components/DesktopPicker.tsx
+++ b/react/features/desktop-picker/components/DesktopPicker.tsx
@@ -191,7 +191,7 @@ class DesktopPicker extends PureComponent<IProps, IState> {
      * @inheritdoc
      */
     render() {
-        const { selectedTab, selectedSource, sources } = this.state;
+        const { selectedTab, selectedSource, sources, types } = this.state;
 
         return (
             <Dialog
@@ -204,14 +204,27 @@ class DesktopPicker extends PureComponent<IProps, IState> {
                 size = 'large'
                 titleKey = 'dialog.shareYourScreen'>
                 { this._renderTabs() }
-                <DesktopPickerPane
-                    key = { selectedTab }
-                    onClick = { this._onPreviewClick }
-                    onDoubleClick = { this._onSubmit }
-                    onShareAudioChecked = { this._onShareAudioChecked }
-                    selectedSourceId = { selectedSource.id }
-                    sources = { sources[selectedTab as keyof typeof sources] }
-                    type = { selectedTab } />
+                {types.map(type => (
+                    <div
+                        aria-labelledby = { `${type}-button` }
+                        className = { selectedTab === type ? undefined : 'hide' }
+                        id = { `${type}-panel` }
+                        key = { type }
+                        role = 'tabpanel'
+                        tabIndex = { 0 }>
+                        {selectedTab === type && (
+                            <DesktopPickerPane
+                                key = { selectedTab }
+                                onClick = { this._onPreviewClick }
+                                onDoubleClick = { this._onSubmit }
+                                onShareAudioChecked = { this._onShareAudioChecked }
+                                selectedSourceId = { selectedSource.id }
+                                sources = { sources[selectedTab as keyof typeof sources] }
+                                type = { selectedTab } />
+                        )}
+                    </div>
+                ))}
+
             </Dialog>
         );
     }
@@ -348,17 +361,18 @@ class DesktopPicker extends PureComponent<IProps, IState> {
                 type => {
                     return {
                         accessibilityLabel: t(TAB_LABELS[type as keyof typeof TAB_LABELS]),
-                        id: type,
+                        id: `${type}-tab`,
+                        controlsId: `${type}-panel`,
                         label: t(TAB_LABELS[type as keyof typeof TAB_LABELS])
                     };
                 });
 
         return (
             <Tabs
-                accessibilityLabel = ''
+                accessibilityLabel = { t('dialog.sharingTabs') }
                 className = 'desktop-picker-tabs-container'
                 onChange = { this._onTabSelected }
-                selected = { this.state.selectedTab }
+                selected = { `${this.state.selectedTab}-tab` }
                 tabs = { tabs } />);
     }