Clean up all major issues in existing forms. by mbusch3 · Pull Request #1166 · ucfopen/UDOIT

mbusch3 · 2026-04-28T18:56:19Z

It's totally cool. I only changed 98 files this time... I am so, so sorry.

Cleaned up some unused files...

Deleted:

assets/css/ContentPreview.css (old and unused)
assets/css/app.css (old and unused)
assets/css/header.css (old and unused)
assets/js/Components/Forms/AltText.js (renamed to AltTextForm.js)
assets/js/Components/Forms/AnchorText.js (renamed to AnchorTextForm.js)
assets/js/Components/Forms/LinkForm.js (old form only for phpAlly)
assets/js/Components/Forms/QuoteForm.js (only use the Blockquote one)
assets/js/Components/Forms/TemplateReviewOnlyForm.js (no longer used as a template)
assets/js/Components/ReviewFilesPage.css (reworked and included in theme)
assets/js/Components/Widgets/FileInformation.css (replaced in the FileForm.js with a class)
assets/js/Components/Widgets/FileStatus.js (replaced in the FileForm.js)
assets/js/Components/Widgets/FileStatus.css

Changed the Forms' Update Process

assets/js/Components/FixIssuesPage.js
assets/js/Components/FixIssuesContentPreview.js
assets/js/Components/HtmlPreview.js
assets/js/Components/UfixitWidget.js

Most forms still just rewrite a tiny bit of HTML without any major changes. When this happens, they put the new HTML in the issue.newHtml attribute and call the handleActiveIssue function. Up in the fixIssuesPage.js component, that function replaces the original element with the new one. This produces an update to the tempActiveContentItem, which is (1) ready to be saved, with all the new HTML exactly as it needs to be, and (2) sent to the htmlPreview.js component, where extra code is added just for UDOIT, like the class that shows the red outline or the Alt Text Preview widget.

Additionally, when forms also change the overall page (like the SelectValidIdForm.js), the new contentItem is passed along with the new issue in the handleActiveIssue function. This has removed the need for a separate handleActiveContentItem function and handleContentItemSave function in the FixIssuePage.js.

When the "Save" button is clicked, it just instantly saves the tempActiveContentItem which is already prepared.

Major Reworks of Certain Forms

assets/js/Components/Forms/ContrastForm.js
assets/js/Components/Forms/FileForm.js
assets/js/Components/Forms/ListForm.js
assets/js/Components/Forms/SelectValidIdForm.js

Rebuilt major sections of all of the student-built forms to make them match the rest of the app in style and the new saving flow. Wish I'd cleaned up the saving flow BEFORE they built them, but future forms really should be fairly easy to build out now.

Handle "Delete Element" Without Crashing

assets/js/Services/Settings.js
assets/js/Components/FixIssuesPage.js
assets/js/Components/HtmlPreview.js
assets/js/Components/UfixitWidget.js
assets/js/Components/Forms/AnchorTextForm.js
assets/js/Components/Forms/HeadingEmptyForm.js
assets/js/Components/Forms/TableCaptionForm.js

On forms where one of the valid options is to delete the problematic element, special care must be taken to make sure that the preview doesn't crash. Now, when a form has selected that option, the preview DOES delete the element but does NOT launch the "Accessibility Barrier Not Found" popup or lose focus on the preview screen.

Changed Where User Preference Classes are Placed

assets/js/Components/App.js
assets/css/udoit4-theme.css

Before, all of the classes that render the app differently based on preferences (font type and size, dark mode, etc) were added to the #app-container element. That worked well EXCEPT when we want to apply these styles to TinyMCE popups and other dialogs which are added programmatically. App.js now has an addSettingsClasses function, which applies the classes to the <body> element, where they can be inherited by <dialog>s.

Full Screen Option

assets/js/Components/Header.css
assets/js/Components/Header.js

Completely reworked the header to add a full-screen option. It was surprisingly difficult to get everything to align properly and compute when to show the hamburger menu instead of the link names.

Dynamic Colors for Reports Screen

assets/js/Components/Reports/ResolutionsReport.css
assets/js/Components/Reports/ResolutionsReport.js

Made accessible colors for the reports chart in both light and dark mode.

Comprehensive Design Audit

All the files...

Worked with Tory over three different days to do a final version of all flows and pages in both light and dark mode across all screen sizes. A whole lot of small CSS and class changes that affected the entire app.

…on't get properly deleted

…ed list issues.

…elete element.

…e-element-bug

Ishfaq-code · 2026-05-07T16:55:59Z

The contrast form (ContrastForm.js) seems to target pages which have relevant/good contrast. This maybe a frontend calculation issue or something to do with how backend is categorizing stuff.

Screen.Recording.2026-05-07.at.12.53.32.PM.mov

Ishfaq-code · 2026-05-07T17:03:22Z

Seems like if there are no changes to be saved, you can actually spam the save button and create an endless chain of alerts. Some sort of cooldown could be added on the frontend to prevent this.

Screen.Recording.2026-05-07.at.1.00.13.PM.mov

Ishfaq-code · 2026-05-07T17:17:35Z

Close form after deleting something (such as from AnchorTextForm.js) may be more intuitive as user is not able to edit the form anymore. Seems redundant with the error message

Ishfaq-code · 2026-05-08T15:26:47Z

The focus seems to acting a bit weird on the SelectValidIDForm.js, specifically if something is getting unselected the focus effect does not disappear. I do remember fixing this in my PR a while back but might have been removed during merge?

Screen.Recording.2026-05-08.at.11.22.10.AM.mov

