Use btn element for clickable avatars

Automattic · Oct 15, 2021 · e2d8c82 · e2d8c82
1 parent fe83788
commit e2d8c82
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 7 deletions.
diff --git a/src/components/collaborative-editing/components/avatars/index.js b/src/components/collaborative-editing/components/avatars/index.js
@@ -39,14 +39,11 @@ export function CollaborativeEditingAvatar( { peer, onAvatarClick } ) {
 	const [ isVisible, setIsVisible ] = useState( false );
 
 	return (
-		<div
-			className="iso-editor-collab-avatars__avatar"
+		<button
+			className="iso-editor-collab-avatars__avatar-btn"
 			aria-label={ peer.name }
 			onMouseEnter={ () => setIsVisible( true ) }
 			onMouseLeave={ () => setIsVisible( false ) }
-			tabIndex={ -1 }
-			role="button"
-			onKeyDown={ () => {} }
 			onClick={ () => onAvatarClick( peer ) }
 			style={ {
 				borderColor: peer.color,
@@ -63,7 +60,7 @@ export function CollaborativeEditingAvatar( { peer, onAvatarClick } ) {
 			) : (
 				<span className="iso-editor-collab-avatars__name-initial">{ peer.name.charAt( 0 ) }</span>
 			) }
-		</div>
+		</button>
 	);
 }
 

diff --git a/src/components/collaborative-editing/components/avatars/style.scss b/src/components/collaborative-editing/components/avatars/style.scss
@@ -10,7 +10,7 @@ $avatarBorderWidth: 2px;
 	margin: 0 8px;
 }
 
-.iso-editor-collab-avatars__avatar {
+.iso-editor-collab-avatars__avatar-btn {
 	display: flex;
 	justify-content: center;
 	align-items: center;
@@ -20,6 +20,16 @@ $avatarBorderWidth: 2px;
 	border-width: $avatarBorderWidth;
 	border-style: solid;
 
+	// Button reset styles
+	margin: 0;
+	padding: 0;
+	background: transparent;
+	-webkit-appearance: none;
+
+	&:hover {
+		cursor: pointer;
+	}
+
 	& + & {
 		margin-left: -4px;
 		box-shadow: 0 0 0 2px $white;