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

Set html structure to ul/li. Set roles.

Browse Source 
The snippets are a `menubar` in terms of role, and is a list of items (`menitem`, `li`).

Note for myself:  submenus are `menu` roles that immediately follow their triggering `menuitem` and are direct children of the parent `menu`, per WCAG.  This is done in this commit.
This commit is contained in:
Gazook89
2026-07-08 22:06:00 -05:00
parent d25e572ab2
commit 8e720d1c60
2 changed files with 14 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/homebrew/editor/snippetbar/snippetbar.jsx
+10 -8
View File
@@ -188,7 +188,7 @@ const Snippetbar = createReactClass({
const snippets = this.state.snippets.filter((snippetGroup)=>snippetGroup.view === this.props.view);
if(snippets.length === 0) return null;
return <div className='snippets'>
return <ul className='snippets' role='menubar'>
{_.map(snippets, (snippetGroup)=>{
return <SnippetGroup
brew={this.props.brew}
@@ -201,7 +201,7 @@ const Snippetbar = createReactClass({
/>;
})
}
</div>;
</ul>;
},
replaceContent : function(item){
@@ -327,12 +327,14 @@ const SnippetGroup = createReactClass({
return _.map(snippets, (snippet)=>{
if(!snippet.subsnippets){
return (
<button className='menu-item' key={snippet.name} onClick={(e)=>this.handleSnippetClick(e, snippet)} role='menuitem'>
<i className={snippet.icon} />
<span className={`name${snippet.disabled ? ' disabled' : ''}`} title={snippet.name}>{snippet.name}</span>
{snippet.experimental && <span className='beta'>beta</span>}
{snippet.disabled && <span className='beta' title='temporarily disabled due to large slowdown; under re-design'>disabled</span>}
</button>
<li key={snippet.name} role='none'>
<button className='menu-item' onClick={(e)=>this.handleSnippetClick(e, snippet)} role='menuitem'>
<i className={snippet.icon} />
<span className={`name${snippet.disabled ? ' disabled' : ''}`} title={snippet.name}>{snippet.name}</span>
{snippet.experimental && <span className='beta'>beta</span>}
{snippet.disabled && <span className='beta' title='temporarily disabled due to large slowdown; under re-design'>disabled</span>}
</button>
</li>
);
} else if(snippet.subsnippets){
return (