haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
This commit is contained in:
Emmanuel Pelletier 2023-03-02 18:29:09 +01:00
parent fc050c64cf
commit d51f7863d1
2 changed files with 28 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
lang/main.json
View File

@ -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",

38
react/features/desktop-picker/components/DesktopPicker.tsx
View File

@ -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 } />);
}