From a77c0d06d1ee45205bb97c0a5b5e56e232c3e2ba Mon Sep 17 00:00:00 2001 From: ayush-chauhan233 Date: Thu, 5 Dec 2024 20:03:57 +0530 Subject: [PATCH 1/2] [MA-9]: Fixed the keyboard interactivity of tablist and added appropriate ARIA properties --- .../settings_sidebar/settings_sidebar.tsx | 97 ++++++++++--------- .../team_access_tab/team_access_tab.tsx | 7 +- .../team_info_tab/team_info_tab.tsx | 7 +- .../advanced/user_settings_advanced.tsx | 6 +- .../user_settings_display.test.tsx.snap | 28 ++++++ .../display/user_settings_display.tsx | 6 +- .../general/user_settings_general.tsx | 6 +- .../user_settings_notifications.test.tsx.snap | 24 +++-- .../user_settings_notifications.tsx | 6 +- .../plugin/__snapshots__/index.test.tsx.snap | 6 +- .../components/user_settings/plugin/index.tsx | 6 +- .../user_settings_security.test.tsx.snap | 30 +++++- .../security/user_settings_security.tsx | 6 +- .../sidebar/user_settings_sidebar.tsx | 6 +- .../src/sass/components/_settings-modal.scss | 55 +++++------ 15 files changed, 202 insertions(+), 94 deletions(-) diff --git a/webapp/channels/src/components/settings_sidebar/settings_sidebar.tsx b/webapp/channels/src/components/settings_sidebar/settings_sidebar.tsx index e794272a921..3e426321204 100644 --- a/webapp/channels/src/components/settings_sidebar/settings_sidebar.tsx +++ b/webapp/channels/src/components/settings_sidebar/settings_sidebar.tsx @@ -26,10 +26,12 @@ export type Props = { export default class SettingsSidebar extends React.PureComponent { buttonRefs: Array>; + totalTabs: Tab[]; constructor(props: Props) { super(props); - this.buttonRefs = this.props.tabs.map(() => React.createRef()); + this.totalTabs = [...this.props.tabs, ...this.props.pluginTabs || []]; + this.buttonRefs = this.totalTabs.map(() => React.createRef()); } public handleClick = (tab: Tab, e: React.MouseEvent) => { @@ -41,13 +43,19 @@ export default class SettingsSidebar extends React.PureComponent { public handleKeyUp = (index: number, e: React.KeyboardEvent) => { if (isKeyPressed(e, Constants.KeyCodes.UP)) { if (index > 0) { - this.props.updateTab(this.props.tabs[index - 1].name); + this.props.updateTab(this.totalTabs[index - 1].name); a11yFocus(this.buttonRefs[index - 1].current); + } else { + this.props.updateTab(this.totalTabs[this.totalTabs.length - 1].name); + a11yFocus(this.buttonRefs[this.buttonRefs.length - 1].current); } } else if (isKeyPressed(e, Constants.KeyCodes.DOWN)) { - if (index < this.props.tabs.length - 1) { - this.props.updateTab(this.props.tabs[index + 1].name); + if (index < this.totalTabs.length - 1) { + this.props.updateTab(this.totalTabs[index + 1].name); a11yFocus(this.buttonRefs[index + 1].current); + } else { + this.props.updateTab(this.totalTabs[0].name); + a11yFocus(this.buttonRefs[0].current); } } }; @@ -55,9 +63,9 @@ export default class SettingsSidebar extends React.PureComponent { private renderTab(tab: Tab, index: number) { const key = `${tab.name}_li`; const isActive = this.props.activeTab === tab.name; - let className = ''; + let className = 'nav-pills__tab'; if (isActive) { - className = 'active'; + className += ' active'; } let icon; @@ -79,27 +87,22 @@ export default class SettingsSidebar extends React.PureComponent { } return ( - + {icon} + {tab.uiName} + ); } @@ -110,32 +113,38 @@ export default class SettingsSidebar extends React.PureComponent { pluginTabList = ( <>
-
  • - -
    • - {this.props.pluginTabs.map((tab, index) => this.renderTab(tab, index))} +
    + +
    + {this.props.pluginTabs.map((tab, index) => this.renderTab(tab, index + this.props.tabs.length))} + ); } return ( -
    -
      +
      +
      {tabList} - {pluginTabList} -
    +
    + {pluginTabList} ); } diff --git a/webapp/channels/src/components/team_settings/team_access_tab/team_access_tab.tsx b/webapp/channels/src/components/team_settings/team_access_tab/team_access_tab.tsx index 1bc7d66bd01..bf04a6f5dce 100644 --- a/webapp/channels/src/components/team_settings/team_access_tab/team_access_tab.tsx +++ b/webapp/channels/src/components/team_settings/team_access_tab/team_access_tab.tsx @@ -123,7 +123,12 @@ const AccessTab = ({closeModal, collapseModal, hasChangeTabError, hasChanges, se {formatMessage({id: 'team_settings_modal.title', defaultMessage: 'Team Settings'})} -
    +
    {team.group_constrained ? undefined : {formatMessage({id: 'team_settings_modal.title', defaultMessage: 'Team Settings'})}
    -
    +
    +
    +
    { const pictureSection = this.createPictureSection(); return ( -
    +
    , "container":
    , "container":
    , "container":
    { const areAllSectionsInactive = this.props.activeSection === ''; return ( -
    +
    +
    +
    +
    +
    +
    +
    +
    { } return ( -
    +
    +
    li { + &__tab { + display: flex; + width: 100%; + height: 32px; + align-items: center; + justify-content: start; + padding: 0 12px; + border-radius: 4px; margin-bottom: 8px; + color: rgba(var(--center-channel-color-rgb), 0.75); + font-weight: 600; + gap: 2px; - &.header { - color: rgba(var(--center-channel-color-rgb), 0.75); - font-weight: 600; + i { + color: rgba(var(--center-channel-color-rgb), 0.64); } - button { - height: 32px; - padding: 0 12px; + &:hover { border-radius: 4px; - color: rgba(var(--center-channel-color-rgb), 0.75); - font-weight: 600; - - i { - color: rgba(var(--center-channel-color-rgb), 0.64); - } - - &:hover { - border-radius: 4px; - background-color: rgba(var(--center-channel-color-rgb), 0.04); - color: rgba(var(--center-channel-color-rgb), 0.8); - } + background-color: rgba(var(--center-channel-color-rgb), 0.04); + color: rgba(var(--center-channel-color-rgb), 0.8); } &.active { - button { - background: rgba(var(--button-bg-rgb), 0.08); - color: functions.v(button-bg); + background: rgba(var(--button-bg-rgb), 0.08); + color: functions.v(button-bg); - i { - color: functions.v(button-bg); - } + i { + color: functions.v(button-bg); } } } + + & .header { + margin-bottom: 8px; + color: rgba(var(--center-channel-color-rgb), 0.75); + font-weight: 600; + } } .settings-table { @@ -61,10 +62,6 @@ background: rgba(var(--center-channel-color-rgb), 0.04); } - .nav { - width: 200px; - } - .settings-content { .divider-dark { border-color: rgba(var(--center-channel-color-rgb), 0.12); From 51d4620bde9b903857be01607a7f53ff0ef3f4db Mon Sep 17 00:00:00 2001 From: ayush-chauhan233 Date: Thu, 12 Dec 2024 13:38:11 +0530 Subject: [PATCH 2/2] [MA-9]: Review Fixes: Added aria-level attribute to plugin preferences heading --- .../src/components/settings_sidebar/settings_sidebar.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/webapp/channels/src/components/settings_sidebar/settings_sidebar.tsx b/webapp/channels/src/components/settings_sidebar/settings_sidebar.tsx index 3e426321204..e48ffdf71e1 100644 --- a/webapp/channels/src/components/settings_sidebar/settings_sidebar.tsx +++ b/webapp/channels/src/components/settings_sidebar/settings_sidebar.tsx @@ -121,6 +121,7 @@ export default class SettingsSidebar extends React.PureComponent { key={'plugin preferences heading'} role='heading' className={'header'} + aria-level={3} id='userSettingsModal.pluginPreferences.header' >