add aria labels to items

This commit is contained in:
Gazook89
2026-07-08 23:35:45 -05:00
parent 5c4d498a99
commit 6f1ad35492
2 changed files with 4 additions and 2 deletions
+2
View File
@@ -98,6 +98,7 @@ const Dropdown = ({ groupName, className = null, icon, children, color = null, c
className={['menu-item', color].join(' ')} className={['menu-item', color].join(' ')}
popoverTarget={menuId} popoverTarget={menuId}
aria-haspopup='menu' aria-haspopup='menu'
aria-label={groupName}
role='menuitem' role='menuitem'
disabled={!React.Children.count(children)} disabled={!React.Children.count(children)}
ref={triggerRef} ref={triggerRef}
@@ -111,6 +112,7 @@ const Dropdown = ({ groupName, className = null, icon, children, color = null, c
className='menu-list' className='menu-list'
popover='auto' popover='auto'
role='menu' role='menu'
aria-label={`${groupName} Submenu`}
onClick={handleMenuActionClick} onClick={handleMenuActionClick}
> >
{children} {children}
@@ -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 <ul className='snippets' role='menubar'> return <ul className='snippets' role='menubar' aria-label='Snippets Menubar'>
{_.map(snippets, (snippetGroup)=>{ {_.map(snippets, (snippetGroup)=>{
return <SnippetGroup return <SnippetGroup
brew={this.props.brew} brew={this.props.brew}
@@ -328,7 +328,7 @@ const SnippetGroup = createReactClass({
if(!snippet.subsnippets){ if(!snippet.subsnippets){
return ( return (
<li key={snippet.name} role='none'> <li key={snippet.name} role='none'>
<button className='menu-item' onClick={(e)=>this.handleSnippetClick(e, snippet)} role='menuitem'> <button className='menu-item' onClick={(e)=>this.handleSnippetClick(e, snippet)} role='menuitem' aria-label={snippet.name}>
<i className={snippet.icon} /> <i className={snippet.icon} />
<span className={`name${snippet.disabled ? ' disabled' : ''}`} title={snippet.name}>{snippet.name}</span> <span className={`name${snippet.disabled ? ' disabled' : ''}`} title={snippet.name}>{snippet.name}</span>
{snippet.experimental && <span className='beta'>beta</span>} {snippet.experimental && <span className='beta'>beta</span>}