Merge pull request #343 from codesnippetspro/a11y-cloud-snippet-title

Fix: accessible title in cloud snippet search results

Author: sheabunge

src/css/manage/_cloud-community.scss

@@ -81,6 +81,25 @@
 
 	.cloud-snippet {
 		padding: 24px;
+
+		.cloud-snippet-title-button {
+			display: inline;
+			margin: 0;
+			padding: 0;
+			border: none;
+			background: none;
+			font: inherit;
+			color: #2271b1;
+			cursor: pointer;
+			text-align: start;
+			text-decoration: underline;
+
+			&:focus-visible {
+				outline: 2px solid #2271b1;
+				outline-offset: 2px;
+				border-radius: 2px;
+			}
+		}
 	}
 
 	.cloud-snippet-meta {

src/js/components/ManageMenu/CommunityCloud/SearchResults.tsx

@@ -30,16 +30,16 @@ interface CloudSnippetDetailsProps {
 const CloudSnippetDetails: React.FC<CloudSnippetDetailsProps> = ({ snippet, setIsPreviewOpen }) =>
 	<div className="cloud-snippet">
 		<h3>
-			<a
-				href="#"
+			<button
+				type="button"
+				className="cloud-snippet-title-button"
 				title={__('Preview this snippet', 'code-snippets')}
-				onClick={event => {
-					event.preventDefault()
+				onClick={() => {
 					setIsPreviewOpen(true)
 				}}
 			>
 				{snippet.name}
-			</a>
+			</button>
 		</h3>
 
 		<div className="cloud-snippet-meta">