From b238bf57c5e52a51255fcf1496cfa6c8cd82dd46 Mon Sep 17 00:00:00 2001
From: sualko <klaus@jsxc.org>
Date: Sat, 23 Jan 2021 11:36:59 +0100
Subject: [PATCH] fix: accessibility and usability issues

---
 ts/Manager/App.scss         | 98 ++++++++++++++++++++++---------------
 ts/Manager/EditRoom.tsx     |  7 +--
 ts/Manager/RecordingRow.tsx | 18 ++++---
 ts/Manager/RoomRow.tsx      | 18 ++++---
 ts/Manager/ShareWith.scss   |  7 +--
 ts/Manager/ShareWith.tsx    | 12 +++--
 6 files changed, 96 insertions(+), 64 deletions(-)

diff --git a/ts/Manager/App.scss b/ts/Manager/App.scss
index 027401b..175fbda 100644
--- a/ts/Manager/App.scss
+++ b/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 {
diff --git a/ts/Manager/EditRoom.tsx b/ts/Manager/EditRoom.tsx
index 783224f..0b661bb 100644
--- a/ts/Manager/EditRoom.tsx
+++ b/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} />
 		</>
diff --git a/ts/Manager/RecordingRow.tsx b/ts/Manager/RecordingRow.tsx
index a07ced3..1ab5329 100644
--- a/ts/Manager/RecordingRow.tsx
+++ b/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>
 	);
diff --git a/ts/Manager/RoomRow.tsx b/ts/Manager/RoomRow.tsx
index 17e65f3..26ee463 100644
--- a/ts/Manager/RoomRow.tsx
+++ b/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">
diff --git a/ts/Manager/ShareWith.scss b/ts/Manager/ShareWith.scss
index c0f11a4..5ea9b0b 100644
--- a/ts/Manager/ShareWith.scss
+++ b/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;
diff --git a/ts/Manager/ShareWith.tsx b/ts/Manager/ShareWith.tsx
index d135123..7ba623b 100644
--- a/ts/Manager/ShareWith.tsx
+++ b/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>
 					);