Fix intermediary responsive layout, accessibility on navigation in web UI (#19324)

* Fix intermediary responsive layout, accessibility on navigation in web UI

* `yarn test:jest -u`

Co-authored-by: Yamagishi Kazutoshi <ykzts@desire.sh>

app/javascript/mastodon/components/__tests__/__snapshots__/avatar-test.js.snap

@@ -2,9 +2,11 @@
 
 exports[`<Avatar /> Autoplay renders a animated avatar 1`] = `
 <div
+  aria-label="alice"
   className="account__avatar"
   onMouseEnter={[Function]}
   onMouseLeave={[Function]}
+  role="img"
   style={
     {
       "backgroundImage": "url(/animated/alice.gif)",
@@ -18,9 +20,11 @@ exports[`<Avatar /> Autoplay renders a animated avatar 1`] = `
 
 exports[`<Avatar /> Still renders a still avatar 1`] = `
 <div
+  aria-label="alice"
   className="account__avatar"
   onMouseEnter={[Function]}
   onMouseLeave={[Function]}
+  role="img"
   style={
     {
       "backgroundImage": "url(/static/alice.jpg)",

app/javascript/mastodon/components/avatar.js

@@ -63,6 +63,8 @@ export default class Avatar extends React.PureComponent {
         onMouseEnter={this.handleMouseEnter}
         onMouseLeave={this.handleMouseLeave}
         style={style}
+        role='img'
+        aria-label={account.get('acct')}
       />
     );
   }

app/javascript/mastodon/components/logo.js

@@ -1,7 +1,8 @@
 import React from 'react';
 
 const Logo = () => (
-  <svg viewBox='0 0 261 66' className='logo'>
+  <svg viewBox='0 0 261 66' className='logo' role='img'>
+    <title>Mastodon</title>
     <use xlinkHref='#logo-symbol-wordmark' />
   </svg>
 );