open ImageView when clicking on a set avatar

res/css/views/settings/_AvatarSetting.scss

@@ -55,6 +55,10 @@ limitations under the License.
         color: $button-danger-bg-color;
     }
 
+    & > img {
+        cursor: pointer;
+    }
+
     & > img,
     .mx_AvatarSetting_avatarPlaceholder {
         display: block;

src/components/views/room_settings/RoomProfileSettings.js

@@ -162,6 +162,7 @@ export default class RoomProfileSettings extends React.Component {
                     </div>
                     <AvatarSetting
                         avatarUrl={this.state.avatarUrl}
+                        avatarName={this.state.displayName || this.props.roomId}
                         avatarAltText={_t("Room avatar")}
                         uploadAvatar={this.state.canSetAvatar ? this._uploadAvatar : undefined}
                         removeAvatar={this.state.canSetAvatar ? this._removeAvatar : undefined} />

src/components/views/settings/AvatarSetting.js

@@ -14,18 +14,34 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
+import React, {useCallback} from "react";
 import PropTypes from "prop-types";
 
 import sdk from "../../../index";
 import {_t} from "../../../languageHandler";
+import Modal from "../../../Modal";
 
-const AvatarSetting = ({avatarUrl, avatarAltText, uploadAvatar, removeAvatar}) => {
+const AvatarSetting = ({avatarUrl, avatarAltText, avatarName, uploadAvatar, removeAvatar}) => {
     const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
 
+    const openImageView = useCallback(() => {
+        const ImageView = sdk.getComponent("elements.ImageView");
+        Modal.createDialog(ImageView, {
+            src: avatarUrl,
+            name: avatarName,
+        }, "mx_Dialog_lightbox");
+    }, [avatarUrl, avatarName]);
+
     let avatarElement = <div className="mx_AvatarSetting_avatarPlaceholder" />;
     if (avatarUrl) {
-        avatarElement = <img src={avatarUrl} alt={avatarAltText} />;
+        avatarElement = (
+            <AccessibleButton
+                element="img"
+                src={avatarUrl}
+                alt={avatarAltText}
+                aria-label={avatarAltText}
+                onClick={openImageView} />
+        );
     }
 
     let uploadAvatarBtn;
@@ -53,6 +69,7 @@ const AvatarSetting = ({avatarUrl, avatarAltText, uploadAvatar, removeAvatar}) =
 
 AvatarSetting.propTypes = {
     avatarUrl: PropTypes.string,
+    avatarName: PropTypes.string.isRequired, // name of user/room the avatar belongs to
     uploadAvatar: PropTypes.func,
     removeAvatar: PropTypes.func,
     avatarAltText: PropTypes.string.isRequired,

src/components/views/settings/ProfileSettings.js

@@ -157,6 +157,7 @@ export default class ProfileSettings extends React.Component {
                     </div>
                     <AvatarSetting
                         avatarUrl={this.state.avatarUrl}
+                        avatarName={this.state.displayName || this.state.userId}
                         avatarAltText={_t("Profile picture")}
                         uploadAvatar={this._uploadAvatar}
                         removeAvatar={this._removeAvatar} />