Merge pull request #279 from ing-bank/fix/a11yMinus
Fix a11y - use proper minus sign unicode that most SRs understand
This commit is contained in:
commit
07f04ddd2d
4 changed files with 14 additions and 11 deletions
|
|
@ -60,7 +60,7 @@ describe('formatAmount()', () => {
|
||||||
minimumFractionDigits: 2,
|
minimumFractionDigits: 2,
|
||||||
maximumFractionDigits: 2,
|
maximumFractionDigits: 2,
|
||||||
}),
|
}),
|
||||||
).to.equal('-12.35');
|
).to.equal('−12.35');
|
||||||
});
|
});
|
||||||
|
|
||||||
it('formats the right amount of fraction digits for a certain currency', async () => {
|
it('formats the right amount of fraction digits for a certain currency', async () => {
|
||||||
|
|
|
||||||
|
|
@ -28,7 +28,10 @@ export function formatNumberToParts(number, options) {
|
||||||
const formattedNumber = Intl.NumberFormat(computedLocale, options).format(parsedNumber);
|
const formattedNumber = Intl.NumberFormat(computedLocale, options).format(parsedNumber);
|
||||||
const regexSymbol = /[A-Z.,\s0-9]/;
|
const regexSymbol = /[A-Z.,\s0-9]/;
|
||||||
const regexCode = /[A-Z]/;
|
const regexCode = /[A-Z]/;
|
||||||
|
|
||||||
|
// U+002D, Hyphen-Minus, -
|
||||||
const regexMinusSign = /[-]/;
|
const regexMinusSign = /[-]/;
|
||||||
|
|
||||||
const regexNum = /[0-9]/;
|
const regexNum = /[0-9]/;
|
||||||
const regexSeparator = /[.,]/;
|
const regexSeparator = /[.,]/;
|
||||||
const regexSpace = /[\s]/;
|
const regexSpace = /[\s]/;
|
||||||
|
|
@ -38,7 +41,7 @@ export function formatNumberToParts(number, options) {
|
||||||
for (let i = 0; i < formattedNumber.length; i += 1) {
|
for (let i = 0; i < formattedNumber.length; i += 1) {
|
||||||
// detect minusSign
|
// detect minusSign
|
||||||
if (regexMinusSign.test(formattedNumber[i])) {
|
if (regexMinusSign.test(formattedNumber[i])) {
|
||||||
formattedParts.push({ type: 'minusSign', value: formattedNumber[i] });
|
formattedParts.push({ type: 'minusSign', value: '−' /* U+2212, 'Minus-Sign', − */ });
|
||||||
}
|
}
|
||||||
// detect numbers
|
// detect numbers
|
||||||
if (regexNum.test(formattedNumber[i])) {
|
if (regexNum.test(formattedNumber[i])) {
|
||||||
|
|
|
||||||
|
|
@ -27,32 +27,32 @@ describe('formatNumber', () => {
|
||||||
expect(formatNumber(123456.789, currencySymbol('USD'))).to.equal('$123,456.79');
|
expect(formatNumber(123456.789, currencySymbol('USD'))).to.equal('$123,456.79');
|
||||||
});
|
});
|
||||||
|
|
||||||
it('uses minus (and not dash) to indicate negative numbers ', () => {
|
it('uses minus U+2212 (and not dash) to indicate negative numbers ', () => {
|
||||||
expect(formatNumber(-12, { style: 'decimal', maximumFractionDigits: 0 })).to.equal('-12');
|
expect(formatNumber(-12, { style: 'decimal', maximumFractionDigits: 0 })).to.equal('−12');
|
||||||
});
|
});
|
||||||
|
|
||||||
it('rounds (negative) numbers e.g. `roundMode: round`', () => {
|
it('rounds (negative) numbers e.g. `roundMode: round`', () => {
|
||||||
expect(formatNumber(12.4, { roundMode: 'round' })).to.equal('12');
|
expect(formatNumber(12.4, { roundMode: 'round' })).to.equal('12');
|
||||||
expect(formatNumber(12.6, { roundMode: 'round' })).to.equal('13');
|
expect(formatNumber(12.6, { roundMode: 'round' })).to.equal('13');
|
||||||
|
|
||||||
expect(formatNumber(-12.4, { roundMode: 'round' })).to.equal('-12');
|
expect(formatNumber(-12.4, { roundMode: 'round' })).to.equal('−12');
|
||||||
expect(formatNumber(-12.6, { roundMode: 'round' })).to.equal('-13');
|
expect(formatNumber(-12.6, { roundMode: 'round' })).to.equal('−13');
|
||||||
});
|
});
|
||||||
|
|
||||||
it("rounds (negative) numbers up when `roundMode: 'ceiling'`", () => {
|
it("rounds (negative) numbers up when `roundMode: 'ceiling'`", () => {
|
||||||
expect(formatNumber(12.4, { roundMode: 'ceiling' })).to.equal('13');
|
expect(formatNumber(12.4, { roundMode: 'ceiling' })).to.equal('13');
|
||||||
expect(formatNumber(12.6, { roundMode: 'ceiling' })).to.equal('13');
|
expect(formatNumber(12.6, { roundMode: 'ceiling' })).to.equal('13');
|
||||||
|
|
||||||
expect(formatNumber(-12.4, { roundMode: 'ceiling' })).to.equal('-12');
|
expect(formatNumber(-12.4, { roundMode: 'ceiling' })).to.equal('−12');
|
||||||
expect(formatNumber(-12.6, { roundMode: 'ceiling' })).to.equal('-12');
|
expect(formatNumber(-12.6, { roundMode: 'ceiling' })).to.equal('−12');
|
||||||
});
|
});
|
||||||
|
|
||||||
it('rounds (negative) numbers down when `roundMode: floor`', () => {
|
it('rounds (negative) numbers down when `roundMode: floor`', () => {
|
||||||
expect(formatNumber(12.4, { roundMode: 'floor' })).to.equal('12');
|
expect(formatNumber(12.4, { roundMode: 'floor' })).to.equal('12');
|
||||||
expect(formatNumber(12.6, { roundMode: 'floor' })).to.equal('12');
|
expect(formatNumber(12.6, { roundMode: 'floor' })).to.equal('12');
|
||||||
|
|
||||||
expect(formatNumber(-12.4, { roundMode: 'floor' })).to.equal('-13');
|
expect(formatNumber(-12.4, { roundMode: 'floor' })).to.equal('−13');
|
||||||
expect(formatNumber(-12.6, { roundMode: 'floor' })).to.equal('-13');
|
expect(formatNumber(-12.6, { roundMode: 'floor' })).to.equal('−13');
|
||||||
});
|
});
|
||||||
|
|
||||||
it('returns empty string when NaN', () => {
|
it('returns empty string when NaN', () => {
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,7 @@ const i = v => ({ type: 'integer', value: v });
|
||||||
const f = v => ({ type: 'fraction', value: v });
|
const f = v => ({ type: 'fraction', value: v });
|
||||||
const g = v => ({ type: 'group', value: v });
|
const g = v => ({ type: 'group', value: v });
|
||||||
const l = v => ({ type: 'literal', value: v });
|
const l = v => ({ type: 'literal', value: v });
|
||||||
const m = { type: 'minusSign', value: '-' };
|
const m = { type: 'minusSign', value: '−' };
|
||||||
|
|
||||||
const stringifyParts = parts => parts.map(part => part.value).join('');
|
const stringifyParts = parts => parts.map(part => part.value).join('');
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue