[full-ci]update button appearance in folder view modal

[PrajwolAmatya]

Description

The Close Folder button in password-protected folder modal is passive, which violates the minimum color contrast threshold.

Accessibility test returns following error:

Error: Found 1 severe accessibility violations in password protected folder modal

    expect(received).toHaveLength(expected)

    Expected length: 0
    Received length: 1
    Received array:  [{"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds", "help": "Elements must meet minimum color contrast ratio thresholds", "helpUrl": "https://dequeuniversity.com/rules/axe/4.11/color-contrast?application=playwright", "id": "color-contrast", "impact": "serious", "nodes": [{"all": [], "any": [{"data": {"bgColor": "#041e42", "contrastRatio": 2.53, "expectedContrastRatio": "4.5:1", "fgColor": "#4c5f79", "fontSize": "10.5pt (14px)", "fontWeight": "normal", "messageKey": null}, "id": "color-contrast", "impact": "serious", "message": "Element has insufficient color contrast of 2.53 (foreground color: #4c5f79, background color: #041e42, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1", "relatedNodes": [{"html": "<div class=\"oc-modal-body-actions oc-flex oc-flex-right\">", "target": [".oc-modal-body-actions"]}]}], "failureSummary": "Fix any of the following:
      Element has insufficient color contrast of 2.53 (foreground color: #4c5f79, background color: #041e42, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1", "html": "<button type=\"button\" class=\"oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-outline oc-modal-body-actions-cancel\"><!----> Close folder</button>", "impact": "serious", "none": [], "target": [".oc-modal-body-actions-cancel"]}], "tags": ["cat.color", "wcag2aa", "wcag143", "TTv5", "TT13.c", "EN-301-549", "EN-9.1.4.3", "ACT", "RGAAv4", "RGAA-3.2.1"]}]

Updated the button attributes to fix the color contrast threshold.

Related Issue

• Fixes <issue_link>

Motivation and Context

How Has This Been Tested?

• test environment:
• test case 1:
• test case 2:
• ...

Screenshots (if appropriate):

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)
• Technical debt
• Tests
• Documentation
• Maintenance (e.g. dependency updates or tooling)

Open tasks:

• ...

[update-docs]

Thanks for opening this pull request! The maintainers of this repository would appreciate it if you would create a changelog item based on your changes.

[LukasHirt]

This would unfortunately break behaviour in other modals. The button is passive on purpose to differentiate between the confirm (primary) and cancel (passive) buttons. I guess if we would need to solve it specifically for the folder modal, we would need to introduce a prop which can overwrite the button variant.

[DeepDiver1975]

Thanks for tackling the WCAG color-contrast violation on the modal cancel button — the underlying problem (the passive/outline Close folder button failing the 4.5:1 contrast ratio against the dark modal background) is real and worth fixing. A few blocking concerns before this can go in, though.

1. Snapshot tests are stale → CI is red (blocking).
The change only edits OcModal.vue, but OcModal is the shared design-system modal and its committed snapshot still encodes the old attributes:
packages/design-system/src/components/OcModal/__snapshots__/OcModal.spec.ts.snap still has variation="passive" appearance="outline" and oc-button-passive oc-button-passive-outline on .oc-modal-body-actions-cancel. The snapshot test will mismatch — which matches the failing continuous-integration/drone/pr build. Please regenerate snapshots (pnpm --filter design-system test -u or the repo's equivalent) and commit them so CI goes green.

2. Design-system regression: two primary/filled buttons (blocking concern).
This change is not scoped to the password-protected folder modal — it changes the default cancel button for every modal in the app. The confirm button already defaults to variation="primary" / appearance="filled" (buttonConfirmAppearance = ref('filled')). With this PR the cancel button also becomes primary + filled, so every modal now renders two identical filled-primary buttons side by side. That defeats the visual hierarchy (a dialog should have a single emphasized primary action and a de-emphasized dismiss action) and contradicts the component's own documented contract ("the cancel buttons defaults to the passive variation"). Making cancel co-equal with confirm is a UX regression beyond the reported issue.

A more targeted fix that preserves the secondary-button semantics while meeting contrast would be preferable, e.g. keep the cancel button passive but use appearance="filled" (filled passive), or fix the passive/outline token contrast in the theme, rather than promoting cancel to primary/filled globally. Please confirm with design which direction is intended, and ideally validate visually across the common modals (delete/confirm dialogs, not just this one).

3. Missing changelog fragment.
This is a user-facing UI/accessibility change, so it needs a changelog/unreleased/ fragment following changelog/TEMPLATE (e.g. Bugfix: ... with the issue/PR URLs). There's no linked issue in the description (Fixes <issue_link> is still a placeholder) — please link the accessibility issue and reference it in the fragment, or use the PR number if there is genuinely no issue.

4. PR metadata. The "Related Issue" and "Types of changes" sections are still the unfilled template. Please link the issue and tick the bug-fix box.

Summary: the accessibility goal is valid, but the current approach has stale snapshots (red CI), an app-wide double-primary-button regression, and a missing changelog. Requesting changes.