[Remove Vuetify from Studio] Policy modals

[MisRob]

🙂 Looking for an issue? Welcome! This issue is open for contribution. If this is the first time you’re requesting an issue, please:

• Read Contributing guidelines carefully. Pay extra attention to Using generative AI. Pull requests and comments that don’t follow the guidelines won’t be answered.
• Confirm that you’ve read the guidelines in your comment.

Complexity: Low

The Change

Remove Vuetify from the following policy modals:

Privacy policy	Terms of Service	Community Standards

Majority of these components is already Vuetify free. The only remaining task is to migrate away from using ActionLink (which is build on top of Vuetify).

Replace all ActionLinks in the policy modals with the most suitable KDS button or link components.

Ensure that all interactions are functional as before. Do not modify ActionLink file. Do not refactor any other areas of the codebase.

How to Get There

• Login as user@a.com with password a
• Go to Settings > About Studio
• To open the modals, click Privacy policy, Terms of service, and Community standards

Guidance

• Read the project this issue is part of

Out of Scope

• Do not modify ActionLink file
• Do not refactor any other areas of the codebase

Expected UI/UX changes

• Minor visual differences naturally stemming from the use of KDS

Acceptance criteria

These are general acceptance criteria for the project. For each sub-issue, consider which are relevant.

General

• The specification above is followed.
• Except for "Expected UI/UX changes," there are no functional or visual differences in user experience.
• There are no regressions in the printing preview
• There are no ::v-deep or /deep/ selectors.
• All user interactions are manually tested with no regressions.
• Pull request includes screenshots.

a11y and i18n

See the project's "Guidance" for useful references.

• Implementation meets a11y standards
• All components are LTR and RTL compliant (preview with pnpm run devserver since :hot doesn't render RTL properly)
• User-facing strings are translated (except in Administration)
• The notranslate class been added to elements that shouldn't be translated by Google Chrome's automatic translation feature (e.g. user-generated text)
• Mobile experience is reasonable

Unit tests

• If there is a unit test suite already, it is meaningfully updated (even if tests don't fail)
• If there is no unit test suite, a new one is created. Do not use obsolete @vue/test-utils approach. Instead, use @testing-library/vue (Vue Testing Library).

References

Sub-issue of #5060

[ketan0919]

Hi @MisRob please assign this to me

[LightCreator1007]

Hello again!!

This would require to replace ActionLink in the Privacy, Terms, and Community Standards modals with the appropriate KDS equivalents (likely KButton or KExternalLink).
I will verify that the UX remains consistent and check for accessibility/RTL regressions.

If it's ok I could work on it :)

[MisRob]

Hi, thanks both. I will assign @ketan0919 here.

[ketan0919]

Hi @MisRob,I investigated the issue, but I’m unable to fix it at the moment. Please assign this to someone else who may be better suited to handle it

[sharma-anushka]

Hi @MisRob , since @ketan0919 isnt able to take this up right now, I would love to contribute to this.

[LightCreator1007]

Hllo,
Since I looked into this issue before, I would like to work on it if that's fine :)