[QE testing] form field selectors: align on using `id` where possible to simplify QE tests

[mturley]

Related to https://github.com/konveyor/tackle2-ui/issues/198. Ideally we can fix both together.

For rationale, see the "Accessibility and QE selectors" section at the bottom of the description in https://github.com/konveyor/tackle2-ui/pull/404. The main conclusions there are:

• We need a unique id attribute on each form input in order to provide accessible labels without redundant aria-label attributes
• We should NOT use aria-label as a selector for QE tests since it is user-facing text that is subject to change or be removed (it is used by screen-readers for accessibility)
• QE tests should use id selectors where possible and work with dev on what selector to use when id cannot be provided on a case-by-case basis. When this comes up it is likely a bug in PatternFly and we can provide a real id once that bug is addressed.

https://github.com/konveyor/tackle2-ui/pull/404 included changes to support the above for the Proxy settings form and the Identity form (the Create/Edit Credential modal in the Admin view). That PR includes heavy refactoring that should not be backported to 2.1.x, but we should create a separate PR to backport matching id / aria-label changes to 2.1.2 once that release branch exists. We should then make sure we follow up to help transition relevant QE tests to use the new id selectors.

As more forms are refactored to use the new react-hook-form components, we will also be aligning their field attributes in a similar way, and any of those that are merged before 2.1.2 code freeze should also have their selector changes backported as part of this issue.

[mturley]

PRs containing changes that will break QE tests, which should have custom backport PRs to align the 2.1.2 branch to use their new field selectors:

• https://github.com/konveyor/tackle2-ui/pull/404

Please edit this comment to add more if you identify them.

[gildub]

QE Requests (7 Sept 2023 - initially from https://github.com/konveyor/tackle2-ui/issues/1336) :

• [x] Cancel button ID to be 'cancel' across the UI.
• [x] Submit button ID to be 'submit' across the UI.
• [ ] Pages with top table level dropdown kebab with latter to be identified for example with id="toolbar-kebab"
  • [x] applications-table-assessment.tsx
  • [ ] applications-table-analysis.tsx
  • [ ] migration-waves.tsx
• [ ] Pages with table rows having action components, such as "edit" (pencil icon) or "actions" (kebab with dropdown) must have a selector. Note there is no need to be uniquely named across rows.
  • [x] applications-table-assessment.tsx
  • [ ] applications-table-analysis.tsx
  • [ ] migration-waves.tsx

[konveyor-ci-bot[bot]]

This issue has been marked 'good first issue' Please, make sure it aligns with the criteria found here