From 2137aadda000f3b4b78831a322e8b9788dba264f Mon Sep 17 00:00:00 2001
From: Jeremy Bowman <jmbowman@alum.mit.edu>
Date: Thu, 25 May 2017 17:27:59 -0700
Subject: [PATCH] portico: Make the realm icon an img element.

The realm avatar icon on the login and registration pages was
being set as a background image, which could vanish in high
contrast mode in many browsers.  Converted it to an img tag and
verified that it is still styled correctly.  I think the empty
alt attribute (to remove it from the audio description) is
appropriate in this context, since the realm name and description
are already provided immediately afterwards in the page content.

Fixes #4889.
---
 static/styles/portico-signin.css    | 2 --
 templates/zerver/accounts_home.html | 2 +-
 templates/zerver/login.html         | 2 +-
 3 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/static/styles/portico-signin.css b/static/styles/portico-signin.css
index a4fdc93049..bea3aabfa2 100644
--- a/static/styles/portico-signin.css
+++ b/static/styles/portico-signin.css
@@ -492,8 +492,6 @@ html {
 
     width: 100px;
     height: 100px;
-
-    background-size: 100% auto;
 }
 
 .split-view .org-header .info-box {
diff --git a/templates/zerver/accounts_home.html b/templates/zerver/accounts_home.html
index 30e6a5077c..d82c5966ca 100644
--- a/templates/zerver/accounts_home.html
+++ b/templates/zerver/accounts_home.html
@@ -21,7 +21,7 @@ $(function () {
                 {% if realm_name %}
                 <div class="left-side">
                     <div class="org-header">
-                        <div class="avatar" style="background-image: url('{{ realm_icon }}')"></div>
+                        <img class="avatar" src="{{ realm_icon }}" alt="" />
                         <div class="info-box">
                             <div class="organization-name">{{ realm_name }}</div>
                             <div class="organization-path">{{ realm_uri }}</div>
diff --git a/templates/zerver/login.html b/templates/zerver/login.html
index 7960431c7c..fe327e033a 100644
--- a/templates/zerver/login.html
+++ b/templates/zerver/login.html
@@ -60,7 +60,7 @@ autofocus('#id_username');
             {% if realm_name %}
             <div class="left-side">
                 <div class="org-header">
-                    <div class="avatar" style="background-image: url('{{ realm_icon }}')"></div>
+                    <img class="avatar" src="{{ realm_icon }}" alt="" />
                     <div class="info-box">
                         <div class="organization-name">{{ realm_name }}</div>
                         <div class="organization-path">{{ realm_uri }}</div>