upstream/mattermost
1
0
Fork 0
mirror of https://github.com/mattermost/mattermost.git synced 2026-05-28 04:35:04 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

[MM-61627]: Fix focus order in sidebar (#29743)

Browse source
This commit is contained in:
Saurabh Sharma 2025-01-28 19:44:06 +05:30 committed by GitHub
parent 77ab7b92c6
commit 57f13549d7
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 4 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
e2e-tests/cypress/tests/integration/channels/accessibility/accessibility_sidebar_spec.ts
View file

@ -85,7 +85,7 @@ describe('Verify Accessibility Support in Channel Sidebar Navigation', () => {
cy.focused().parent().next().find('.SidebarChannel').each((el, i) => {
if (i === 0) {
cy.focused().findByText('CHANNELS');
cy.focused().tab().tab().tab();
cy.focused().tab().tab();
}
// * Verify if focus changes to different channels in Channels section
@ -120,7 +120,7 @@ describe('Verify Accessibility Support in Channel Sidebar Navigation', () => {
cy.focused().tab().tab().parent().next().find('.SidebarChannel').each((el, i) => {
if (i === 0) {
cy.focused().findByText('FAVORITES');
cy.focused().tab().tab().tab();
cy.focused().tab().tab();
}
cy.wrap(el).find('.SidebarLink').should('be.focused');

1
webapp/channels/src/components/sidebar/sidebar_category/sidebar_category.tsx
View file

@ -108,6 +108,7 @@ export default class SidebarCategory extends React.PureComponent<Props, State> {
handleA11yKeyDown = (e: KeyboardEvent<HTMLButtonElement>['nativeEvent']) => {
if (isKeyPressed(e, Constants.KeyCodes.ENTER)) {
e.preventDefault();
this.handleCollapse();
}
};

1
webapp/channels/src/components/sidebar/sidebar_category_header.tsx
View file

@ -71,6 +71,7 @@ export const SidebarCategoryHeader = React.forwardRef((props: Props, ref?: React
<div
className='SidebarChannelGroupHeader_text'
{...dragHandleProps}
tabIndex={-1}
>
{wrapEmojis(props.displayName)}
</div>