Fix footer link circle dividers' screen reader accessibility by adding aria-hidden (#22576)
* Fix footer link circle dividers' screen reader accessibility by adding aria-hidden * Remove a circle erroneously added in prev commit, and make code more DRY
This commit is contained in:
		
							parent
							
								
									2195f21524
								
							
						
					
					
						commit
						2bcb081ce8
					
				
					 1 changed files with 9 additions and 7 deletions
				
			
		|  | @ -52,6 +52,8 @@ class LinkFooter extends React.PureComponent { | |||
|     const canInvite = signedIn && ((permissions & PERMISSION_INVITE_USERS) === PERMISSION_INVITE_USERS); | ||||
|     const canProfileDirectory = profileDirectory; | ||||
| 
 | ||||
|     const DividingCircle = <span aria-hidden>{' · '}</span>; | ||||
| 
 | ||||
|     return ( | ||||
|       <div className='link-footer'> | ||||
|         <p> | ||||
|  | @ -60,17 +62,17 @@ class LinkFooter extends React.PureComponent { | |||
|           <Link key='about' to='/about'><FormattedMessage id='footer.about' defaultMessage='About' /></Link> | ||||
|           {canInvite && ( | ||||
|             <> | ||||
|               {' · '} | ||||
|               {DividingCircle} | ||||
|               <a key='invites' href='/invites' target='_blank'><FormattedMessage id='footer.invite' defaultMessage='Invite people' /></a> | ||||
|             </> | ||||
|           )} | ||||
|           {canProfileDirectory && ( | ||||
|             <> | ||||
|               {' · '} | ||||
|               {DividingCircle} | ||||
|               <Link key='directory' to='/directory'><FormattedMessage id='footer.directory' defaultMessage='Profiles directory' /></Link> | ||||
|             </> | ||||
|           )} | ||||
|           {' · '} | ||||
|           {DividingCircle} | ||||
|           <Link key='privacy-policy' to='/privacy-policy'><FormattedMessage id='footer.privacy_policy' defaultMessage='Privacy policy' /></Link> | ||||
|         </p> | ||||
| 
 | ||||
|  | @ -78,13 +80,13 @@ class LinkFooter extends React.PureComponent { | |||
|           <strong>Mastodon</strong>: | ||||
|           {' '} | ||||
|           <a href='https://joinmastodon.org' target='_blank'><FormattedMessage id='footer.about' defaultMessage='About' /></a> | ||||
|           {' · '} | ||||
|           {DividingCircle} | ||||
|           <a href='https://joinmastodon.org/apps' target='_blank'><FormattedMessage id='footer.get_app' defaultMessage='Get the app' /></a> | ||||
|           {' · '} | ||||
|           {DividingCircle} | ||||
|           <Link to='/keyboard-shortcuts'><FormattedMessage id='footer.keyboard_shortcuts' defaultMessage='Keyboard shortcuts' /></Link> | ||||
|           {' · '} | ||||
|           {DividingCircle} | ||||
|           <a href={source_url} rel='noopener noreferrer' target='_blank'><FormattedMessage id='footer.source_code' defaultMessage='View source code' /></a> | ||||
|           {' · '} | ||||
|           {DividingCircle} | ||||
|           v{version} | ||||
|         </p> | ||||
|       </div> | ||||
|  |  | |||
		Loading…
	
		Reference in a new issue