Source code
Revision control
Copy as Markdown
Other Tools
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
"use strict";
const {
Component,
createFactory,
} = require("resource://devtools/client/shared/vendor/react.js");
const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
const {
div,
span,
h3,
} = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
const LearnMoreLink = createFactory(
require("resource://devtools/client/accessibility/components/LearnMoreLink.js")
);
const {
A11Y_CONTRAST_LEARN_MORE_LINK,
} = require("resource://devtools/client/accessibility/constants.js");
const {
L10N,
} = require("resource://devtools/client/accessibility/utils/l10n.js");
/**
* Component that renders a colour contrast value along with a swatch preview of what the
* text and background colours are.
*/
class ContrastValueClass extends Component {
static get propTypes() {
return {
backgroundColor: PropTypes.array.isRequired,
color: PropTypes.array.isRequired,
value: PropTypes.number.isRequired,
score: PropTypes.string,
};
}
render() {
const { backgroundColor, color, value, score } = this.props;
const className = ["accessibility-contrast-value", score].join(" ");
return span(
{
className,
role: "presentation",
style: {
"--accessibility-contrast-color": `rgba(${color})`,
"--accessibility-contrast-bg": `rgba(${backgroundColor})`,
},
},
value.toFixed(2)
);
}
}
const ContrastValue = createFactory(ContrastValueClass);
/**
* Component that renders labeled colour contrast values together with the large text
* indiscator.
*/
class ColorContrastAccessibilityClass extends Component {
static get propTypes() {
return {
error: PropTypes.string,
isLargeText: PropTypes.bool.isRequired,
color: PropTypes.array.isRequired,
value: PropTypes.number,
min: PropTypes.number,
max: PropTypes.number,
backgroundColor: PropTypes.array,
backgroundColorMin: PropTypes.array,
backgroundColorMax: PropTypes.array,
score: PropTypes.string,
scoreMin: PropTypes.string,
scoreMax: PropTypes.string,
};
}
render() {
const {
error,
isLargeText,
color,
value,
backgroundColor,
score,
min,
backgroundColorMin,
scoreMin,
max,
backgroundColorMax,
scoreMax,
} = this.props;
const children = [];
if (error) {
children.push(
span(
{
className: "accessibility-color-contrast-error",
role: "presentation",
},
L10N.getStr("accessibility.contrast.error")
)
);
return div(
{
role: "presentation",
tabIndex: "-1",
className: "accessibility-color-contrast",
},
...children
);
}
if (value) {
children.push(ContrastValue({ score, color, backgroundColor, value }));
} else {
children.push(
ContrastValue({
score: scoreMin,
color,
backgroundColor: backgroundColorMin,
value: min,
}),
div({
role: "presentation",
tabIndex: "-1",
className: "accessibility-color-contrast-separator",
}),
ContrastValue({
score: scoreMax,
color,
backgroundColor: backgroundColorMax,
value: max,
})
);
}
if (isLargeText) {
children.push(
span(
{
className: "accessibility-color-contrast-large-text",
role: "presentation",
title: L10N.getStr("accessibility.contrast.large.title"),
},
L10N.getStr("accessibility.contrast.large.text")
)
);
}
return div(
{
role: "presentation",
tabIndex: "-1",
className: "accessibility-color-contrast",
},
...children
);
}
}
const ColorContrastAccessibility = createFactory(
ColorContrastAccessibilityClass
);
class ContrastAnnotationClass extends Component {
static get propTypes() {
return {
score: PropTypes.string,
};
}
render() {
const { score } = this.props;
return LearnMoreLink({
className: "accessibility-check-annotation",
href: A11Y_CONTRAST_LEARN_MORE_LINK,
learnMoreStringKey: "accessibility.learnMore",
l10n: L10N,
messageStringKey: `accessibility.contrast.annotation.${score}`,
});
}
}
const ContrastAnnotation = createFactory(ContrastAnnotationClass);
class ColorContrastCheck extends Component {
static get propTypes() {
return {
error: PropTypes.string.isRequired,
};
}
render() {
const { error } = this.props;
return div(
{
role: "presentation",
tabIndex: "-1",
className: "accessibility-check",
},
h3(
{
className: "accessibility-check-header",
},
L10N.getStr("accessibility.contrast.header")
),
ColorContrastAccessibility(this.props),
!error && ContrastAnnotation(this.props)
);
}
}
module.exports = {
ColorContrastAccessibility: ColorContrastAccessibilityClass,
ColorContrastCheck,
};