[MM-61595]: Removed the unnecessary dialog text from toggle button's aria-label property (#29595)

e2e-tests/cypress/tests/integration/channels/enterprise/system_console/support_packet_generation_spec.js

@@ -47,7 +47,7 @@ describe('Support Packet Generation', () => {
 const goToSupportPacketGenerationModal = () => {
     // # Open system menu and click Customer Support
     cy.findByRole('button', {name: 'Menu Icon'}).should('exist').click();
-    cy.findByRole('button', {name: 'Commercial Support dialog'}).click();
+    cy.findByRole('button', {name: 'Commercial Support'}).click();
 
     // * Ensure the download Support Packet button exist and that text regarding setting the proper settings exist
     cy.get('a.DownloadSupportPacket').should('exist');

e2e-tests/cypress/tests/integration/channels/keyboard_shortcuts/system_message_not_open_for_edit_spec.js

@@ -26,7 +26,7 @@ describe('Keyboard Shortcuts', () => {
         cy.postMessage(message);
 
         // # Open the edit the channel header modal
-        cy.get('[aria-label="Set header dialog"]').click();
+        cy.get('[aria-label="Set header"]').click();
 
         // * Verify modal is open
         cy.findByRole('dialog', {name: 'Edit Header for Off-Topic'}).within(() => {

webapp/channels/src/components/__snapshots__/toggle_modal_button.test.tsx.snap

@@ -9,7 +9,7 @@ exports[`components/ToggleModalButton component should match snapshot 1`] = `
   role="menuitem"
 >
   <button
-    aria-label="Delete Channel dialog"
+    aria-label="Delete Channel"
     className="style--none "
     id="channelDelete"
     onClick={[Function]}

webapp/channels/src/components/post_view/channel_intro_message/add_members_button.tsx

@@ -67,7 +67,6 @@ const LessThanMaxFreeUsers = ({pluginButtons}: {pluginButtons: React.ReactNode})
             {pluginButtons}
             <div className='LessThanMaxFreeUsers'>
                 <ToggleModalButton
-                    ariaLabel={formatMessage({id: 'intro_messages.inviteOthers', defaultMessage: 'Invite others to the workspace'})}
                     id='introTextInvite'
                     className='btn btn-sm btn-primary'
                     modalId={ModalIdentifiers.INVITATION}
@@ -77,6 +76,7 @@ const LessThanMaxFreeUsers = ({pluginButtons}: {pluginButtons: React.ReactNode})
                     <i
                         className='icon-email-plus-outline'
                         title={formatMessage({id: 'generic_icons.add', defaultMessage: 'Add Icon'})}
+                        aria-hidden='true'
                     />
                     <FormattedMessage
                         id='intro_messages.inviteOthersToWorkspace.button'
@@ -116,6 +116,7 @@ const MoreThanMaxFreeUsers = ({channel, pluginButtons}: {channel: Channel; plugi
                         <i
                             className='icon-account-plus-outline'
                             title={formatMessage({id: 'generic_icons.add', defaultMessage: 'Add Icon'})}
+                            aria-hidden='true'
                         />
                         {channel.group_constrained &&
                             <FormattedMessage

webapp/channels/src/components/post_view/channel_intro_message/channel_intro_message.test.tsx

@@ -140,7 +140,7 @@ describe('components/post_view/ChannelIntroMessages', () => {
 
             expect(screen.getByText('This is the start of your group message history with these teammates. ', {exact: false})).toBeInTheDocument();
 
-            const headerDialog = screen.getByLabelText('Set header dialog');
+            const headerDialog = screen.getByLabelText('Set header');
             expect(headerDialog).toBeInTheDocument();
             expect(headerDialog).toHaveTextContent('Set header');
             expect(headerDialog).toHaveClass('action-button');
@@ -204,7 +204,7 @@ describe('components/post_view/ChannelIntroMessages', () => {
             expect(image).toHaveAttribute('src', '/api/v4/users/user1/image?_=0');
             expect(image).toHaveAttribute('loading', 'lazy');
 
-            const headerDialog = screen.getByLabelText('Set header dialog');
+            const headerDialog = screen.getByLabelText('Set header');
 
             expect(headerDialog).toBeInTheDocument();
             expect(headerDialog).toHaveTextContent('Set header');

webapp/channels/src/components/profile_popover/profile_popover.test.tsx

@@ -188,7 +188,7 @@ describe('components/ProfilePopover', () => {
         const [props, initialState] = getBasePropsAndState();
 
         renderWithPluginReducers(<ProfilePopover {...props}/>, initialState);
-        expect(await screen.findByLabelText('Add to a Channel dialog')).toBeInTheDocument();
+        expect(await screen.findByLabelText('Add to a Channel')).toBeInTheDocument();
     });
 
     test('should hide add-to-channel option if not on team', async () => {

webapp/channels/src/components/sidebar/__snapshots__/invite_members_button.test.tsx.snap

@@ -45,7 +45,7 @@ exports[`components/sidebar/invite_members_button should match snapshot 1`] = `
           onClick={[Function]}
         >
           <button
-            aria-label="Invite Members dialog"
+            aria-label="Invite Members"
             className="style--none intro-links color--link cursor--pointer"
             id="inviteMembersButton"
             onClick={[Function]}
@@ -55,6 +55,7 @@ exports[`components/sidebar/invite_members_button should match snapshot 1`] = `
               className="SidebarChannelNavigator__inviteMembersLhsButton"
             >
               <i
+                aria-hidden="true"
                 className="icon-plus-box"
               />
               <FormattedMessage

webapp/channels/src/components/sidebar/invite_members_button.tsx

@@ -51,7 +51,10 @@ const InviteMembersButton = (props: Props): JSX.Element | null => {
                     className='SidebarChannelNavigator__inviteMembersLhsButton'
                     aria-label={intl.formatMessage({id: 'sidebar_left.sidebar_channel_navigator.inviteUsers', defaultMessage: 'Invite Members'})}
                 >
-                    <i className='icon-plus-box'/>
+                    <i
+                        className='icon-plus-box'
+                        aria-hidden='true'
+                    />
                     <FormattedMessage
                         id={'sidebar_left.inviteMembers'}
                         defaultMessage='Invite Members'

webapp/channels/src/components/toggle_modal_button.tsx

@@ -2,7 +2,6 @@
 // See LICENSE.txt for license information.
 
 import React, {type ComponentType, type MouseEvent, type ReactNode} from 'react';
-import {useIntl} from 'react-intl';
 import {useDispatch} from 'react-redux';
 
 import {openModal} from 'actions/views/modals';
@@ -34,8 +33,6 @@ const ToggleModalButton = ({
     id,
     role,
 }: Props) => {
-    const intl = useIntl();
-
     const dispatch = useDispatch();
 
     const show = (e: MouseEvent<HTMLButtonElement>) => {
@@ -52,13 +49,6 @@ const ToggleModalButton = ({
         dispatch(openModal(modalData));
     };
 
-    const ariaLabelElement = ariaLabel ? intl.formatMessage({
-        id: 'accessibility.button.dialog',
-        defaultMessage: '{dialogName} dialog',
-    }, {
-        dialogName: ariaLabel,
-    }) : undefined;
-
     const badge = showUnread ? <span className={'unread-badge'}/> : null;
 
     // allow callers to provide an onClick which will be called before the modal is shown
@@ -70,7 +60,7 @@ const ToggleModalButton = ({
     return (
         <button
             className={'style--none ' + className}
-            aria-label={ariaLabelElement}
+            aria-label={ariaLabel}
             onClick={clickHandler}
             id={id}
             disabled={disabled}

webapp/channels/src/components/user_settings/security/__snapshots__/user_settings_security.test.tsx.snap

@@ -107,6 +107,7 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
       modalId="access_history"
     >
       <i
+        aria-hidden="true"
         className="fa fa-clock-o"
         title="Access History Icon"
       />
@@ -129,6 +130,7 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
       modalId="activity_log"
     >
       <i
+        aria-hidden="true"
         className="fa fa-clock-o"
         title="Active Sessions Icon"
       />
@@ -248,6 +250,7 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
       modalId="access_history"
     >
       <i
+        aria-hidden="true"
         className="fa fa-clock-o"
         title="Access History Icon"
       />
@@ -270,6 +273,7 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
       modalId="activity_log"
     >
       <i
+        aria-hidden="true"
         className="fa fa-clock-o"
         title="Active Sessions Icon"
       />
@@ -389,6 +393,7 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
       modalId="access_history"
     >
       <i
+        aria-hidden="true"
         className="fa fa-clock-o"
         title="Access History Icon"
       />
@@ -411,6 +416,7 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
       modalId="activity_log"
     >
       <i
+        aria-hidden="true"
         className="fa fa-clock-o"
         title="Active Sessions Icon"
       />
@@ -530,6 +536,7 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
       modalId="access_history"
     >
       <i
+        aria-hidden="true"
         className="fa fa-clock-o"
         title="Access History Icon"
       />
@@ -552,6 +559,7 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
       modalId="activity_log"
     >
       <i
+        aria-hidden="true"
         className="fa fa-clock-o"
         title="Active Sessions Icon"
       />
@@ -672,6 +680,7 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
       modalId="access_history"
     >
       <i
+        aria-hidden="true"
         className="fa fa-clock-o"
         title="Access History Icon"
       />
@@ -694,6 +703,7 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
       modalId="activity_log"
     >
       <i
+        aria-hidden="true"
         className="fa fa-clock-o"
         title="Active Sessions Icon"
       />

webapp/channels/src/components/user_settings/security/user_settings_security.tsx

@@ -1054,6 +1054,7 @@ export class SecurityTab extends React.PureComponent<Props, State> {
                                 id: 'user.settings.security.viewHistory.icon',
                                 defaultMessage: 'Access History Icon',
                             })}
+                            aria-hidden='true'
                         />
                         <FormattedMessage
                             id='user.settings.security.viewHistory'
@@ -1072,6 +1073,7 @@ export class SecurityTab extends React.PureComponent<Props, State> {
                                 id: 'user.settings.security.logoutActiveSessions.icon',
                                 defaultMessage: 'Active Sessions Icon',
                             })}
+                            aria-hidden='true'
                         />
                         <FormattedMessage
                             id='user.settings.security.logoutActiveSessions'

webapp/channels/src/i18n/en.json

@@ -29,7 +29,6 @@
   "accessibility.button.bold": "bold",
   "accessibility.button.bulleted_list": "bulleted list",
   "accessibility.button.code": "code",
-  "accessibility.button.dialog": "{dialogName} dialog",
   "accessibility.button.formatting": "formatting",
   "accessibility.button.heading": "heading",
   "accessibility.button.hidden_controls_button": "show hidden formatting options",
@@ -4127,7 +4126,6 @@
   "intro_messages.group_message": "This is the start of your group message history with these teammates. ",
   "intro_messages.inviteGropusToChannel.button": "Add groups",
   "intro_messages.inviteMembersToChannel.button": "Add people",
-  "intro_messages.inviteOthers": "Invite others to this team",
   "intro_messages.inviteOthersToWorkspace.button": "Invite others to the workspace",
   "intro_messages.noCreator": "Public channel created on {date}.",
   "intro_messages.noCreatorPrivate": "Private channel created on {date}.",