+ Read each region with a screen reader. Compare regions without a lang attribute with those that have one.
+
+
+
+
+
+
+
+
+ p5.js generated descriptions
+ Read the descriptions generated by the canvases below. The visible LABEL descriptions are included for inspection.
+
+
+
+
diff --git a/test/manual-test-examples/accessibility/describe/sketch.js b/test/manual-test-examples/accessibility/describe/sketch.js
new file mode 100644
index 0000000000..e655653a74
--- /dev/null
+++ b/test/manual-test-examples/accessibility/describe/sketch.js
@@ -0,0 +1,40 @@
+function setup() {
+ // Uncomment any of the following lines to test
+
+ createCanvas(400, 400);
+
+ // Text only (fallback is the default)
+ // describe('Cái này là bài thi');
+
+ // Text and display
+ // describe('Esto es una prueba', LABEL);
+
+ // Text and lang
+ //describe('Esto es una prueba', 'es');
+
+ // Text, display, and lang
+ // describe('Cái này là bài thi', LABEL, 'vi');
+
+ // Text and lang
+ // describe('यह टेस्ट है', 'hi');
+
+
+
+ // Name and text only (fallback is the default)
+ // describeElement('a', 'Cái này là bài thi');
+
+ // Name, text, and display
+ // describeElement('b', 'Esto es una prueba', LABEL);
+
+ // Name, text, and lang
+ // describeElement('c', 'Esto es una prueba', 'es');
+
+ // Name, text, display, and lang
+ // describeElement('d', 'Cái này là bài thi', LABEL, 'vi');
+
+ // Name, text, and lang
+ // describeElement('e', 'यह टेस्ट है', 'hi');
+
+ fill('blue');
+ circle(200, 150, 100);
+}
\ No newline at end of file
diff --git a/test/unit/accessibility/describe.js b/test/unit/accessibility/describe.js
index 427aa16ce0..776f2cd03e 100644
--- a/test/unit/accessibility/describe.js
+++ b/test/unit/accessibility/describe.js
@@ -5,12 +5,30 @@ suite('describe', function () {
const myID = 'myCanvasID';
beforeAll(function () {
+ mockP5.registerDecorator = (patterns, decorator) => {
+ const patternList = Array.isArray(patterns) ? patterns : [patterns];
+ patternList.forEach(pattern => {
+ const name = pattern.split('.').pop();
+ mockP5Prototype[name] = decorator(mockP5Prototype[name], { name });
+ });
+ };
describe(mockP5, mockP5Prototype);
mockP5Prototype.LABEL = 'label';
mockP5Prototype.FALLBACK = 'fallback';
});
+ beforeEach(function () {
+ document.querySelectorAll('[id^="' + myID + '_"]').forEach(element => {
+ element.remove();
+ });
+ mockP5Prototype.elt.innerHTML = '';
+ mockP5Prototype.elt.removeAttribute('lang');
+ mockP5Prototype.dummyDOM = undefined;
+ mockP5Prototype.descriptions = undefined;
+ mockP5._friendlyError.mockReset();
+ });
+
suite('p5.prototype.describe', function () {
test('should be a function', function () {
assert.ok(mockP5Prototype.describe);
@@ -27,12 +45,52 @@ suite('describe', function () {
);
});
- test('should create description as fallback', function () {
+ test('should create description as FALLBACK', function () {
mockP5Prototype.describe('a');
let actual = document.getElementById(myID + '_fallbackDesc');
assert.deepEqual(actual.innerHTML, 'a.');
});
+ test('should support text and lang', function () {
+ mockP5Prototype.describe('Chào các bạn', 'vi');
+ let actual = document.getElementById(myID + '_fallbackDesc');
+ assert.deepEqual(actual.innerHTML, 'Chào các bạn.');
+ assert.deepEqual(actual.getAttribute('lang'), 'vi');
+ assert.deepEqual(mockP5Prototype.elt.getAttribute('lang'), 'vi');
+ assert.isNull(document.getElementById(myID + '_Label'));
+ });
+
+ test('should support text and display', function () {
+ mockP5Prototype.describe('Texto visible', mockP5Prototype.LABEL);
+ assert.equal(
+ document.getElementById(myID + '_labelDesc').innerHTML,
+ 'Texto visible.'
+ );
+ assert.isNull(mockP5Prototype.elt.getAttribute('lang'));
+ });
+
+ test('should support text lang and display', function () {
+ mockP5Prototype.describe('Chào các bạn', mockP5Prototype.FALLBACK, 'vi');
+ let actual = document.getElementById(myID + '_fallbackDesc');
+ assert.deepEqual(actual.innerHTML, 'Chào các bạn.');
+ assert.deepEqual(actual.getAttribute('lang'), 'vi');
+ assert.isNull(document.getElementById(myID + '_Label'));
+ });
+
+ test('should support text display and lang', function () {
+ mockP5Prototype.describe('Chào các bạn', mockP5Prototype.LABEL, 'vi');
+ let actual = document.getElementById(myID + '_labelDesc');
+ assert.deepEqual(actual.innerHTML, 'Chào các bạn.');
+ assert.deepEqual(actual.getAttribute('lang'), 'vi');
+ });
+
+ test('should reject language before display', function () {
+ mockP5Prototype.describe('Chào các bạn', 'vi', mockP5Prototype.LABEL);
+ assert.isNull(document.getElementById(myID + '_fallbackDesc'));
+ assert.lengthOf(mockP5._friendlyError.mock.calls, 1);
+ assert.equal(mockP5._friendlyError.mock.calls[0][1], 'describe');
+ });
+
test('should not add extra period if string ends in "."', function () {
mockP5Prototype.describe('A.');
let actual = document.getElementById(myID + '_fallbackDesc');
@@ -104,6 +162,46 @@ suite('describe', function () {
assert.deepEqual(actual, '