From 9275ac4d12cd279902c69d3bbed0cfd3b38fcece Mon Sep 17 00:00:00 2001
From: durstann <durstann@yahoo.com>
Date: Sat, 1 Aug 2026 00:05:05 -0700
Subject: [PATCH] Make metadata editor more accessible.

---
 .../editor/metadataEditor/metadataEditor.jsx   | 18 ++++++++++--------
 .../editor/metadataEditor/metadataEditor.less  |  2 +-
 client/homebrew/editor/tagInput/tagInput.jsx   |  1 +
 shared/naturalcrit/styles/core.less            |  1 -
 4 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/client/homebrew/editor/metadataEditor/metadataEditor.jsx b/client/homebrew/editor/metadataEditor/metadataEditor.jsx
index 14ea97305..9377aa41c 100644
--- a/client/homebrew/editor/metadataEditor/metadataEditor.jsx
+++ b/client/homebrew/editor/metadataEditor/metadataEditor.jsx
@@ -157,11 +157,11 @@ const MetadataEditor = createReactClass({
 	renderPublish : function(){
 		if(this.props.metadata.published){
 			return <button className='unpublish' onClick={()=>this.handlePublish(false)}>
-				<i className='fas fa-ban' /> unpublish
+				<i className='fas fa-ban' aria-hidden='true' /> unpublish
 			</button>;
 		} else {
 			return <button className='publish' onClick={()=>this.handlePublish(true)}>
-				<i className='fas fa-globe' /> publish
+				<i className='fas fa-globe' aria-hidden='true' /> publish
 			</button>;
 		}
 	},
@@ -359,26 +359,28 @@ const MetadataEditor = createReactClass({
 			<h1>Properties Editor</h1>
 
 			<div className='field title'>
-				<label>title</label>
-				<input type='text' className='value'
+				<label for='title_field'>title</label>
+				<input type='text' id='title_field' className='value'
 					defaultValue={this.props.metadata.title}
 					onChange={(e)=>this.handleFieldChange('title', e)} />
 			</div>
 			<div className='field-group'>
 				<div className='field-column'>
 					<div className='field description'>
-						<label>description</label>
-						<textarea defaultValue={this.props.metadata.description} className='value'
+						<label for='description_field'>description</label>
+						<textarea id='description_field' defaultValue={this.props.metadata.description} className='value'
 							onChange={(e)=>this.handleFieldChange('description', e)} />
 					</div>
 					<div className='field thumbnail'>
-						<label>thumbnail</label>
+						<label for='thumbnail_field'>thumbnail</label>
 						<input type='text'
+							id='thumbnail_field'
 							defaultValue={this.props.metadata.thumbnail}
 							placeholder='https://my.thumbnail.url'
 							className='value'
 							onChange={(e)=>this.handleFieldChange('thumbnail', e)} />
-						<button className='display' onClick={this.toggleThumbnailDisplay}>
+						<button className='display' onClick={this.toggleThumbnailDisplay}
+						        aria-label={`${this.state.showThumbnail ? 'hide thumbnail' : 'show thumbnail'}`}>
 							<i className={`fas fa-caret-${this.state.showThumbnail ? 'right' : 'left'}`} />
 						</button>
 					</div>
diff --git a/client/homebrew/editor/metadataEditor/metadataEditor.less b/client/homebrew/editor/metadataEditor/metadataEditor.less
index cd4fb38a1..3d3267f80 100644
--- a/client/homebrew/editor/metadataEditor/metadataEditor.less
+++ b/client/homebrew/editor/metadataEditor/metadataEditor.less
@@ -215,7 +215,7 @@
 		}
 		a {
 			color:black;
-			text-decoration:unset;
+			text-underline-offset:0.2em;
 		}
 	}
 
diff --git a/client/homebrew/editor/tagInput/tagInput.jsx b/client/homebrew/editor/tagInput/tagInput.jsx
index aee33e8f6..2ec4b3db9 100644
--- a/client/homebrew/editor/tagInput/tagInput.jsx
+++ b/client/homebrew/editor/tagInput/tagInput.jsx
@@ -181,6 +181,7 @@ const TagInput = ({ tooltip, label, valuePatterns, values = [], unique = true, p
 						{t.value}
 						<button
 							type='button'
+							aria-label={`remove ${t.value} tag`}
 							onClick={(e)=>{
 								e.stopPropagation();
 								removeTag(i);
diff --git a/shared/naturalcrit/styles/core.less b/shared/naturalcrit/styles/core.less
index 3ff3e37fe..02d3dbab8 100644
--- a/shared/naturalcrit/styles/core.less
+++ b/shared/naturalcrit/styles/core.less
@@ -23,7 +23,6 @@ html,body, #reactRoot {
 	text-transform   : uppercase;
 	text-decoration  : none;
 	cursor           : pointer;
-	outline          : none;
 	background-color : @backgroundColor;
 	border           : none;
 	&:hover { background-color : darken(@backgroundColor, 5%); }