[MA-15]: Removed the unnecessary dialog text from toggle button's ari…

…a-label property
Brightscout · Dec 10, 2024 · 2242089 · 2242089
1 parent 0f5d160
commit 2242089
Show file tree

Hide file tree

Showing 10 changed files with 25 additions and 20 deletions.
diff --git a/webapp/channels/src/components/__snapshots__/toggle_modal_button.test.tsx.snap b/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]}

diff --git a/webapp/channels/src/components/post_view/channel_intro_message/add_members_button.tsx b/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

diff --git a/...pp/channels/src/components/post_view/channel_intro_message/channel_intro_message.test.tsx b/...pp/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');

diff --git a/webapp/channels/src/components/profile_popover/profile_popover.test.tsx b/webapp/channels/src/components/profile_popover/profile_popover.test.tsx
@@ -187,7 +187,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 () => {

diff --git a/webapp/channels/src/components/sidebar/__snapshots__/invite_members_button.test.tsx.snap b/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

diff --git a/webapp/channels/src/components/sidebar/invite_members_button.tsx b/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'

diff --git a/webapp/channels/src/components/toggle_modal_button.tsx b/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}

diff --git a/.../src/components/user_settings/security/__snapshots__/user_settings_security.test.tsx.snap b/.../src/components/user_settings/security/__snapshots__/user_settings_security.test.tsx.snap
@@ -103,6 +103,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"
       />
@@ -125,6 +126,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"
       />
@@ -240,6 +242,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"
       />
@@ -262,6 +265,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"
       />
@@ -377,6 +381,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"
       />
@@ -399,6 +404,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"
       />
@@ -514,6 +520,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"
       />
@@ -536,6 +543,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"
       />
@@ -652,6 +660,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"
       />
@@ -674,6 +683,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"
       />

diff --git a/webapp/channels/src/components/user_settings/security/user_settings_security.tsx b/webapp/channels/src/components/user_settings/security/user_settings_security.tsx
@@ -1041,6 +1041,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'
@@ -1059,6 +1060,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'

diff --git a/webapp/channels/src/i18n/en.json b/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",
@@ -4107,7 +4106,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}.",