mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-20 08:45:46 +00:00
Bug 1513557 - adding overlapping swatch preview for colour contrast indicator in a11y panel. r=pbro,flod
MozReview-Commit-ID: 9IKGXorA6uS Differential Revision: https://phabricator.services.mozilla.com/D14429 --HG-- extra : moz-landing-system : lando
This commit is contained in:
parent
100a324c5b
commit
b6a5583f37
@ -37,6 +37,8 @@
|
||||
--highlighter-font-size: 11px;
|
||||
--highlighter-infobar-color: hsl(210, 30%, 85%);
|
||||
--highlighter-marker-color: #000;
|
||||
|
||||
--grey-40: #b1b1b3;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -653,6 +655,17 @@
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
:-moz-native-anonymous .accessible-infobar-audit .accessible-contrast-ratio:not(:empty):before {
|
||||
content: "";
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
display: inline-flex;
|
||||
background-color: var(--accessibility-highlighter-contrast-ratio-color);
|
||||
box-shadow: 0 0 0 1px var(--grey-40), 4px 3px var(--accessibility-highlighter-contrast-ratio-bg), 4px 3px 0 1px var(--grey-40);
|
||||
margin-inline-start: 3px;
|
||||
margin-inline-end: 9px;
|
||||
}
|
||||
|
||||
:-moz-native-anonymous .accessible-infobar-audit .accessible-contrast-ratio:not(:empty):after {
|
||||
margin-inline-start: 2px;
|
||||
}
|
||||
@ -676,16 +689,13 @@
|
||||
}
|
||||
|
||||
:-moz-native-anonymous .accessible-infobar-audit .accessible-contrast-ratio-label,
|
||||
:-moz-native-anonymous .accessible-infobar-audit #accessible-contrast-ratio-max:not(:empty):before {
|
||||
:-moz-native-anonymous .accessible-infobar-audit .accessible-contrast-ratio-separator:before {
|
||||
margin-inline-end: 3px;
|
||||
}
|
||||
|
||||
:-moz-native-anonymous .accessible-infobar-audit #accessible-contrast-ratio-max {
|
||||
margin-inline-start: 3px;
|
||||
}
|
||||
|
||||
:-moz-native-anonymous .accessible-infobar-audit #accessible-contrast-ratio-max:not(:empty):before {
|
||||
:-moz-native-anonymous .accessible-infobar-audit .accessible-contrast-ratio-separator:before {
|
||||
content: "-";
|
||||
margin-inline-start: 3px;
|
||||
}
|
||||
|
||||
:-moz-native-anonymous .accessible-infobar-name:not(:empty),
|
||||
|
@ -479,14 +479,13 @@ class ContrastRatio extends AuditReport {
|
||||
"id": "contrast-ratio-label",
|
||||
},
|
||||
prefix: this.prefix,
|
||||
text: L10N.getStr("accessibility.contrast.ratio.label"),
|
||||
});
|
||||
|
||||
createNode(this.win, {
|
||||
nodeType: "span",
|
||||
parent: root,
|
||||
attributes: {
|
||||
"class": "contrast-ratio",
|
||||
"class": "contrast-ratio-error",
|
||||
"id": "contrast-ratio-error",
|
||||
},
|
||||
prefix: this.prefix,
|
||||
@ -503,6 +502,16 @@ class ContrastRatio extends AuditReport {
|
||||
prefix: this.prefix,
|
||||
});
|
||||
|
||||
createNode(this.win, {
|
||||
nodeType: "span",
|
||||
parent: root,
|
||||
attributes: {
|
||||
"class": "contrast-ratio-separator",
|
||||
"id": "contrast-ratio-separator",
|
||||
},
|
||||
prefix: this.prefix,
|
||||
});
|
||||
|
||||
createNode(this.win, {
|
||||
nodeType: "span",
|
||||
parent: root,
|
||||
@ -514,11 +523,14 @@ class ContrastRatio extends AuditReport {
|
||||
});
|
||||
}
|
||||
|
||||
_fillAndStyleContrastValue(el, value, isLargeText, stringName) {
|
||||
_fillAndStyleContrastValue(el, { value, isLargeText, color, backgroundColor }) {
|
||||
value = value.toFixed(2);
|
||||
const style = getContrastRatioScoreStyle(value, isLargeText);
|
||||
this.setTextContent(el, stringName ? L10N.getFormatStr(stringName, value) : value);
|
||||
this.setTextContent(el, value);
|
||||
el.classList.add(style);
|
||||
el.setAttribute("style",
|
||||
`--accessibility-highlighter-contrast-ratio-color: rgba(${color});` +
|
||||
`--accessibility-highlighter-contrast-ratio-bg: rgba(${backgroundColor});`);
|
||||
el.removeAttribute("hidden");
|
||||
}
|
||||
|
||||
@ -532,7 +544,7 @@ class ContrastRatio extends AuditReport {
|
||||
*/
|
||||
update({ contrastRatio }) {
|
||||
const els = {};
|
||||
for (const key of ["label", "min", "max", "error"]) {
|
||||
for (const key of ["label", "min", "max", "error", "separator"]) {
|
||||
const el = els[key] = this.getElement(`contrast-ratio-${key}`);
|
||||
if (["min", "max"].includes(key)) {
|
||||
["fail", "AA", "AAA"].forEach(className => el.classList.remove(className));
|
||||
@ -540,6 +552,7 @@ class ContrastRatio extends AuditReport {
|
||||
}
|
||||
|
||||
el.setAttribute("hidden", true);
|
||||
el.removeAttribute("style");
|
||||
}
|
||||
|
||||
if (!contrastRatio) {
|
||||
@ -547,6 +560,8 @@ class ContrastRatio extends AuditReport {
|
||||
}
|
||||
|
||||
const { isLargeText, error } = contrastRatio;
|
||||
this.setTextContent(els.label,
|
||||
L10N.getStr(`accessibility.contrast.ratio.label${isLargeText ? ".large" : ""}`));
|
||||
els.label.removeAttribute("hidden");
|
||||
if (error) {
|
||||
els.error.removeAttribute("hidden");
|
||||
@ -554,12 +569,18 @@ class ContrastRatio extends AuditReport {
|
||||
}
|
||||
|
||||
if (contrastRatio.value) {
|
||||
this._fillAndStyleContrastValue(els.min, contrastRatio.value, isLargeText);
|
||||
const { value, color, backgroundColor } = contrastRatio;
|
||||
this._fillAndStyleContrastValue(els.min,
|
||||
{ value, isLargeText, color, backgroundColor });
|
||||
return true;
|
||||
}
|
||||
|
||||
this._fillAndStyleContrastValue(els.min, contrastRatio.min, isLargeText);
|
||||
this._fillAndStyleContrastValue(els.max, contrastRatio.max, isLargeText);
|
||||
const { min, max, color, backgroundColorMin, backgroundColorMax } = contrastRatio;
|
||||
this._fillAndStyleContrastValue(els.min,
|
||||
{ value: min, isLargeText, color, backgroundColor: backgroundColorMin });
|
||||
els.separator.removeAttribute("hidden");
|
||||
this._fillAndStyleContrastValue(els.max,
|
||||
{ value: max, isLargeText, color, backgroundColor: backgroundColorMax });
|
||||
|
||||
return true;
|
||||
}
|
||||
|
@ -18,6 +18,8 @@ const ACCESSIBLE_BOUNDS_SHEET = "data:text/css;charset=utf-8," + encodeURICompon
|
||||
--highlighter-bubble-background-color: hsl(214, 13%, 24%);
|
||||
--highlighter-bubble-border-color: rgba(255, 255, 255, 0.2);
|
||||
--highlighter-bubble-arrow-size: 8px;
|
||||
|
||||
--grey-40: #b1b1b3;
|
||||
}
|
||||
|
||||
.accessible-bounds {
|
||||
@ -79,6 +81,19 @@ const ACCESSIBLE_BOUNDS_SHEET = "data:text/css;charset=utf-8," + encodeURICompon
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
.accessible-infobar-audit .accessible-contrast-ratio:not(:empty):before {
|
||||
content: "";
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
display: inline-flex;
|
||||
background-color: var(--accessibility-highlighter-contrast-ratio-color);
|
||||
box-shadow: 0 0 0 1px var(--grey-40),
|
||||
4px 3px var(--accessibility-highlighter-contrast-ratio-bg),
|
||||
4px 3px 0 1px var(--grey-40);
|
||||
margin-inline-start: 3px;
|
||||
margin-inline-end: 9px;
|
||||
}
|
||||
|
||||
.accessible-infobar-audit .accessible-contrast-ratio:not(:empty):after {
|
||||
margin-inline-start: 2px;
|
||||
}
|
||||
@ -102,16 +117,13 @@ const ACCESSIBLE_BOUNDS_SHEET = "data:text/css;charset=utf-8," + encodeURICompon
|
||||
}
|
||||
|
||||
.accessible-infobar-audit .accessible-contrast-ratio-label,
|
||||
.accessible-infobar-audit #accessible-contrast-ratio-max:not(:empty):before {
|
||||
.accessible-infobar-audit .accessible-contrast-ratio-separator:before {
|
||||
margin-inline-end: 3px;
|
||||
}
|
||||
|
||||
.accessible-infobar-audit #accessible-contrast-ratio-max {
|
||||
margin-inline-start: 3px;
|
||||
}
|
||||
|
||||
.accessible-infobar-audit #accessible-contrast-ratio-max:not(:empty):before {
|
||||
.accessible-infobar-audit .accessible-contrast-ratio-separator:before {
|
||||
content: "-";
|
||||
margin-inline-start: 3px;
|
||||
}
|
||||
|
||||
.accessible-infobar-name:not(:empty),
|
||||
|
@ -196,18 +196,27 @@ function getContrastRatioFor(node, options = {}) {
|
||||
if (rgba.value) {
|
||||
return {
|
||||
value: colorUtils.calculateContrastRatio(rgba.value, color),
|
||||
color,
|
||||
backgroundColor: rgba.value,
|
||||
isLargeText,
|
||||
};
|
||||
}
|
||||
|
||||
// calculateContrastRatio modifies the array, since we need to use color array twice,
|
||||
// pass its copy to the method.
|
||||
const min = colorUtils.calculateContrastRatio(rgba.min, Array.from(color));
|
||||
const max = colorUtils.calculateContrastRatio(rgba.max, Array.from(color));
|
||||
let min = colorUtils.calculateContrastRatio(rgba.min, color);
|
||||
let max = colorUtils.calculateContrastRatio(rgba.max, color);
|
||||
|
||||
// Flip minimum and maximum contrast ratios if necessary.
|
||||
if (min > max) {
|
||||
[min, max] = [max, min];
|
||||
[rgba.min, rgba.max] = [rgba.max, rgba.min];
|
||||
}
|
||||
|
||||
return {
|
||||
min: min < max ? min : max,
|
||||
max: min < max ? max : min,
|
||||
min,
|
||||
max,
|
||||
color,
|
||||
backgroundColorMin: rgba.min,
|
||||
backgroundColorMax: rgba.max,
|
||||
isLargeText,
|
||||
};
|
||||
}
|
||||
|
@ -1197,6 +1197,10 @@ function blendColors(foregroundColor, backgroundColor = [ 255, 255, 255, 1 ]) {
|
||||
* @return {Number} The calculated luminance.
|
||||
*/
|
||||
function calculateContrastRatio(backgroundColor, textColor) {
|
||||
// Do not modify given colors.
|
||||
backgroundColor = Array.from(backgroundColor);
|
||||
textColor = Array.from(textColor);
|
||||
|
||||
backgroundColor = blendColors(backgroundColor);
|
||||
textColor = blendColors(textColor, backgroundColor);
|
||||
|
||||
|
@ -14,3 +14,8 @@ accessibility.contrast.ratio.error=Unable to calculate
|
||||
# LOCALIZATION NOTE (accessibility.contrast.ratio.label): A title text for the color
|
||||
# contrast ratio description, used together with the actual values.
|
||||
accessibility.contrast.ratio.label=Contrast:
|
||||
|
||||
# LOCALIZATION NOTE (accessibility.contrast.ratio.label.large): A title text for the color
|
||||
# contrast ratio description that also specifies that the color contrast criteria used is
|
||||
# if for large text.
|
||||
accessibility.contrast.ratio.label.large=Contrast (large text):
|
||||
|
Loading…
Reference in New Issue
Block a user