diff --git a/demo/asset_card.js b/demo/asset_card.js
index 4158339012..0099d94083 100644
--- a/demo/asset_card.js
+++ b/demo/asset_card.js
@@ -54,8 +54,9 @@ class AssetCard {
titleDiv.appendChild(titleText);
if (asset.iconUri) {
- const img = document.createElement('IMG');
+ const img = document.createElement('img');
img.src = asset.iconUri;
+ img.alt = ''; // Not necessary to understand the page
this.card_.appendChild(img);
}
diff --git a/demo/custom.js b/demo/custom.js
index 04c8212d9e..4da914bc4c 100644
--- a/demo/custom.js
+++ b/demo/custom.js
@@ -227,8 +227,9 @@ class ShakaDemoCustom {
const iconSetup = (input, container) => {
if (assetInProgress.iconUri) {
input.value = assetInProgress.iconUri;
- const img = document.createElement('IMG');
+ const img = document.createElement('img');
img.src = input.value;
+ img.alt = ''; // Not necessary to understand the page
iconDiv.appendChild(img);
}
};
@@ -236,8 +237,9 @@ class ShakaDemoCustom {
shaka.ui.Utils.removeAllChildren(iconDiv);
assetInProgress.iconUri = input.value;
if (input.value) {
- const img = document.createElement('IMG');
+ const img = document.createElement('img');
img.src = input.value;
+ img.alt = ''; // Not necessary to understand the page
iconDiv.appendChild(img);
}
};
diff --git a/demo/demo.less b/demo/demo.less
index 8a88e63a01..58b05382c2 100644
--- a/demo/demo.less
+++ b/demo/demo.less
@@ -17,8 +17,14 @@
@accent-background-color: #ddf;
@error-color: #d84a38;
@drawer-width: 550px;
-@footer-link-color: #9e9e9e; /* copied from MDL stylesheet */
-@footer-link-color-disabled: darken(@footer-link-color, 20%);
+
+@mdl-footer-link-color: #9e9e9e; /* copied from MDL stylesheet */
+@mdl-button-color: rgb(68,138,255); /* copied from MDL stylesheet */
+
+/* The default color from MDL is too low-contrast on a white background. */
+.mdl-button--accent.mdl-button--accent {
+ color: darken(@mdl-button-color, 20%);
+}
/* This is a less mixin only, rather than a CSS class. MDL has an equivalent
* class with the same name, which can be used in the application directly. */
@@ -260,13 +266,18 @@ footer li {
list-style: square outside;
}
-footer a {
- color: @footer-link-color;
-}
-
-footer a[disabled] {
- color: @footer-link-color-disabled;
- cursor: not-allowed;
+/* More specific selector than MDL's stylesheet uses. */
+footer .mdl-mega-footer__link-list {
+ a {
+ /* The default color was low-contrast on this dark background. */
+ color: lighten(@mdl-footer-link-color, 20%);
+ }
+ a[disabled] {
+ /* Making the disabled version even darker would be even worse in terms of
+ * contrast, so use a strikethrough style instead. */
+ text-decoration: line-through;
+ cursor: not-allowed;
+ }
}
/* Style the container that contains the "add custom assets" button. */
diff --git a/demo/index.html b/demo/index.html
index 7fc32166ad..6c95cbf14e 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -34,7 +34,7 @@
-
+
@@ -42,7 +42,7 @@
-
+