fix: accessibility and usability issues

ts/Manager/App.scss

@@ -98,8 +98,33 @@ pre {
     opacity: 0;
 
     &.icon-visible {
+      opacity: 0.4;
+    }
+  }
+
+  .action-item {
+    border: 0;
+    background-color: transparent;
+    padding: 14px;
+    border-radius: 50%;
+    line-height: 0;
+    display: inline-block;
+
+    .icon {
       opacity: 0.5;
     }
+
+    &:hover {
+      background-color: var(--color-background-dark);
+
+      .icon {
+        opacity: 1;
+
+        &.icon-delete {
+          background-image: var(--icon-delete-e9322d);
+        }
+      }
+    }
   }
 
   &, & > table {
@@ -111,11 +136,9 @@ pre {
     white-space: nowrap;
   }
 
-  tr {
-    min-height: 62px;
-  }
 
   th {
+    padding: 14px 6px;
     border-bottom: 1px var(--color-background-darker) solid;
     cursor: pointer;
 
@@ -125,8 +148,8 @@ pre {
     }
   }
 
-  td, th {
-    padding: 10px;
+  td {
+    padding: 0 6px;
     position: relative;
     display: table-cell;
 
@@ -149,43 +172,13 @@ pre {
     }
 
     &.icon-col {
-      width: 32px;
-    }
-
-    a.icon {
-      margin-left: 5px;
+      width: 42px;
+      padding: 0;
     }
   }
 
-  tr:hover {
-    .icon {
-      opacity: 0.5;
-
-      &:hover {
-        opacity: 1;
-      }
-    }
-
-    .action-rename {
-      &::after {
-        opacity: 0.5;
-      }
-
-      &:hover::after {
-        opacity: 1;
-      }
-    }
-  }
-
-  .copy-to-clipboard {
-    cursor: pointer;
-    border-radius: 50%;
-    width: 20px;
-    height: 20px;
-
-    &:active {
-      background-color: var(--color-success);
-    }
+  tfoot td {
+    padding: 14px 6px;
   }
 
   .selected-row {
@@ -204,6 +197,33 @@ pre {
       width: 100%;
     }
   }
+
+  tbody tr {
+    td:first-child {
+      padding-left: 5px;
+    }
+
+    &:hover {
+      background-color: var(--color-background-hover);
+      box-shadow: 5px 0 0 var(--color-primary-element) inset;
+
+      .action-rename {
+        &::after {
+          opacity: 0.5;
+        }
+
+        &:hover::after {
+          opacity: 1;
+        }
+      }
+    }
+  }
+
+  .copy-to-clipboard {
+    &:active {
+      background-color: var(--color-success) !important;
+    }
+  }
 }
 
 .bbb-form-element {

ts/Manager/EditRoom.tsx

@@ -13,9 +13,10 @@ const EditRoom: React.FC<Props> = ({ room, restriction, updateProperty }) => {
 
 	return (
 		<>
-			<a className="icon icon-edit icon-visible"
-				onClick={ev => { ev.preventDefault(), setOpen(true); }}
-				title={t('bbb', 'Edit')} />
+			<button onClick={ev => { ev.preventDefault(), setOpen(true); }}
+				title={t('bbb', 'Edit')} className="action-item">
+				<span className="icon icon-edit icon-visible"></span>
+			</button>
 
 			<EditRoomDialog room={room} restriction={restriction} updateProperty={updateProperty} open={open} setOpen={setOpen} />
 		</>

ts/Manager/RecordingRow.tsx

@@ -12,15 +12,21 @@ const RecordingRow: React.FC<Props> = ({recording, deleteRecording, storeRecordi
 	return (
 		<tr key={recording.id}>
 			<td className="start icon-col">
-				<a href={recording.url} className="icon icon-external icon-visible" target="_blank" rel="noopener noreferrer"></a>
+				<a href={recording.url} className="action-item" target="_blank" rel="noopener noreferrer">
+					<span className="icon icon-external icon-visible"></span>
+				</a>
 			</td>
 			<td className="share icon-col">
 				<CopyToClipboard text={recording.url}>
-					<span className="icon icon-clippy icon-visible copy-to-clipboard" ></span>
+					<button className="action-item copy-to-clipboard">
+						<span className="icon icon-clippy icon-visible" ></span>
+					</button>
 				</CopyToClipboard>
 			</td>
 			<td className="icon-col">
-				<a onClick={() => storeRecording(recording)} className="icon icon-add-shortcut icon-visible"></a>
+				<button className="action-item" onClick={() => storeRecording(recording)}>
+					<span className="icon icon-add-shortcut icon-visible"></span>
+				</button>
 			</td>
 			<td>
 				{(new Date(recording.startTime)).toLocaleString()}
@@ -35,9 +41,9 @@ const RecordingRow: React.FC<Props> = ({recording, deleteRecording, storeRecordi
 				{recording.type}
 			</td>
 			<td className="remove icon-col">
-				<a className="icon icon-delete icon-visible"
-					onClick={() => deleteRecording(recording)}
-					title={t('bbb', 'Delete')} />
+				<button className="action-item" onClick={() => deleteRecording(recording)} title={t('bbb', 'Delete')}>
+					<span className="icon icon-delete icon-visible"></span>
+				</button>
 			</td>
 		</tr>
 	);

ts/Manager/RoomRow.tsx

@@ -187,15 +187,21 @@ const RoomRow: React.FC<Props> = (props) => {
 		<>
 			<tr className={showRecordings ? 'selected-row' : ''}>
 				<td className="start icon-col">
-					<a href={api.getRoomUrl(room)} className="icon icon-play icon-visible" target="_blank" rel="noopener noreferrer"></a>
+					<a href={api.getRoomUrl(room)} className="action-item" target="_blank" rel="noopener noreferrer">
+						<span className="icon icon-play icon-visible"></span>
+					</a>
 				</td>
 				<td className="share icon-col">
 					<CopyToClipboard text={api.getRoomUrl(room)}>
-						<span className="icon icon-clippy icon-visible copy-to-clipboard" ></span>
+						<button className="action-item copy-to-clipboard">
+							<span className="icon icon-clippy icon-visible" ></span>
+						</button>
 					</CopyToClipboard>
 				</td>
 				<td className="store icon-col">
-					<a onClick={() => storeRoom()} className="icon icon-add-shortcut icon-visible"></a>
+					<button className="action-item" onClick={() => storeRoom()}>
+						<span className="icon icon-add-shortcut icon-visible"></span>
+					</button>
 				</td>
 				<td className="name">
 					{edit('name')}
@@ -219,9 +225,9 @@ const RoomRow: React.FC<Props> = (props) => {
 					<EditRoom room={props.room} restriction={props.restriction} updateProperty={updateRoom} />
 				</td>
 				<td className="remove icon-col">
-					<a className="icon icon-delete icon-visible"
-						onClick={deleteRow as any}
-						title={t('bbb', 'Delete')} />
+					<button className="action-item" onClick={deleteRow as any} title={t('bbb', 'Delete')}>
+						<span className="icon icon-delete icon-visible"></span>
+					</button>
 				</td>
 			</tr>
 			{showRecordings && <tr className="recordings-row">

ts/Manager/ShareWith.scss

@@ -12,7 +12,7 @@
     align-items: center;
 
     &:hover {
-      background-color: var(--color-background-dark);
+      background-color: var(--color-background-hover);
     }
 
     .avatardiv {
@@ -29,11 +29,6 @@
       }
     }
 
-    .icon {
-      height: 44px;
-      width: 44px;
-    }
-
     &__label {
       padding: 0 1em;
       flex-grow: 1;

ts/Manager/ShareWith.tsx

@@ -89,17 +89,21 @@ const ShareWith: React.FC<Props> = ({ room, permission, shares: allShares, setSh
 									{(share.permission === Permission.Admin) && ` (${t('bbb', 'admin')})`}</h5>
 							</div>
 							{(share.id > -1 && permission === Permission.Moderator && isOwner) && <div className="bbb-shareWith__item__action">
-								<a className={`icon icon-shared icon-visible ${share.permission === Permission.Admin ? 'bbb-icon-selected' : 'bbb-icon-unselected'}`}
+								<button className="action-item"
 									onClick={ev => {
 										ev.preventDefault();
 										toggleAdminShare(share);
 									}}
-									title={t('bbb', 'Share')} />
+									title={t('bbb', 'Share')}>
+									<span className={`icon icon-shared icon-visible ${share.permission === Permission.Admin ? 'bbb-icon-selected' : 'bbb-icon-unselected'}`}></span>
+								</button>
 							</div>}
 							{(share.id > -1 && isOwner) && <div className="bbb-shareWith__item__action">
-								<a className="icon icon-delete icon-visible"
+								<button className="action-item"
 									onClick={ev => {ev.preventDefault(); deleteRoomShare(share.id);}}
-									title={t('bbb', 'Delete')} />
+									title={t('bbb', 'Delete')}>
+									<span className="icon icon-delete icon-visible"></span>
+								</button>
 							</div>}
 						</li>
 					);