f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-09-23 14:02: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/components/dropdown/dropdown.jsx
+4 -4
View File
@@ -92,7 +92,7 @@ const Dropdown = ({ groupName, className = null, icon, children, color = null, c
}; };
return ( return (
<div className={['menu-wrapper', className].join(' ')} role='none' > <li className='menu-wrapper' role='none'>
<button <button
id={`${menuId}-trigger`} id={`${menuId}-trigger`}
className={['menu-item', color].join(' ')} className={['menu-item', color].join(' ')}
@@ -105,7 +105,7 @@ const Dropdown = ({ groupName, className = null, icon, children, color = null, c
{trigger(groupName, icon)} {trigger(groupName, icon)}
</button> </button>
<MenuDepthContext.Provider value={depth + 1}> <MenuDepthContext.Provider value={depth + 1}>
<div <ul
ref={menuRef} ref={menuRef}
id={menuId} id={menuId}
className='menu-list' className='menu-list'
@@ -114,9 +114,9 @@ const Dropdown = ({ groupName, className = null, icon, children, color = null, c
onClick={handleMenuActionClick} onClick={handleMenuActionClick}
> >
{children} {children}
</div> </ul>
</MenuDepthContext.Provider> </MenuDepthContext.Provider>
</div> </li>
); );
}; };
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); const snippets = this.state.snippets.filter((snippetGroup)=>snippetGroup.view === this.props.view);
if(snippets.length === 0) return null; if(snippets.length === 0) return null;
return <div className='snippets'> return <ul className='snippets' role='menubar'>
{_.map(snippets, (snippetGroup)=>{ {_.map(snippets, (snippetGroup)=>{
return <SnippetGroup return <SnippetGroup
brew={this.props.brew} brew={this.props.brew}
@@ -201,7 +201,7 @@ const Snippetbar = createReactClass({
/>; />;
}) })
} }
</div>; </ul>;
}, },
replaceContent : function(item){ replaceContent : function(item){
@@ -327,12 +327,14 @@ const SnippetGroup = createReactClass({
return _.map(snippets, (snippet)=>{ return _.map(snippets, (snippet)=>{
if(!snippet.subsnippets){ if(!snippet.subsnippets){
return ( return (
<button className='menu-item' key={snippet.name} onClick={(e)=>this.handleSnippetClick(e, snippet)} role='menuitem'> <li key={snippet.name} role='none'>
<i className={snippet.icon} /> <button className='menu-item' onClick={(e)=>this.handleSnippetClick(e, snippet)} role='menuitem'>
<span className={`name${snippet.disabled ? ' disabled' : ''}`} title={snippet.name}>{snippet.name}</span> <i className={snippet.icon} />
{snippet.experimental && <span className='beta'>beta</span>} <span className={`name${snippet.disabled ? ' disabled' : ''}`} title={snippet.name}>{snippet.name}</span>
{snippet.disabled && <span className='beta' title='temporarily disabled due to large slowdown; under re-design'>disabled</span>} {snippet.experimental && <span className='beta'>beta</span>}
</button> {snippet.disabled && <span className='beta' title='temporarily disabled due to large slowdown; under re-design'>disabled</span>}
</button>
</li>
); );
} else if(snippet.subsnippets){ } else if(snippet.subsnippets){
return ( return (