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

Brightscout · Dec 11, 2024 · 527beac · 527beac
1 parent 7df4727
commit 527beac
Show file tree

Hide file tree

Showing 10 changed files with 20 additions and 19 deletions.
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,9 @@ 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'>
                         <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,9 @@ 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'>
                         <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,11 @@ const MultiSelectOption = React.forwardRef(({
                 </div>
             </div>
             <div className='more-modal__actions'>
-                <div className='more-modal__actions--round'>
+                <button className='more-modal__actions--round'>
                     <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,11 @@ 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'>
                         <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,11 @@ 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'>
                         <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
@@ -425,11 +425,11 @@ 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'>
                             <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,9 @@ 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'>
                         <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,9 @@ 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'>
                     <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,9 @@ 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'>
                         <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
@@ -931,11 +931,12 @@
 
     .more-modal__actions--round {
         display: none;
+        border: none;
         width: 32px;
         height: 32px;
-        line-height: 32px;
         opacity: 0.75;
         text-align: center;
+        padding: 0  
     }
 
     .more-modal__right {