Make metadata editor more accessible.

This commit is contained in:
durstann
2026-08-07 20:25:32 -07:00
parent a280304776
commit 9275ac4d12
4 changed files with 12 additions and 10 deletions
@@ -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>
@@ -215,7 +215,7 @@
}
a {
color:black;
text-decoration:unset;
text-underline-offset:0.2em;
}
}
@@ -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);