Feat/spike ant d strategy

[jarvisraymond-uchicago]

Link to JIRA ticket if there is one:
https://ctds-planx.atlassian.net/browse/VADC-1400

Draft PR for Discussion Purposes

Prototype of Tech Approaches for AntD Remediation.

• Creates prototype library AntDAccessibilityFixes
  • Consists of a variety of functions to inject aria labels and/or otherwise manipulate non-508 compliant markup created by AntD Library
• Alternative approach to recreating AntD components from scratch or porting VADC applications to use library that is accessible out-of-box (both approaches likely exceeding a year of dev time)
• This prototype adds aria labels to AntD table radio buttons, but the library can be expanded using a similar approach to add and remove attributes such as aria-labels, titles and summaries.
• Uses descriptive functions to handle the unique requirements for each ticket
  • helps organize and separate logic for 508 compliance
• Trade Offs: DOM manipulation should probably be kept as minimal while meeting compliance standards to reduce complexity and maintainability issues.
  • i.e. adding one aria label vs. adding a wrapping <label> element, unique id attributes, for attributes referencing other DOM nodes etc.

[mfshao]

maybe we can try to update to antd v5, might be easier than migrating everyting to mantine

[jarvisraymond-uchicago]

maybe we can try to update to antd v5, might be easier than migrating everyting to mantine

Interesting idea! Do you know if antd v5 is 508 compliant?

[mfshao]

maybe we can try to update to antd v5, might be easier than migrating everyting to mantine

Interesting idea! Do you know if antd v5 is 508 compliant?

I'm not sure, and tbh I don't have a high hope on that. But maybe it will make our patching easier (although it can also goes to the other way)
Franking I think replacing with something like mantine might be the best solution. But that level of effort makes me feeling uncertain

[github-actions]

filepath	$$\textcolor{#23d18b}{\tt{passed}}$$	$$\textcolor{#f14c4c}{\tt{failed}}$$	$$\textcolor{#ffa500}{\tt{skipped}}$$	SUBTOTAL
$$\textcolor{#23d18b}{\tt{tests/test\_requestor.py}}$$	$$\textcolor{#23d18b}{\tt{5}}$$	$$\textcolor{#666666}{\tt{0}}$$	$$\textcolor{#666666}{\tt{0}}$$	$$\textcolor{#23d18b}{\tt{5}}$$
$$\textcolor{#23d18b}{\tt{tests/test\_ras\_authn.py}}$$	$$\textcolor{#23d18b}{\tt{3}}$$	$$\textcolor{#666666}{\tt{0}}$$	$$\textcolor{#666666}{\tt{0}}$$	$$\textcolor{#23d18b}{\tt{3}}$$
$$\textcolor{#23d18b}{\tt{tests/test\_data\_upload.py}}$$	$$\textcolor{#23d18b}{\tt{2}}$$	$$\textcolor{#666666}{\tt{0}}$$	$$\textcolor{#666666}{\tt{0}}$$	$$\textcolor{#23d18b}{\tt{2}}$$
$$\textcolor{#23d18b}{\tt{tests/test\_indexing\_page.py}}$$	$$\textcolor{#23d18b}{\tt{2}}$$	$$\textcolor{#666666}{\tt{0}}$$	$$\textcolor{#666666}{\tt{0}}$$	$$\textcolor{#23d18b}{\tt{2}}$$
$$\textcolor{#23d18b}{\tt{tests/test\_audit\_service.py}}$$	$$\textcolor{#23d18b}{\tt{1}}$$	$$\textcolor{#666666}{\tt{0}}$$	$$\textcolor{#666666}{\tt{0}}$$	$$\textcolor{#23d18b}{\tt{1}}$$
$$\textcolor{#23d18b}{\tt{tests/test\_login\_page.py}}$$	$$\textcolor{#23d18b}{\tt{2}}$$	$$\textcolor{#666666}{\tt{0}}$$	$$\textcolor{#666666}{\tt{0}}$$	$$\textcolor{#23d18b}{\tt{2}}$$
$$\textcolor{#23d18b}{\tt{tests/test\_homepage.py}}$$	$$\textcolor{#23d18b}{\tt{1}}$$	$$\textcolor{#666666}{\tt{0}}$$	$$\textcolor{#666666}{\tt{0}}$$	$$\textcolor{#23d18b}{\tt{1}}$$
$$\textcolor{#23d18b}{\tt{tests/test\_graph\_submit\_and\_query.py}}$$	$$\textcolor{#23d18b}{\tt{1}}$$	$$\textcolor{#666666}{\tt{0}}$$	$$\textcolor{#666666}{\tt{0}}$$	$$\textcolor{#23d18b}{\tt{1}}$$
$$\textcolor{#ffa500}{\tt{tests/test\_gen3ff\_landing\_page.py}}$$	$$\textcolor{#666666}{\tt{0}}$$	$$\textcolor{#666666}{\tt{0}}$$	$$\textcolor{#ffa500}{\tt{2}}$$	$$\textcolor{#ffa500}{\tt{2}}$$
$$\textcolor{#ffa500}{\tt{tests/test\_register\_user.py}}$$	$$\textcolor{#666666}{\tt{0}}$$	$$\textcolor{#666666}{\tt{0}}$$	$$\textcolor{#ffa500}{\tt{2}}$$	$$\textcolor{#ffa500}{\tt{2}}$$
$$\textcolor{#f14c4c}{\tt{tests/test\_pfb\_export.py}}$$	$$\textcolor{#666666}{\tt{0}}$$	$$\textcolor{#f14c4c}{\tt{1}}$$	$$\textcolor{#666666}{\tt{0}}$$	$$\textcolor{#f14c4c}{\tt{1}}$$
$$\textcolor{#f14c4c}{\tt{tests/test\_discoverypage.py}}$$	$$\textcolor{#666666}{\tt{0}}$$	$$\textcolor{#f14c4c}{\tt{1}}$$	$$\textcolor{#666666}{\tt{0}}$$	$$\textcolor{#f14c4c}{\tt{1}}$$
$$\textcolor{#f14c4c}{\tt{TOTAL}}$$	$$\textcolor{#23d18b}{\tt{17}}$$	$$\textcolor{#f14c4c}{\tt{2}}$$	$$\textcolor{#ffa500}{\tt{4}}$$	$$\textcolor{#f14c4c}{\tt{23}}$$

Please find the detailed integration test report here

Please find the ci env pod logs here

[jarvisraymond-uchicago]

Investigate RC option (building block of AntD)

https://github.com/react-component/table

[jarvisraymond-uchicago]

@pieterlukasse Implement fixes at NPM build step (postHTML: https://www.npmjs.com/package/posthtml)

Not sure if this would work or not. Requires additional library.

Example using Tree matching with AntD component (generated by ChatGPT):

posthtml()
  .use(function(tree) {
    // Targeting an element with a specific 'data-select-id'
    tree.match({ tag: 'select', attrs: { 'data-select-id': '1' } }, (node) => {
      node.attrs = node.attrs || {};
      node.attrs['data-test'] = 'custom-select'; // Add a new data-test attribute
      return node;
    });

    return tree;
  })
  .process(html)
  .then(result => {
    console.log(result.html);  // Outputs modified HTML with the added data-test attribute
  });