mirrors/mostlymatter
1
0
Форкнуть 0
Код Задачи Запросы на слияние Действия Пакеты Проекты Релизы Вики Активность

[MM-61599]: Remove tabIndex from non-interactive elements (#29659)

Просмотр исходного кода
Этот коммит содержится в:
Saurabh Sharma
2025-01-31 21:54:56 +05:30
коммит произвёл GitHub
родитель 7740eb9d43
Коммит 7a959038f9
11 изменённых файлов: 26 добавлений и 54 удалений
Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

50
e2e-tests/cypress/tests/integration/channels/accessibility/accessibility_post_spec.js
Просмотреть файл

@@ -157,8 +157,7 @@ describe('Verify Accessibility Support in Post', () => {
postMessages(testChannel, otherUser, 1);
// # Shift focus to the last post
cy.get('#FormattingControl_bold').focus().tab({shift: true}).tab({shift: true}).type('{uparrow}{downarrow}');
cy.focused().tab();
cy.get('#FormattingControl_bold').focus().tab({shift: true}).tab({shift: true}).tab({shift: true}).tab({shift: true});
cy.getLastPostId().then((postId) => {
cy.get(`#post_${postId}`).within(() => {
@@ -199,9 +198,6 @@ describe('Verify Accessibility Support in Post', () => {
// * Verify focus is on the more button
cy.get(`#CENTER_button_${postId}`).should('be.focused').and('have.attr', 'aria-label', 'more');
cy.focused().tab();
// * Verify focus is on the post text
cy.get(`#postMessageText_${postId}`).should('be.focused');
});
});
});
@@ -230,36 +226,32 @@ describe('Verify Accessibility Support in Post', () => {
// * Verify reverse tab on RHS
cy.getLastPostId().then((postId) => {
cy.get(`#rhsPost_${postId}`).within(() => {
// * Verify focus is on the post text
cy.get(`#rhsPostMessageText_${postId}`).should('be.focused');
cy.focused().tab({shift: true});
// * Verify focus is on the more button
cy.get(`#RHS_COMMENT_button_${postId}`).should('be.focused').and('have.attr', 'aria-label', 'more');
cy.focused().tab({shift: true});
// * Verify focus is on the actions button
cy.get(`#RHS_COMMENT_actions_button_${postId}`).should('be.focused').and('have.attr', 'aria-label', 'actions');
cy.focused().tab({shift: true});
// * Verify focus is on the save icon
cy.get(`#RHS_COMMENT_flagIcon_${postId}`).should('be.focused').and('have.attr', 'aria-label', 'save message');
cy.focused().tab({shift: true});
// * Verify focus is on the reactions button
cy.get(`#RHS_COMMENT_reaction_${postId}`).should('be.focused').and('have.attr', 'aria-label', 'Add Reaction');
cy.focused().tab({shift: true});
// * Verify focus is on most recent action
cy.get('#recent_reaction_0').should('have.class', 'emoticon--post-menu').and('have.attr', 'aria-label');
cy.focused().tab({shift: true});
// * Verify focus is on the time
cy.get(`#RHS_COMMENT_time_${postId}`).should('be.focused');
cy.focused().tab({shift: true});
// * Verify focus is on the username
cy.get('button.user-popover').should('be.focused');
cy.focused().tab().tab();
// * Verify focus is on most recent action
cy.get('#recent_reaction_0').should('have.class', 'emoticon--post-menu').and('have.attr', 'aria-label');
cy.focused().tab();
// * Verify focus is on the reactions button
cy.get(`#RHS_COMMENT_reaction_${postId}`).should('be.focused').and('have.attr', 'aria-label', 'Add Reaction');
cy.focused().tab();
// * Verify focus is on the save icon
cy.get(`#RHS_COMMENT_flagIcon_${postId}`).should('be.focused').and('have.attr', 'aria-label', 'save message');
cy.focused().tab();
// * Verify focus is on the actions button
cy.get(`#RHS_COMMENT_actions_button_${postId}`).should('be.focused').and('have.attr', 'aria-label', 'actions');
cy.focused().tab();
// * Verify focus is on the more button
cy.get(`#RHS_COMMENT_button_${postId}`).should('be.focused').and('have.attr', 'aria-label', 'more');
cy.focused().tab({shift: true});
});
});

2
e2e-tests/cypress/tests/integration/channels/enterprise/accessibility/accessibility_input_fields_spec.ts
Просмотреть файл

@@ -231,7 +231,7 @@ describe('Verify Accessibility Support in different input fields', () => {
cy.get('#rhsContainer').within(() => {
// * Verify Accessibility Support in RHS input
cy.uiGetReplyTextBox().should('have.attr', 'placeholder', 'Reply to this thread...').and('have.attr', 'role', 'textbox').focus().type('test').tab({shift: true}).tab().tab();
cy.uiGetReplyTextBox().should('have.attr', 'placeholder', 'Reply to this thread...').and('have.attr', 'role', 'textbox').focus().type('test').tab();
// * Verify if the focus is on the preview button
cy.get('#PreviewInputTextButton').should('be.focused').and('have.attr', 'aria-label', 'preview').tab();

8
e2e-tests/cypress/tests/integration/channels/mark_as_unread/archive_channel_mark_as_unread_spec.js
Просмотреть файл

@@ -10,7 +10,7 @@
// Stage: @prod
// Group: @channels @mark_as_unread
import {notShowCursor, markAsUnreadShouldBeAbsent} from './helpers';
import {markAsUnreadShouldBeAbsent} from './helpers';
describe('Channels', () => {
let testUser;
@@ -75,12 +75,6 @@ describe('Channels', () => {
// * Verify the "Mark as Unread" option is absent in post menu
markAsUnreadShouldBeAbsent(post1.id);
// * Hover on the post with holding alt should show cursor
cy.get(`#post_${post1.id}`).trigger('mouseover').type('{alt}', {release: false}).should(notShowCursor);
// # Mouse click on the post holding alt
cy.get(`#post_${post1.id}`).type('{alt}', {release: false}).click();
// * Verify the post is not marked as unread
cy.get('.NotificationSeparator').should('not.exist');
});

4
e2e-tests/cypress/tests/integration/channels/mark_as_unread/mark_as_unread_using_shortcuts_spec.js
Просмотреть файл

@@ -61,8 +61,8 @@ describe('Mark as Unread', () => {
// * Hover on the post with holding alt should show cursor
cy.get(`#post_${post2.id}`).trigger('mouseover').type('{alt}', {release: false}).should(showCursor);
// # Mouse click on the post holding alt
cy.get(`#post_${post2.id}`).type('{alt}', {release: false}).click();
// # Mouse click on the post
cy.get(`#post_${post2.id}`).click();
// * Verify the post is marked as unread
verifyPostNextToNewMessageSeparator('post2');

6
e2e-tests/cypress/tests/integration/channels/messaging/message_reaction_gm_spec.js
Просмотреть файл

@@ -63,11 +63,7 @@ describe('Emoji reactions to posts/messages in GM channels', () => {
// * Verify that the Add Reaction button isn't visible
cy.findByLabelText('Add a reaction').should('not.be.visible');
// # Focus on the post since we can't hover with Cypress
cy.get(`#post_${postId}`).focus().tab().tab();
// * Verify that the Add Reaction button is now visible
cy.findByLabelText('Add a reaction').should('be.visible');
cy.get(`#post_${postId}`).trigger('mouseover');
// # Click somewhere to clear the focus
cy.get('#channelIntro').click();

1
webapp/channels/src/components/post/post_component.tsx
Просмотреть файл

@@ -526,7 +526,6 @@ function PostComponent(props: Props) {
ref={postRef}
id={getTestId()}
data-testid={postAriaLabelDivTestId}
tabIndex={0}
post={post}
className={getClassName()}
onClick={handlePostClick}

1
webapp/channels/src/components/post_edit_history/__snapshots__/post_edit_history.test.tsx.snap
Просмотреть файл

@@ -300,7 +300,6 @@ exports[`components/post_edit_history should match snapshot 1`] = `
class="post-message__text"
dir="auto"
id="rhsPostMessageText_post_id"
tabindex="0"
>
<p>
post message

1
webapp/channels/src/components/post_edit_history/edited_post_item/__snapshots__/edited_post_item.test.tsx.snap
Просмотреть файл

@@ -131,7 +131,6 @@ exports[`components/post_edit_history/edited_post_item should match snapshot whe
class="post-message__text"
dir="auto"
id="rhsPostMessageText_post_id"
tabindex="0"
>
<p>
post message

5
webapp/channels/src/components/post_view/post_message_view/__snapshots__/post_message_view.test.tsx.snap
Просмотреть файл

@@ -10,7 +10,6 @@ exports[`components/post_view/PostAttachment should match snapshot 1`] = `
dir="auto"
id="postMessageText_post_id"
onClick={[Function]}
tabIndex={0}
>
<Connect(PostMarkdown)
imageProps={
@@ -47,7 +46,6 @@ exports[`components/post_view/PostAttachment should match snapshot, on Show Less
dir="auto"
id="postMessageText_post_id"
onClick={[Function]}
tabIndex={0}
>
<Connect(PostMarkdown)
imageProps={
@@ -84,7 +82,6 @@ exports[`components/post_view/PostAttachment should match snapshot, on Show More
dir="auto"
id="postMessageText_post_id"
onClick={[Function]}
tabIndex={0}
>
<Connect(PostMarkdown)
imageProps={
@@ -139,7 +136,6 @@ exports[`components/post_view/PostAttachment should match snapshot, on edited po
dir="auto"
id="postMessageText_post_id"
onClick={[Function]}
tabIndex={0}
>
<Connect(PostMarkdown)
imageProps={
@@ -177,7 +173,6 @@ exports[`components/post_view/PostAttachment should match snapshot, on ephemeral
dir="auto"
id="postMessageText_post_id"
onClick={[Function]}
tabIndex={0}
>
<Connect(PostMarkdown)
imageProps={

1
webapp/channels/src/components/post_view/post_message_view/post_message_view.tsx
Просмотреть файл

@@ -150,7 +150,6 @@ export default class PostMessageView extends React.PureComponent<Props, State> {
maxHeight={maxHeight}
>
<div
tabIndex={0}
id={id}
className='post-message__text'
dir='auto'

1
webapp/channels/src/plugins/test/__snapshots__/post_type.test.tsx.snap
Просмотреть файл

@@ -113,7 +113,6 @@ exports[`plugins/PostMessageView should match snapshot with no extended post typ
dir="auto"
id="postMessageText_post_id"
onClick={[Function]}
tabIndex={0}
>
<Connect(PostMarkdown)
imageProps={