Issue #2274631 by joelpittet, mgifford, droplet, LewisNyman | hass: Fixed Form...

Issue #2274631 by joelpittet, mgifford, droplet, LewisNyman | hass: Fixed Form required marker "\204E" is broken in Google Chrome 35 / Internet Explorer 9.

core/misc/icons/ee0000/required.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="#EE0000"  d="M0,7.562l1.114-3.438c2.565,0.906,4.43,1.688,5.59,2.35C6.398,3.553,6.237,1.544,6.22,0.447h3.511 c-0.05,1.597-0.234,3.6-0.558,6.003c1.664-0.838,3.566-1.613,5.714-2.325L16,7.562c-2.05,0.678-4.06,1.131-6.028,1.356 c0.984,0.856,2.372,2.381,4.166,4.575l-2.906,2.059c-0.935-1.274-2.041-3.009-3.316-5.206c-1.194,2.275-2.244,4.013-3.147,5.206 l-2.856-2.059c1.872-2.307,3.211-3.832,4.017-4.575C3.849,8.516,1.872,8.062,0,7.562"/></svg>

core/modules/system/css/system.theme.css

@@ -82,11 +82,16 @@ label.option {
 }
 
 .form-required:after {
-  color: #e00;
-  /* Use a Unicode symbol to prevent screen readers from announcing the text. */
-  content: " \204E ";
-  line-height: 1;
+  content: '';
   vertical-align: super;
+  display: inline-block;
+  /* Use a background image to prevent screen readers from announcing the text. */
+  background-image: url(../../../misc/icons/ee0000/required.svg);
+  background-repeat: no-repeat;
+  background-size: 6px 6px;
+  width: 6px;
+  height: 6px;
+  margin: 0 0.3em;
 }
 
 abbr.tabledrag-changed,

core/themes/bartik/css/style.css

@@ -439,8 +439,7 @@ h1.site-name {
   background: rgba(255, 255, 255, 0.8);
 }
 .region-header .form-required:after {
-  color: #eee;
-  color: rgba(255, 255, 255, 0.7);
+  background-image: url(../images/required.svg);
 }
 /* Region header block menus. */
 .region-header .block-menu {

core/themes/bartik/images/required.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="#ffffff" fill-opacity="0.7" d="M0,7.562l1.114-3.438c2.565,0.906,4.43,1.688,5.59,2.35C6.398,3.553,6.237,1.544,6.22,0.447h3.511 c-0.05,1.597-0.234,3.6-0.558,6.003c1.664-0.838,3.566-1.613,5.714-2.325L16,7.562c-2.05,0.678-4.06,1.131-6.028,1.356 c0.984,0.856,2.372,2.381,4.166,4.575l-2.906,2.059c-0.935-1.274-2.041-3.009-3.316-5.206c-1.194,2.275-2.244,4.013-3.147,5.206 l-2.856-2.059c1.872-2.307,3.211-3.832,4.017-4.575C3.849,8.516,1.872,8.062,0,7.562"/></svg>

core/themes/seven/css/components/form.css

@@ -80,10 +80,10 @@ label[for] {
   background-color: #fcf4f2;
 }
 .form-required:after {
-  font-weight: bold;
-  color: #e62600;
-  font-size: 1.1em;
-  padding-left: 2px;
+  background-image: url(../../images/required.svg);
+  background-size: 7px 7px;
+  width: 7px;
+  height: 7px;
 }
 
 

core/themes/seven/images/required.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="#e62600" d="M0,7.562l1.114-3.438c2.565,0.906,4.43,1.688,5.59,2.35C6.398,3.553,6.237,1.544,6.22,0.447h3.511 c-0.05,1.597-0.234,3.6-0.558,6.003c1.664-0.838,3.566-1.613,5.714-2.325L16,7.562c-2.05,0.678-4.06,1.131-6.028,1.356 c0.984,0.856,2.372,2.381,4.166,4.575l-2.906,2.059c-0.935-1.274-2.041-3.009-3.316-5.206c-1.194,2.275-2.244,4.013-3.147,5.206 l-2.856-2.059c1.872-2.307,3.211-3.832,4.017-4.575C3.849,8.516,1.872,8.062,0,7.562"/></svg>