Merge Accessibility Add-On into p5.js

[lm-n]

This PR merges the text output and table output functionalities of p5.accessibility into p5.js by creating two functions:

-textOutput()
textOutput() creates a screenreader accessible output that describes the shapes present on the canvas. The general description of the canvas includes canvas size, canvas color, and number of basic shapes in the canvas example: 'Your output is a, 400 by 400 pixels, lavender blue canvas containing the following 4 shapes:'). This description is followed by a list of shapes where the color, position, and area of each shape are described (example: "orange ellipse at top left covering 1% of the canvas"). Each element can be selected to get more details. A table of elements is also provided. In this table, shape, color, location, coordinates and area are described (example: "orange ellipse location=top left area=2").

-gridOutput()
gridOutput(), formerly called table output, lays out the content of the canvas in the form of a grid (html table) based on the spatial location of each shape. A brief description of the canvas is available before the table output. This description includes: color of the background, size of the canvas, number of objects, and object types (example: "lavender blue canvas is 200 by 200 and contains 4 objects - 3 ellipses 1 rectangle"). The grid describes the content spatially, each element is placed on a cell of the table depending on its position. Within each cell an element the color and type of shape of that element are available (example: "orange ellipse"). These descriptions can be selected individually to get more details. A list of elements where shape, color, location, and area are described (example: "orange ellipse location=top left area=1%") is also available.

PR Checklist

• npm run lint passes
• [Inline documentation] is included / updated
• [Unit tests] are included / updated

[paging @lmccart 4 the 👀 ]

[lm-n]

Looking good! Two main thoughts so far:

• I think we will want a document that gives an overview of how the accessibility stuff works in general, placed in the contributor_docs folder. The former readme can serve as a starting point. What's missing from this doc currently when I think about what's in this PR, is a little more overview of how the different files fit together, and the flow that happens internally. This will be useful for making this work sustainable for future contributors to continue.
• I left some notes throughout, but avoiding abbreviations in variable and function naming will also help ensure this code is readable.

Thanks Lauren! I've added a doc documenting how different files and functions fit together under contributor docs.

[kjhollen]

Hey Luis, I've still got some more to review in detail but wanted to share what I've done so far before we chat!

[kjhollen]

Hey Luis, this is in great shape. I had some questions about the return values (arrays of two objects) for some of the helper functions. I can see how this is going to cut down on calls traversing the DOM, and hope this results in some good performance improvements!

[lm-n]

Hi @kjhollen! I've added my project wrap up! Lmk what you think!

[kjhollen]

Hey Luis, this looks like it's ready to go. I found one little typo in the documentation. The comments that you've added are super helpful, and will make it easier for other folks to contribute new features and maintain the existing functionality. Thanks for all your work on this and your many rounds of revisions!

[lmccart]

@lm-n This is really fantastic work, I'm so excited about it. A big step forward for the p5.accessibility project. I'm looking forward to continuing this work with you all, in any way we can. Thank you for your time and energy this summer, and for the thorough writeup and documentation. And thanks to @kjhollen for mentoring this summer!

[lm-n]

Hey Luis, this looks like it's ready to go. I found one little typo in the documentation. The comments that you've added are super helpful, and will make it easier for other folks to contribute new features and maintain the existing functionality. Thanks for all your work on this and your many rounds of revisions!

Hi @kjhollen ❤️ I've fixed the typo and moved the comments below the else! I think we should be ready to merge 😄 Thanks so much for all your help and support! @lmccart and @CleezyITP thank you ❤️, I'm excited to see what comes next!

[kjhollen]

did a local test after merging with the main branch this morning and all tests pass. :)

[LucaDamasco]

Just wanted to pop in and say this rocks. Really excited to be able to more easily share this work with my students and seeing that this was directly integrated into P5 after searching up p5.accessibility today was such an awesome sight! ❤️