Improve log modal styles, a11y, error message wording (#1369)

## What is this PR doing?

- Removes the tabs from log messages
- Adds a separation line between log messages
- Modifies the CORS log message (copy polishes)
- Replaces the `title` attribute with an `aria-label` (accessibility)

## What problem is it solving?

> - [x] Remove the tabs from those and other log messages in Playground
> - [x] Add a grey line between log messages to make it easier to
distinguish between different entries

See #1356

Fixes the inaccessible Search field.

## How is the problem addressed?

- Updated the styles in the CSS file.
- Edited the error message in _resources.ts_
- Updated the component code in _index.tsx_

### To-do

> - [ ] Maybe add a slight red background for severity error

@bgrgicak, How are severity levels determined?

---------

Co-authored-by: Bero <[email protected]>

Author: ironnysh

packages/playground/blueprints/src/lib/resources.ts

@@ -229,30 +229,26 @@ export abstract class FetchResource extends Resource {
 			throw new Error(
 				`Could not download "${url}".
 				Check if the URL is correct and the server is reachable.
-				If the url is reachable, the server might be blocking the request.
-				Check the console and network for more information.
+				If it is reachable, the server might be blocking the request.
+				Check the browser console and network tabs for more information.
 
-				## Does the console shows an error about "No 'Access-Control-Allow-Origin' header"?
+				## Does the console show the error "No 'Access-Control-Allow-Origin' header"?
 
-				This means the server where your file is hosted does not allow requests from other sites
-				(cross-origin requests, or CORS).	You will need to move it to another server that allows
-				cross-origin file downloads. You can learn more about CORS at
+				This means the server that hosts your file does not allow requests from other sites
+				(cross-origin requests, or CORS).	You need to move the asset to a server that allows
+				cross-origin file downloads. Learn more about CORS at
 				https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS.
 
-				If you're loading a file from https://github.com/, there's an easy fix – you can load it from
-				raw.githubusercontent.com instead. Here's how to do that:
+				If your file is on GitHub, load it from "raw.githubusercontent.com".
+				Here's how to do that:
 
-				1. Start with the original GitHub URL for the file. For example:
-				'''
-				https://github.com/username/repository/blob/branch/filename
-				'''
-				2. Replace 'github.com' with 'raw.githubusercontent.com'.
-				3. Remove the '/blob/' part of the URL.
+				1. Start with the original GitHub URL of the file. For example:
+				https://github.com/username/repository/blob/branch/filename.
+				2. Replace "github.com" with "raw.githubusercontent.com".
+				3. Remove the "/blob/" part of the URL.
 
 				The resulting URL should look like this:
-				'''
 				https://raw.githubusercontent.com/username/repository/branch/filename
-				'''
 
 				Error:
 				${e}`

packages/playground/website/src/components/log-modal/index.tsx

@@ -29,9 +29,13 @@ export function LogModal(props: { description?: JSX.Element; title?: string }) {
 			)
 			.reverse()
 			.map((log, index) => (
-				<pre className={css.logModalLog} key={index}>
-					{log}
-				</pre>
+				<div
+					className={css.logModalLog}
+					key={index}
+					dangerouslySetInnerHTML={{
+						__html: log.replace(/Error:|Fatal:/, '<mark>$&</mark>'),
+					}}
+				/>
 			));
 	}
 
@@ -45,7 +49,7 @@ export function LogModal(props: { description?: JSX.Element; title?: string }) {
 				<h2>{props.title || 'Logs'}</h2>
 				{props.description}
 				<TextControl
-					title="Search"
+					aria-label="Search"
 					placeholder="Search logs"
 					value={searchTerm}
 					onChange={setSearchTerm}

packages/playground/website/src/components/log-modal/style.module.css

@@ -8,7 +8,14 @@
 }
 
 .log-modal__log {
-	text-wrap: wrap;
+	font-family: monospace;
 	word-wrap: break-word;
+	padding: 0.5rem 0;
 	margin: 0.5rem 0;
+	white-space-collapse: preserve-breaks;
+	border-block-end: 1px dashed currentcolor;
+}
+
+.log-modal__log:has(mark) {
+	background-color: ivory;
 }