[MA-16]: Ensure the Add button is accessible with keyboard

Brightscout · Dec 12, 2024 · a4b0a41 · a4b0a41
1 parent 7df4727
commit a4b0a41
Show file tree

Hide file tree

Showing 13 changed files with 72 additions and 41 deletions.
diff --git a/...nents/add_groups_to_channel_modal/__snapshots__/add_groups_to_channel_modal.test.tsx.snap b/...nents/add_groups_to_channel_modal/__snapshots__/add_groups_to_channel_modal.test.tsx.snap
@@ -157,13 +157,14 @@ exports[`components/AddGroupsToChannelModal should match when renderOption is ca
   <div
     className="more-modal__actions"
   >
-    <div
+    <button
+      aria-label="Add groups to channel"
       className="more-modal__actions--round"
     >
       <i
         className="icon icon-plus"
       />
-    </div>
+    </button>
   </div>
 </div>
 `;
@@ -206,13 +207,14 @@ exports[`components/AddGroupsToChannelModal should match when renderOption is ca
   <div
     className="more-modal__actions"
   >
-    <div
+    <button
+      aria-label="Add groups to channel"
       className="more-modal__actions--round"
     >
       <i
         className="icon icon-plus"
       />
-    </div>
+    </button>
   </div>
 </div>
 `;
@@ -255,13 +257,14 @@ exports[`components/AddGroupsToChannelModal should match when renderOption is ca
   <div
     className="more-modal__actions"
   >
-    <div
+    <button
+      aria-label="Add groups to channel"
       className="more-modal__actions--round"
     >
       <i
         className="icon icon-plus"
       />
-    </div>
+    </button>
   </div>
 </div>
 `;
diff --git a/webapp/channels/src/components/add_groups_to_channel_modal/add_groups_to_channel_modal.tsx b/webapp/channels/src/components/add_groups_to_channel_modal/add_groups_to_channel_modal.tsx
@@ -216,9 +216,12 @@ export class AddGroupsToChannelModal extends React.PureComponent<Props, State> {
                     </div>
                 </div>
                 <div className='more-modal__actions'>
-                    <div className='more-modal__actions--round'>
+                    <button
+                        className='more-modal__actions--round'
+                        aria-label='Add groups to channel'
+                    >
                         <i className='icon icon-plus'/>
-                    </div>
+                    </button>
                 </div>
             </div>
         );

diff --git a/.../components/add_groups_to_team_modal/__snapshots__/add_groups_to_team_modal.test.tsx.snap b/.../components/add_groups_to_team_modal/__snapshots__/add_groups_to_team_modal.test.tsx.snap
@@ -196,13 +196,14 @@ exports[`components/AddGroupsToTeamModal should match when renderOption is calle
   <div
     className="more-modal__actions"
   >
-    <div
+    <button
+      aria-label="Add groups to team"
       className="more-modal__actions--round"
     >
       <i
         className="icon icon-plus"
       />
-    </div>
+    </button>
   </div>
 </div>
 `;
@@ -247,13 +248,14 @@ exports[`components/AddGroupsToTeamModal should match when renderOption is calle
   <div
     className="more-modal__actions"
   >
-    <div
+    <button
+      aria-label="Add groups to team"
       className="more-modal__actions--round"
     >
       <i
         className="icon icon-plus"
       />
-    </div>
+    </button>
   </div>
 </div>
 `;
diff --git a/webapp/channels/src/components/add_groups_to_team_modal/add_groups_to_team_modal.tsx b/webapp/channels/src/components/add_groups_to_team_modal/add_groups_to_team_modal.tsx
@@ -223,9 +223,12 @@ export class AddGroupsToTeamModal extends React.PureComponent<Props, State> {
                     </div>
                 </div>
                 <div className='more-modal__actions'>
-                    <div className='more-modal__actions--round'>
+                    <button
+                        className='more-modal__actions--round'
+                        aria-label='Add groups to team'
+                    >
                         <i className='icon icon-plus'/>
-                    </div>
+                    </button>
                 </div>
             </div>
         );

diff --git a/...ls/src/components/add_user_to_group_multiselect/multiselect_option/multiselect_option.tsx b/...ls/src/components/add_user_to_group_multiselect/multiselect_option/multiselect_option.tsx
@@ -56,11 +56,14 @@ const MultiSelectOption = React.forwardRef(({
                 </div>
             </div>
             <div className='more-modal__actions'>
-                <div className='more-modal__actions--round'>
+                <button
+                    className='more-modal__actions--round'
+                    aria-label={`Select Option ${option.label}`}
+                >
                     <i
                         className='icon icon-plus'
                     />
-                </div>
+                </button>
             </div>
         </div>
     );

diff --git a/webapp/channels/src/components/add_users_to_team_modal/add_users_to_team_modal.tsx b/webapp/channels/src/components/add_users_to_team_modal/add_users_to_team_modal.tsx
@@ -135,11 +135,14 @@ export class AddUsersToTeamModal extends React.PureComponent<Props, State> {
                     </div>
                 </div>
                 <div className='more-modal__actions'>
-                    <div className='more-modal__actions--round'>
+                    <button
+                        className='more-modal__actions--round'
+                        aria-label='Add users to team'
+                    >
                         <i
                             className='icon icon-plus'
                         />
-                    </div>
+                    </button>
                 </div>
             </div>
         );

diff --git a/...dmin_console/system_roles/system_role/add_users_to_role_modal/add_users_to_role_modal.tsx b/...dmin_console/system_roles/system_role/add_users_to_role_modal/add_users_to_role_modal.tsx
@@ -137,11 +137,14 @@ export class AddUsersToRoleModal extends React.PureComponent<Props, State> {
                     </div>
                 </div>
                 <div className='more-modal__actions'>
-                    <div className='more-modal__actions--round'>
+                    <button
+                        className='more-modal__actions--round'
+                        aria-label='Add users to role'
+                    >
                         <i
                             className='icon icon-plus'
                         />
-                    </div>
+                    </button>
                 </div>
             </div>
         );

diff --git a/webapp/channels/src/components/channel_invite_modal/channel_invite_modal.tsx b/webapp/channels/src/components/channel_invite_modal/channel_invite_modal.tsx
@@ -408,13 +408,9 @@ export class ChannelInviteModal extends React.PureComponent<Props, State> {
                                 {displayName}
                                 {option.is_bot && <BotTag/>}
                                 {isGuest(option.roles) && <GuestTag className='popoverlist'/>}
-                                {displayName === option.username ?
-                                    null :
-                                    <UsernameSpan
-                                        className='ml-2 light'
-                                    >
-                                        {'@'}{option.username}
-                                    </UsernameSpan>
+                                {displayName === option.username ? null : <UsernameSpan className='ml-2 light'>
+                                    {'@'}{option.username}
+                                </UsernameSpan>
                                 }
                                 <UserMappingSpan
                                     className='light'
@@ -425,11 +421,14 @@ export class ChannelInviteModal extends React.PureComponent<Props, State> {
                         </div>
                     </div>
                     <div className='more-modal__actions'>
-                        <div className='more-modal__actions--round'>
+                        <button
+                            className='more-modal__actions--round'
+                            aria-label='Add channel to invite'
+                        >
                             <i
                                 className='icon icon-plus'
                             />
-                        </div>
+                        </button>
                     </div>
                 </div>
             );

diff --git a/webapp/channels/src/components/channel_selector_modal/channel_selector_modal.tsx b/webapp/channels/src/components/channel_selector_modal/channel_selector_modal.tsx
@@ -186,9 +186,12 @@ export class ChannelSelectorModal extends React.PureComponent<Props, State> {
                     </div>
                 </div>
                 <div className='more-modal__actions'>
-                    <div className='more-modal__actions--round'>
+                    <button
+                        className='more-modal__actions--round'
+                        aria-label='Select channel'
+                    >
                         <i className='icon icon-plus'/>
-                    </div>
+                    </button>
                 </div>
             </div>
         );

diff --git a/...nnels/src/components/more_direct_channels/list_item/__snapshots__/list_item.test.tsx.snap b/...nnels/src/components/more_direct_channels/list_item/__snapshots__/list_item.test.tsx.snap
@@ -33,13 +33,14 @@ exports[`ListItem should match snapshot when rendering GroupChannel 1`] = `
   <div
     className="more-modal__actions"
   >
-    <div
+    <button
+      aria-label="Add option undefined"
       className="more-modal__actions--round"
     >
       <i
         className="icon icon-plus"
       />
-    </div>
+    </button>
   </div>
 </div>
 `;
@@ -62,13 +63,14 @@ exports[`ListItem should match snapshot when rendering user 1`] = `
   <div
     className="more-modal__actions"
   >
-    <div
+    <button
+      aria-label="Add option undefined"
       className="more-modal__actions--round"
     >
       <i
         className="icon icon-plus"
       />
-    </div>
+    </button>
   </div>
 </div>
 `;
diff --git a/webapp/channels/src/components/more_direct_channels/list_item/list_item.tsx b/webapp/channels/src/components/more_direct_channels/list_item/list_item.tsx
@@ -75,9 +75,12 @@ const ListItem = React.forwardRef((props: Props, ref?: React.Ref<HTMLDivElement>
             }
 
             <div className='more-modal__actions'>
-                <div className='more-modal__actions--round'>
+                <button
+                    className='more-modal__actions--round'
+                    aria-label={`Add option ${option.label}`}
+                >
                     <i className='icon icon-plus'/>
-                </div>
+                </button>
             </div>
         </div>
     );

diff --git a/webapp/channels/src/components/team_selector_modal/team_selector_modal.tsx b/webapp/channels/src/components/team_selector_modal/team_selector_modal.tsx
@@ -190,9 +190,12 @@ export class TeamSelectorModal extends React.PureComponent<Props, State> {
                     </div>
                 </div>
                 <div className='more-modal__actions'>
-                    <div className='more-modal__actions--round'>
+                    <button
+                        className='more-modal__actions--round'
+                        aria-label={`Select team ${option.label}`}
+                    >
                         <i className='fa fa-plus'/>
-                    </div>
+                    </button>
                 </div>
             </div>
         );

diff --git a/webapp/channels/src/sass/components/_modal.scss b/webapp/channels/src/sass/components/_modal.scss
@@ -933,9 +933,10 @@
         display: none;
         width: 32px;
         height: 32px;
-        line-height: 32px;
+        padding: 0;
+        border: none;
         opacity: 0.75;
-        text-align: center;
+        text-align: center  
     }
 
     .more-modal__right {