f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-09-20 16:42:58 +00:00
Code Wiki Activity

Make metadata editor more accessible.

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
client/homebrew/editor/metadataEditor/metadataEditor.jsx
+10 -8
View File
@@ -157,11 +157,11 @@ const MetadataEditor = createReactClass({
renderPublish : function(){ renderPublish : function(){
if(this.props.metadata.published){ if(this.props.metadata.published){
return <button className='unpublish' onClick={()=>this.handlePublish(false)}> return <button className='unpublish' onClick={()=>this.handlePublish(false)}>
<i className='fas fa-ban' /> unpublish <i className='fas fa-ban' aria-hidden='true' /> unpublish
</button>; </button>;
} else { } else {
return <button className='publish' onClick={()=>this.handlePublish(true)}> return <button className='publish' onClick={()=>this.handlePublish(true)}>
<i className='fas fa-globe' /> publish <i className='fas fa-globe' aria-hidden='true' /> publish
</button>; </button>;
} }
}, },
@@ -359,26 +359,28 @@ const MetadataEditor = createReactClass({
<h1>Properties Editor</h1> <h1>Properties Editor</h1>
<div className='field title'> <div className='field title'>
<label>title</label> <label for='title_field'>title</label>
<input type='text' className='value' <input type='text' id='title_field' className='value'
defaultValue={this.props.metadata.title} defaultValue={this.props.metadata.title}
onChange={(e)=>this.handleFieldChange('title', e)} /> onChange={(e)=>this.handleFieldChange('title', e)} />
</div> </div>
<div className='field-group'> <div className='field-group'>
<div className='field-column'> <div className='field-column'>
<div className='field description'> <div className='field description'>
<label>description</label> <label for='description_field'>description</label>
<textarea defaultValue={this.props.metadata.description} className='value' <textarea id='description_field' defaultValue={this.props.metadata.description} className='value'
onChange={(e)=>this.handleFieldChange('description', e)} /> onChange={(e)=>this.handleFieldChange('description', e)} />
</div> </div>
<div className='field thumbnail'> <div className='field thumbnail'>
<label>thumbnail</label> <label for='thumbnail_field'>thumbnail</label>
<input type='text' <input type='text'
id='thumbnail_field'
defaultValue={this.props.metadata.thumbnail} defaultValue={this.props.metadata.thumbnail}
placeholder='https://my.thumbnail.url' placeholder='https://my.thumbnail.url'
className='value' className='value'
onChange={(e)=>this.handleFieldChange('thumbnail', e)} /> 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'}`} /> <i className={`fas fa-caret-${this.state.showThumbnail ? 'right' : 'left'}`} />
</button> </button>
</div> </div>
client/homebrew/editor/metadataEditor/metadataEditor.less
+1 -1
View File
@@ -215,7 +215,7 @@
} }
a { a {
color:black; color:black;
text-decoration:unset; text-underline-offset:0.2em;
} }
} }
client/homebrew/editor/tagInput/tagInput.jsx
+1
View File
@@ -181,6 +181,7 @@ const TagInput = ({ tooltip, label, valuePatterns, values = [], unique = true, p
{t.value} {t.value}
<button <button
type='button' type='button'
aria-label={`remove ${t.value} tag`}
onClick={(e)=>{ onClick={(e)=>{
e.stopPropagation(); e.stopPropagation();
removeTag(i); removeTag(i);
shared/naturalcrit/styles/core.less
-1
View File
@@ -23,7 +23,6 @@ html,body, #reactRoot {
text-transform : uppercase; text-transform : uppercase;
text-decoration : none; text-decoration : none;
cursor : pointer; cursor : pointer;
outline : none;
background-color : @backgroundColor; background-color : @backgroundColor;
border : none; border : none;
&:hover { background-color : darken(@backgroundColor, 5%); } &:hover { background-color : darken(@backgroundColor, 5%); }