Ishfaq-code · 2026-05-08T15:28:24Z

The FileForm.js is broken in this branch and dev. This is due to one of the packages not being installed when updating PHP and Symfony. This issue is addressed by #1180 and should be fixed once merged.

Ishfaq-code · 2026-05-08T18:51:59Z

The List Form seems to have some weird behaviour with saving (I don't know if it is intentional). On a successful save the modal jumps to the next issue (or close the modal) rather than showing the fixed state of the issue. This may due to how list forms are grouped.

Ishfaq-code · 2026-05-08T18:56:42Z

The List form only marks an element as a potential barrier if it has 1 white space after the list indicator (numbers or dashes).

For example

1.With no whitespace after the "." 

2. With 1 whitespace after the "." 

3.  With 2 whitespaces after the "."

 

-With no whitespace after the "." 

- With 1 whitespace after the "." 

-  With 1 whitespace after the "."

Only the middle element is marked as a list error in both of these cases

Ishfaq-code · 2026-05-08T19:06:06Z

Text spacing slider which is found in the settings page seems to be broken. It does not create spacing between text locally or in the database.

Ishfaq-code · 2026-05-08T19:10:24Z

Some issues with the Spanish Translations. May be prevalent in dev as well.

Ishfaq-code · 2026-05-12T15:39:09Z

The FileForm.js is broken in this branch and dev. This is due to one of the packages not being installed when updating PHP and Symfony. This issue is addressed by #1180 and should be fixed once merged.

I manually installed Symfony/Mime on this branch to test the files and they seem to be working as intended. Should be operational once we merge the branch containing Symfony/Mime into dev and pull dev into here.

Ishfaq-code

Functionality wise the forms look good and useable. Couple of tiny bugs that mess with the UI/nitpicks but nothing that makes the forms unusable in anyway. Should be fairly easy fixes and then good to merge.

ewainberg and others added 19 commits April 10, 2026 16:01

Adds linter

79c46b0

Adds prettier formatter

13a035f

Ignores eslint prop-type rule and test lints+pretties file

d389121

Remove package-lock.json

4d715d3

Adds prettier and eslint scripts

29e92f0

Moved cache location + made the script compatible with Windows

9b00561

Initial list form. No saving mechanism yet

09bde9b

Adds auto fix button and some translation labels

53be086

Improves list detection logic, matches it to current IBM detection regex

e4e5805

Fixes spacing deletion bug

a5a06eb

Adds undo to auto-fix

9b1ef25

Adds saving for list issues and fixes a bug where items with issues d…

470818a

…on't get properly deleted

First major pass at the list form. Still jumps funny when viewing fix…

3c5d4be

…ed list issues.

Finished List form integration.

b133479

Reworked saving logic for all forms.

f39d327

SelectValidId still not updating in preview

12a6864

SelectValidId now previews, saves, and updates properly

52b9bce

Updated Label form for label_unique issues.

b6b5832

Finished! Cleans up flicker when new option picked, especially with d…

688bb73

…elete element.

mbusch3 requested a review from dmols April 28, 2026 18:56

Merge branch 'dev' into delete-element-bug

cb1c751

mbusch3 changed the base branch from dev to form-ui-changes April 28, 2026 19:17

dmols added 2 commits May 7, 2026 10:26

Merge branch 'form-ui-changes' of github.com:ucfopen/UDOIT into delet…

7a0e351

…e-element-bug

Updating delete-element-bug with changes on form-ui-changes

4747e5a

Ishfaq-code mentioned this pull request May 7, 2026

List form integration #1159

Closed

Ishfaq-code reviewed May 12, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Clean up all major issues in existing forms.#1166

Clean up all major issues in existing forms.#1166
mbusch3 wants to merge 22 commits into
ucfopen:form-ui-changesfrom
mbusch3:delete-element-bug

mbusch3 commented Apr 28, 2026

Uh oh!

Ishfaq-code commented May 7, 2026

Uh oh!

Ishfaq-code commented May 7, 2026

Uh oh!

Ishfaq-code commented May 7, 2026

Uh oh!

Ishfaq-code commented May 8, 2026

Uh oh!

Ishfaq-code commented May 8, 2026

Uh oh!

Ishfaq-code commented May 8, 2026

Uh oh!

Ishfaq-code commented May 8, 2026

Uh oh!

Ishfaq-code commented May 8, 2026

Uh oh!

Ishfaq-code commented May 8, 2026

Uh oh!

Ishfaq-code commented May 12, 2026

Uh oh!

Ishfaq-code left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

mbusch3 commented Apr 28, 2026

Cleaned up some unused files...

Changed the Forms' Update Process

Major Reworks of Certain Forms

Handle "Delete Element" Without Crashing

Changed Where User Preference Classes are Placed

Full Screen Option

Dynamic Colors for Reports Screen

Comprehensive Design Audit

Uh oh!

Ishfaq-code commented May 7, 2026

Uh oh!

Ishfaq-code commented May 7, 2026

Uh oh!

Ishfaq-code commented May 7, 2026

Uh oh!

Ishfaq-code commented May 8, 2026

Uh oh!

Ishfaq-code commented May 8, 2026

Uh oh!

Ishfaq-code commented May 8, 2026

Uh oh!

Ishfaq-code commented May 8, 2026

Uh oh!

Ishfaq-code commented May 8, 2026

Uh oh!

Ishfaq-code commented May 8, 2026

Uh oh!

Ishfaq-code commented May 12, 2026

Uh oh!

Ishfaq-code left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants