From b03d5d978d1547ad64595a68d5d907ed767ad1b7 Mon Sep 17 00:00:00 2001 From: Bold Create Agent Date: Mon, 19 Oct 2026 11:28:34 +0000 Subject: [PATCH 1/5] Add accessibility documentation page Co-authored-by: kaliraj2026 <262289517+kaliraj2026@users.noreply.github.com> --- .../Layout/NavMenu.razor | 6 + .../Pages/Common/Accessibility.razor | 159 ++++++++++++++++++ .../Pages/Common/Accessibility.razor.css | 83 +++++++++ 3 files changed, 248 insertions(+) create mode 100644 samples/Blazor.Toolkit.Samples.Client/Pages/Common/Accessibility.razor create mode 100644 samples/Blazor.Toolkit.Samples.Client/Pages/Common/Accessibility.razor.css diff --git a/samples/Blazor.Toolkit.Samples.Client/Layout/NavMenu.razor b/samples/Blazor.Toolkit.Samples.Client/Layout/NavMenu.razor index e72176cb..1232dabd 100644 --- a/samples/Blazor.Toolkit.Samples.Client/Layout/NavMenu.razor +++ b/samples/Blazor.Toolkit.Samples.Client/Layout/NavMenu.razor @@ -45,6 +45,12 @@ ============================================================ *@ +
  • + + + Accessibility + +
  • diff --git a/samples/Blazor.Toolkit.Samples.Client/Pages/Common/Accessibility.razor b/samples/Blazor.Toolkit.Samples.Client/Pages/Common/Accessibility.razor new file mode 100644 index 00000000..07afc4ee --- /dev/null +++ b/samples/Blazor.Toolkit.Samples.Client/Pages/Common/Accessibility.razor @@ -0,0 +1,159 @@ +@page "/common/accessibility" +@inherits TocPublishingComponentBase + +Accessibility | Syncfusion Blazor Toolkit + +
    + + +
    +
    +
    +
    +

    Accessibility

    +

    Build inclusive, standards-compliant Blazor applications with confidence.

    +
    +
    + + WCAG 2.2 AAStandards compliant +
    +
    + + Keyboard AccessibleFull navigation support +
    +
    + + Screen Reader ReadyValidated with leading tools +
    +
    + + High Contrast SupportWorks in all contrast modes +
    +
    +
    + +
    + +
    +

    Why Accessibility Matters

    +

    We are committed to making the web more inclusive. Syncfusion Blazor Toolkit follows modern accessibility standards to ensure our components can be used by everyone, everywhere.

    +
    + @foreach (var feature in Features) + { +
    + +

    @feature.Title

    @feature.Description

    +
    + } +
    +
    + +
    +
    +

    Standards Compliance

    +
      +
    • WCAG 2.2Level AA
      • +
    • ADASupported
      • +
    • Section 508Supported
      • +
    • EN 301 549Supported
      • +
    • WAI-ARIASupported
      • +
    +
    + +
    +

    Screen Reader Compatibility

    +
    +
    NVDA
    +
    Narrator
    +
    +

    Validated with supported screen readers.

    +
    + +
    +

    Keyboard Shortcuts

    +

    Keyboard interactions vary across components. The shortcuts below represent commonly used navigation patterns. Refer to each component’s accessibility documentation for detailed keyboard support.

    +
    +
    Tab
    Move to next element
    +
    Shift + Tab
    Move to previous element
    +
    Enter
    Activate focused item
    +
    Space
    Trigger action
    +
    Esc
    Close popup, dialog or menu
    +
    +
    +
    + +
    +
    + +

    Theme Preview

    Experience accessible UI in different themes.

    +
    LightDarkHigh Contrast
    +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    +
    + + +
    +
    + +@code { + private static readonly FeatureItem[] Features = + [ + new("Keyboard Navigation", "Navigate all components using keyboard with a logical tab order.", "icon-keyboard", ""), + new("Screen Reader Support", "Works with NVDA and Narrator.", "icon-speaker", ""), + new("High Contrast Theme", "Optimized for Windows high contrast modes.", "icon-contrast", ""), + new("Semantic ARIA", "Implements ARIA roles, states and properties.", "icon-document", ""), + new("400% Zoom Support", "Maintains usability up to 400% zoom level.", "icon-zoom", ""), + new("Focus Management", "Visible focus indicators and accessible interaction patterns.", "icon-focus", "") + ]; + + private static readonly string[] VerifiedItems = ["WCAG 2.2", "ARIA Support", "Keyboard Navigation", "Screen Readers", "High Contrast", "Focus Management"]; + + private static readonly IReadOnlyList TocItemsList = + [ + new("overview", "Overview"), + new("why-accessibility", "Why Accessibility Matters"), + new("standards", "Standards Compliance"), + new("screen-readers", "Screen Reader Compatibility"), + new("keyboard-shortcuts", "Keyboard Shortcuts"), + new("theme-preview", "Theme Preview") + ]; + + protected override IReadOnlyList TocItems => TocItemsList; + + private sealed record FeatureItem(string Title, string Description, string IconClass, string Icon); +} diff --git a/samples/Blazor.Toolkit.Samples.Client/Pages/Common/Accessibility.razor.css b/samples/Blazor.Toolkit.Samples.Client/Pages/Common/Accessibility.razor.css new file mode 100644 index 00000000..f9837630 --- /dev/null +++ b/samples/Blazor.Toolkit.Samples.Client/Pages/Common/Accessibility.razor.css @@ -0,0 +1,83 @@ +.accessibility-page { + --a11y-ink: #102044; + --a11y-muted: #526487; + --a11y-blue: #0879f9; + max-width: 1440px; + margin: 0 auto; + padding: 4px 20px 28px; + color: var(--a11y-ink); + font-family: "Segoe UI Variable", "Segoe UI", Inter, system-ui, sans-serif; +} + +.accessibility-breadcrumb { display: flex; align-items: center; gap: 12px; margin: 4px 0 16px; color: #607293; font-size: 12px; } +.accessibility-breadcrumb a { color: #435c85; text-decoration: none; } +.accessibility-breadcrumb a:hover { text-decoration: underline; } +.accessibility-breadcrumb [aria-current="page"] { color: var(--a11y-ink); font-weight: 600; } +.accessibility-layout { position: relative; display: block; } +.accessibility-main { width: calc(100% - 280px); min-width: 0; } +.accessibility-hero { min-height: 190px; position: relative; display: block; } +.hero-copy { min-width: 0; width: 100%; padding-top: 0; } +.accessibility-hero h1 { margin: 0 0 2px; color: #102044; font-size: clamp(34px, 3vw, 46px); font-weight: 700; letter-spacing: -.035em; line-height: 1.15; } +.hero-subtitle { margin: 0 0 16px; color: #4c6085; font-size: clamp(16px, 1.5vw, 21px); line-height: 1.35; } +.feature-badges { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; max-width: 900px; } +.feature-badge { min-height: 61px; display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 18px; color: #102044; } +.feature-badge strong,.feature-badge small { display: block; white-space: nowrap; } +.feature-badge strong { font-size: 12px; font-weight: 700; } +.feature-badge small { margin-top: 3px; color: #4e6387; font-size: 11px; } +.badge-green { background: #e8f5e9; }.badge-blue { background: #e7f1ff; }.badge-purple { background: #f0eaff; }.badge-amber { background: #fff3d0; } +.badge-symbol { flex: 0 0 31px; width: 31px; height: 31px; display: grid; place-items: center; color: white; } +.badge-symbol svg { width: 30px; height: 30px; fill: currentColor; }.badge-green .badge-symbol { color: #138a3c; }.badge-blue .badge-symbol { color: #0879f9; }.badge-purple .badge-symbol { color: #6424e8; } +.badge-amber .sun-symbol { color: #f0a000; font-size: 32px; line-height: 1; } +.hero-art { width: 270px; height: 185px; position: absolute; top: -4px; right: -280px; margin: 0; } +.hero-orbit { position: absolute; border-radius: 34px; background: #e5f1ff; }.orbit-one { top: 4px; left: 8px; width: 215px; height: 130px; border-radius: 60px 22px 38px 32px; }.orbit-two { left: 20px; bottom: 24px; width: 50px; height: 44px; opacity: .8; } +.hero-window { position: absolute; z-index: 1; width: 150px; height: 120px; left: 65px; top: 26px; overflow: hidden; border: 1px solid #d4e5fb; border-radius: 10px; background: #fff; box-shadow: 0 8px 25px #2d67a01b; } +.window-bar { height: 20px; display: flex; align-items: center; gap: 5px; padding-left: 10px; background: #0951d9; }.window-bar i { width: 6px; height: 6px; border-radius: 50%; background: #fff; } +.accessibility-mark { width: 62px; height: 62px; margin: 17px auto; }.accessibility-mark svg { width: 100%; height: 100%; fill: #0879f9; }.accessibility-mark .person { fill: #fff; } +.hero-leaf { position: absolute; z-index: 2; background: #36b8a4; border-radius: 100% 0 100% 0; transform: rotate(-32deg); }.leaf-a { top: 13px; right: 9px; width: 25px; height: 67px; }.leaf-b { top: 58px; right: 31px; width: 22px; height: 54px; transform: rotate(-54deg); }.leaf-c { top: 78px; right: -2px; width: 19px; height: 40px; transform: rotate(15deg); } +.hero-caption { position: absolute; z-index: 3; right: 2px; bottom: 8px; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; background: white; box-shadow: 0 5px 18px #18345918; font-size: 11px; }.hero-caption > span:first-child { color: #0865df; font-size: 22px; }.hero-caption strong,.hero-caption small { display: block; }.hero-caption small { margin-top: 2px; } +.why-section { margin-top: 0; }.why-section h2 { margin: 0 0 3px; font-size: 21px; line-height: 1.3; font-weight: 700; }.section-intro { max-width: 820px; margin: 0 0 15px; color: var(--a11y-muted); font-size: 14px; line-height: 1.5; } +.feature-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; } +.feature-card { min-height: 96px; display: flex; align-items: flex-start; gap: 15px; padding: 17px 18px; border: 1px solid #e2e8f0; border-radius: 11px; background: #fff; box-shadow: 0 3px 12px #192f4d08; } +.feature-icon { width: 35px; height: 35px; flex: 0 0 35px; display: inline-flex; align-items: center; justify-content: center; color: var(--a11y-blue); }.feature-icon svg { width: 34px; height: 34px; fill: currentColor; } +.feature-card h3 { margin: 2px 0 5px; color: #14284d; font-size: 14px; font-weight: 650; line-height: 1.25; }.feature-card p { margin: 0; color: #526487; font-size: 12px; line-height: 1.5; } +.detail-grid { display: grid; grid-template-columns: 1fr 1.04fr 1.04fr; gap: 12px; margin-top: 12px; } +.detail-card { min-width: 0; min-height: 178px; padding: 14px 16px 12px; border: 1px solid #e2e8f0; border-radius: 11px; background: #fff; box-shadow: 0 3px 12px #192f4d08; } +.detail-card h2 { display: flex; align-items: center; gap: 9px; margin: 0 0 11px; font-size: 14px; line-height: 1.3; font-weight: 650; white-space: nowrap; }.detail-icon { color: var(--a11y-blue); font-size: 23px; font-weight: 800; }.keyboard-icon { font-size: 22px; } +.standards-list { list-style: none; display: grid; gap: 7px; margin: 0; padding: 0; font-size: 12px; }.standards-list li { display: grid; grid-template-columns: 20px 1fr 1fr; align-items: center; gap: 7px; }.success-check,.verified-list li span { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: #149342; color: white; font-size: 12px; font-weight: 700; }.standard-status { color: #526487; } +.reader-list { display: grid; grid-template-columns: repeat(2,1fr); gap: 9px; }.reader-tile { height: 66px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 1px solid #e2e8f0; border-radius: 10px; background: linear-gradient(135deg,#fafbfe,#f3f6fb); }.reader-tile strong { font-size: 11px; font-weight: 600; }.windows-icon { color: #0879f9; font-size: 23px; line-height: 1; }.narrator-icon { color: #0879f9; font-size: 24px; line-height: 1; }.reader-note { margin: 9px 0 0; color: #526487; font-size: 11px; } +.keyboard-note { margin: -4px 0 8px; color: #536581; font-size: 10px; line-height: 1.35; }.shortcut-list { border: 1px solid #e2e8f0; border-radius: 7px; overflow: hidden; margin: 0; font-size: 10px; }.shortcut-list div { min-height: 22px; display: grid; grid-template-columns: 39% 61%; border-bottom: 1px solid #e7ebf2; }.shortcut-list div:last-child { border-bottom: 0; }.shortcut-list dt,.shortcut-list dd { margin: 0; padding: 4px 7px; }.shortcut-list dt { background: #f3f5f9; }.shortcut-list dd { color: #526487; }.shortcut-list kbd { font: inherit; font-weight: 650; color: #1d3155; text-decoration: underline; text-underline-offset: 2px; } +.theme-showcase { width: calc(100% + 280px); display: grid; grid-template-columns: 300px minmax(0,1fr); align-items: center; gap: 18px; min-height: 96px; margin-top: 14px; padding: 12px 14px; border: 1px solid #e2e8f0; border-radius: 11px; background: #fff; box-shadow: 0 3px 12px #192f4d08; } +.theme-heading { display: flex; align-items: flex-start; gap: 11px; }.theme-heading-icon { color: var(--a11y-blue); font-size: 24px; line-height: 1.1; }.theme-heading h2 { margin: 0 0 3px; font-size: 14px; font-weight: 650; }.theme-heading p { margin: 0; color: #526487; font-size: 12px; }.theme-chips { display: flex; gap: 7px; margin-top: 8px; }.theme-chips span { padding: 5px 12px; border: 1px solid #e2e8f0; border-radius: 18px; font-size: 10px; font-weight: 600; white-space: nowrap; }.theme-chips span:first-child { border-color: #0879f9; color: #0879f9; } +.theme-previews { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }.theme-preview { min-width: 0; min-height: 66px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px; border: 1px solid #e2e8f0; border-radius: 9px; }.theme-preview button { height: 35px; min-width: 83px; border: 0; border-radius: 7px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }.theme-preview input { width: min(115px, 48%); min-width: 0; height: 35px; border-radius: 7px; padding: 0 10px; font: inherit; font-size: 12px; }.preview-light { background: #f4f5f8; }.preview-light button { background: #0879f9; color: #fff; }.preview-light input { color: #526487; border: 1px solid #dce3ed; background: #fff; }.preview-dark { background: #202a3c; border-color: #344055; }.preview-dark button { background: #0879f9; color: #fff; }.preview-dark input { color: #d6deeb; border: 1px solid #8390a2; background: #242e40; }.preview-contrast { background: #050505; border-color: #050505; }.preview-contrast button { border: 2px solid #ffeb00; color: #ffeb00; background: #000; }.preview-contrast input { color: #ffeb00; border: 2px solid #ffeb00; background: #000; } +.verified-panel { position: absolute; z-index: 2; top: 169px; right: 0; width: 260px; padding: 17px 20px 20px; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; box-shadow: 0 5px 20px #192f4d0b; text-align: center; }.verified-panel h2 { margin: 0 0 12px; font-size: 17px; font-weight: 700; }.progress-ring { width: 116px; height: 116px; display: grid; place-items: center; margin: 0 auto 11px; border: 12px solid #45b65d; border-radius: 50%; box-shadow: inset 0 0 0 1px #e5f4e8; }.progress-ring span { color: #14284d; font-size: 22px; font-weight: 700; }.verified-summary { margin: 0 0 10px; color: #526487; font-size: 13px; line-height: 1.45; }.verified-list { display: grid; gap: 6px; list-style: none; margin: 0; padding: 0 10px; text-align: left; }.verified-list li { display: flex; align-items: center; gap: 10px; font-size: 12px; }.verified-list li span { width: 18px; height: 18px; flex: 0 0 18px; }.verified-label { display: block; margin-top: 15px; color: #168640; font-size: 12px; } +.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } +.accessibility-page :focus-visible { outline: 3px solid #075ee8; outline-offset: 3px; } + +@media (max-width: 1250px) { + .accessibility-layout { display: block; } + .hero-art { width: 220px; right: -239px; transform: scale(.88); transform-origin: top right; } + .verified-panel { width: 225px; } + .theme-showcase { width: calc(100% + 239px); } + .feature-badge { padding-inline: 8px; gap: 6px; }.feature-badge strong { font-size: 10px; }.feature-badge small { font-size: 9px; } + .verified-panel { padding-inline: 14px; } + .theme-showcase { grid-template-columns: 255px minmax(0,1fr); gap: 12px; } + .theme-previews { gap: 8px; }.theme-preview { gap: 6px; padding: 8px; }.theme-preview button { min-width: 65px; } +} +@media (max-width: 960px) { + .accessibility-main { width: 100%; } + .verified-panel { position: static; width: auto; max-width: none; margin-top: 16px; }.verified-list { grid-template-columns: repeat(2,minmax(0,1fr)); } + .accessibility-hero { min-height: 205px; }.hero-art { display: none; }.hero-copy { padding-right: 0; }.feature-badges { max-width: none; } + .theme-showcase { width: 100%; grid-template-columns: 1fr; }.theme-heading { align-items: center; }.theme-previews { grid-template-columns: repeat(3,minmax(0,1fr)); } +} +@media (max-width: 680px) { + .accessibility-page { padding: 8px 10px 22px; }.accessibility-breadcrumb { margin-bottom: 14px; }.accessibility-hero { min-height: 0; margin-bottom: 22px; }.accessibility-hero h1 { font-size: 36px; }.hero-subtitle { font-size: 16px; margin: 4px 0 14px; } + .feature-badges { grid-template-columns: repeat(2,minmax(0,1fr)); }.feature-badge { min-height: 57px; border-radius: 13px; }.feature-badge strong { white-space: normal; font-size: 11px; }.feature-badge small { white-space: normal; font-size: 10px; } + .feature-grid { grid-template-columns: 1fr; gap: 9px; }.feature-card { min-height: 82px; padding: 14px; }.detail-grid { grid-template-columns: 1fr; gap: 9px; }.detail-card { min-height: 0; } + .reader-list { grid-template-columns: repeat(2,minmax(0,1fr)); }.theme-showcase { padding: 12px; }.theme-previews { grid-template-columns: 1fr; gap: 8px; }.theme-preview { justify-content: flex-start; padding: 10px 16px; }.theme-preview button { min-width: 85px; }.theme-preview input { max-width: 160px; }.verified-list { grid-template-columns: 1fr; } +} +@media (forced-colors: active) { + .accessibility-page,.accessibility-page * { forced-color-adjust: auto; } + .feature-badge,.feature-card,.detail-card,.theme-showcase,.verified-panel,.theme-preview,.reader-tile { border: 1px solid CanvasText; } + .progress-ring { border-color: Highlight; }.success-check,.verified-list li span { border: 1px solid CanvasText; } + .theme-preview button,.theme-preview input { border: 1px solid ButtonText; color: ButtonText; background: Canvas; } +} From 5b2ae8cb1f4ec17300f2f63ee75dcb713ac19917 Mon Sep 17 00:00:00 2001 From: Bold Create Agent Date: Mon, 19 Oct 2026 12:02:39 +0000 Subject: [PATCH 2/5] The Accessibility page implementation is already completed and the overa Co-authored-by: kaliraj2026 <262289517+kaliraj2026@users.noreply.github.com> --- .../Layout/NavMenu.razor | 2 +- .../Layout/NavMenu.razor.css | 1 + .../Pages/Common/Accessibility.razor | 39 +++++++++++++------ .../Pages/Common/Accessibility.razor.css | 16 ++++---- 4 files changed, 39 insertions(+), 19 deletions(-) diff --git a/samples/Blazor.Toolkit.Samples.Client/Layout/NavMenu.razor b/samples/Blazor.Toolkit.Samples.Client/Layout/NavMenu.razor index 1232dabd..7a6db794 100644 --- a/samples/Blazor.Toolkit.Samples.Client/Layout/NavMenu.razor +++ b/samples/Blazor.Toolkit.Samples.Client/Layout/NavMenu.razor @@ -47,7 +47,7 @@
  • - + Accessibility
    • diff --git a/samples/Blazor.Toolkit.Samples.Client/Layout/NavMenu.razor.css b/samples/Blazor.Toolkit.Samples.Client/Layout/NavMenu.razor.css index c9d091d1..b557e566 100644 --- a/samples/Blazor.Toolkit.Samples.Client/Layout/NavMenu.razor.css +++ b/samples/Blazor.Toolkit.Samples.Client/Layout/NavMenu.razor.css @@ -278,6 +278,7 @@ /* ==================================================================== ROW ICONS (col 2) ==================================================================== */ +.accessibility-menu-icon { display: block; width: 18px; height: 18px; } .sf-menu-icon { grid-column: 2; width: var(--sf-sidebar-icon-w); diff --git a/samples/Blazor.Toolkit.Samples.Client/Pages/Common/Accessibility.razor b/samples/Blazor.Toolkit.Samples.Client/Pages/Common/Accessibility.razor index 07afc4ee..61de107d 100644 --- a/samples/Blazor.Toolkit.Samples.Client/Pages/Common/Accessibility.razor +++ b/samples/Blazor.Toolkit.Samples.Client/Pages/Common/Accessibility.razor @@ -98,19 +98,32 @@

    Theme Preview

    Experience accessible UI in different themes.

    -
    LightDarkHigh Contrast
    +
    + + + +
    -
    -
    - -
    -
    - -
    -
    - -
    +
    + @if (SelectedTheme == "Light") + { +
    +
    Welcome backYour workspace is ready.
    +
    + } + else if (SelectedTheme == "Dark") + { +
    +
    Welcome backYour workspace is ready.
    +
    + } + else + { +
    +
    Welcome backYour workspace is ready.
    +
    + }
    @@ -143,6 +156,10 @@ private static readonly string[] VerifiedItems = ["WCAG 2.2", "ARIA Support", "Keyboard Navigation", "Screen Readers", "High Contrast", "Focus Management"]; + private string SelectedTheme { get; set; } = "Light"; + + private void SelectTheme(string theme) => SelectedTheme = theme; + private static readonly IReadOnlyList TocItemsList = [ new("overview", "Overview"), diff --git a/samples/Blazor.Toolkit.Samples.Client/Pages/Common/Accessibility.razor.css b/samples/Blazor.Toolkit.Samples.Client/Pages/Common/Accessibility.razor.css index f9837630..72940e2d 100644 --- a/samples/Blazor.Toolkit.Samples.Client/Pages/Common/Accessibility.razor.css +++ b/samples/Blazor.Toolkit.Samples.Client/Pages/Common/Accessibility.razor.css @@ -20,10 +20,12 @@ .accessibility-hero h1 { margin: 0 0 2px; color: #102044; font-size: clamp(34px, 3vw, 46px); font-weight: 700; letter-spacing: -.035em; line-height: 1.15; } .hero-subtitle { margin: 0 0 16px; color: #4c6085; font-size: clamp(16px, 1.5vw, 21px); line-height: 1.35; } .feature-badges { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; max-width: 900px; } -.feature-badge { min-height: 61px; display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 18px; color: #102044; } -.feature-badge strong,.feature-badge small { display: block; white-space: nowrap; } -.feature-badge strong { font-size: 12px; font-weight: 700; } -.feature-badge small { margin-top: 3px; color: #4e6387; font-size: 11px; } +.feature-badge { min-width: 0; min-height: 72px; box-sizing: border-box; display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 18px; color: #102044; } +.feature-badge > span:last-child { min-width: 0; flex: 1 1 auto; } +.feature-badge strong,.feature-badge small { display: block; white-space: normal; overflow-wrap: anywhere; } +.feature-badge strong { min-height: 2.25em; display: flex; align-items: center; font-size: 12px; font-weight: 700; line-height: 1.15; } +.feature-badge small { min-height: 2.4em; margin-top: 3px; color: #4e6387; font-size: 11px; line-height: 1.2; } +.feature-badge .badge-symbol { flex: 0 0 31px; } .badge-green { background: #e8f5e9; }.badge-blue { background: #e7f1ff; }.badge-purple { background: #f0eaff; }.badge-amber { background: #fff3d0; } .badge-symbol { flex: 0 0 31px; width: 31px; height: 31px; display: grid; place-items: center; color: white; } .badge-symbol svg { width: 30px; height: 30px; fill: currentColor; }.badge-green .badge-symbol { color: #138a3c; }.badge-blue .badge-symbol { color: #0879f9; }.badge-purple .badge-symbol { color: #6424e8; } @@ -38,7 +40,7 @@ .why-section { margin-top: 0; }.why-section h2 { margin: 0 0 3px; font-size: 21px; line-height: 1.3; font-weight: 700; }.section-intro { max-width: 820px; margin: 0 0 15px; color: var(--a11y-muted); font-size: 14px; line-height: 1.5; } .feature-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; } .feature-card { min-height: 96px; display: flex; align-items: flex-start; gap: 15px; padding: 17px 18px; border: 1px solid #e2e8f0; border-radius: 11px; background: #fff; box-shadow: 0 3px 12px #192f4d08; } -.feature-icon { width: 35px; height: 35px; flex: 0 0 35px; display: inline-flex; align-items: center; justify-content: center; color: var(--a11y-blue); }.feature-icon svg { width: 34px; height: 34px; fill: currentColor; } +.feature-icon,.feature-icon.icon-keyboard,.feature-icon.icon-speaker,.feature-icon.icon-contrast,.feature-icon.icon-document,.feature-icon.icon-zoom,.feature-icon.icon-focus { width: 35px; height: 35px; flex: 0 0 35px; display: inline-flex; align-items: center; justify-content: center; color: #0879f9; }.feature-icon svg { width: 34px; height: 34px; fill: currentColor; } .feature-card h3 { margin: 2px 0 5px; color: #14284d; font-size: 14px; font-weight: 650; line-height: 1.25; }.feature-card p { margin: 0; color: #526487; font-size: 12px; line-height: 1.5; } .detail-grid { display: grid; grid-template-columns: 1fr 1.04fr 1.04fr; gap: 12px; margin-top: 12px; } .detail-card { min-width: 0; min-height: 178px; padding: 14px 16px 12px; border: 1px solid #e2e8f0; border-radius: 11px; background: #fff; box-shadow: 0 3px 12px #192f4d08; } @@ -47,8 +49,8 @@ .reader-list { display: grid; grid-template-columns: repeat(2,1fr); gap: 9px; }.reader-tile { height: 66px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 1px solid #e2e8f0; border-radius: 10px; background: linear-gradient(135deg,#fafbfe,#f3f6fb); }.reader-tile strong { font-size: 11px; font-weight: 600; }.windows-icon { color: #0879f9; font-size: 23px; line-height: 1; }.narrator-icon { color: #0879f9; font-size: 24px; line-height: 1; }.reader-note { margin: 9px 0 0; color: #526487; font-size: 11px; } .keyboard-note { margin: -4px 0 8px; color: #536581; font-size: 10px; line-height: 1.35; }.shortcut-list { border: 1px solid #e2e8f0; border-radius: 7px; overflow: hidden; margin: 0; font-size: 10px; }.shortcut-list div { min-height: 22px; display: grid; grid-template-columns: 39% 61%; border-bottom: 1px solid #e7ebf2; }.shortcut-list div:last-child { border-bottom: 0; }.shortcut-list dt,.shortcut-list dd { margin: 0; padding: 4px 7px; }.shortcut-list dt { background: #f3f5f9; }.shortcut-list dd { color: #526487; }.shortcut-list kbd { font: inherit; font-weight: 650; color: #1d3155; text-decoration: underline; text-underline-offset: 2px; } .theme-showcase { width: calc(100% + 280px); display: grid; grid-template-columns: 300px minmax(0,1fr); align-items: center; gap: 18px; min-height: 96px; margin-top: 14px; padding: 12px 14px; border: 1px solid #e2e8f0; border-radius: 11px; background: #fff; box-shadow: 0 3px 12px #192f4d08; } -.theme-heading { display: flex; align-items: flex-start; gap: 11px; }.theme-heading-icon { color: var(--a11y-blue); font-size: 24px; line-height: 1.1; }.theme-heading h2 { margin: 0 0 3px; font-size: 14px; font-weight: 650; }.theme-heading p { margin: 0; color: #526487; font-size: 12px; }.theme-chips { display: flex; gap: 7px; margin-top: 8px; }.theme-chips span { padding: 5px 12px; border: 1px solid #e2e8f0; border-radius: 18px; font-size: 10px; font-weight: 600; white-space: nowrap; }.theme-chips span:first-child { border-color: #0879f9; color: #0879f9; } -.theme-previews { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }.theme-preview { min-width: 0; min-height: 66px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px; border: 1px solid #e2e8f0; border-radius: 9px; }.theme-preview button { height: 35px; min-width: 83px; border: 0; border-radius: 7px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }.theme-preview input { width: min(115px, 48%); min-width: 0; height: 35px; border-radius: 7px; padding: 0 10px; font: inherit; font-size: 12px; }.preview-light { background: #f4f5f8; }.preview-light button { background: #0879f9; color: #fff; }.preview-light input { color: #526487; border: 1px solid #dce3ed; background: #fff; }.preview-dark { background: #202a3c; border-color: #344055; }.preview-dark button { background: #0879f9; color: #fff; }.preview-dark input { color: #d6deeb; border: 1px solid #8390a2; background: #242e40; }.preview-contrast { background: #050505; border-color: #050505; }.preview-contrast button { border: 2px solid #ffeb00; color: #ffeb00; background: #000; }.preview-contrast input { color: #ffeb00; border: 2px solid #ffeb00; background: #000; } +.theme-heading { display: flex; align-items: flex-start; gap: 11px; }.theme-heading-icon { color: var(--a11y-blue); font-size: 24px; line-height: 1.1; }.theme-heading h2 { margin: 0 0 3px; font-size: 14px; font-weight: 650; }.theme-heading p { margin: 0; color: #526487; font-size: 12px; }.theme-chips { display: flex; gap: 7px; margin-top: 8px; }.theme-chips button { padding: 5px 12px; border: 1px solid #e2e8f0; border-radius: 18px; background: #fff; color: #263a5c; font: inherit; font-size: 10px; font-weight: 600; white-space: nowrap; cursor: pointer; }.theme-chips button.is-selected { border-color: #0879f9; color: #0879f9; background: #f4f8ff; } +.theme-previews { display: block; min-width: 0; }.theme-preview { min-width: 0; min-height: 126px; display: flex; align-items: center; justify-content: center; padding: 14px; border: 1px solid #e2e8f0; border-radius: 9px; transition: background-color .18s ease,border-color .18s ease; }.preview-window { width: min(100%, 450px); padding: 16px 18px; border: 1px solid #dce3ed; border-radius: 10px; background: #fff; box-shadow: 0 5px 17px #1c35501c; }.preview-window-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }.preview-window-heading strong,.preview-window-heading small { display: block; }.preview-window-heading strong { font-size: 13px; line-height: 1.3; }.preview-window-heading small { margin-top: 3px; color: #61718c; font-size: 11px; }.preview-window-mark { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 8px; background: #e8f1ff; color: #0879f9; font-size: 16px; font-weight: 700; }.preview-controls { display: flex; align-items: center; gap: 9px; }.preview-controls button { height: 35px; min-width: 100px; border: 0; border-radius: 6px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }.preview-controls input { flex: 1 1 auto; min-width: 0; height: 35px; border-radius: 6px; padding: 0 10px; font: inherit; font-size: 12px; }.preview-light { background: #f4f5f8; }.preview-light .preview-window { color: #102044; }.preview-light .preview-controls button { background: #0879f9; color: #fff; }.preview-light .preview-controls input { color: #526487; border: 1px solid #dce3ed; background: #fff; }.preview-dark { background: #202a3c; border-color: #344055; }.preview-dark .preview-window { color: #f1f5fb; border-color: #43516a; background: #29354a; }.preview-dark .preview-window-heading small { color: #bcc7d9; }.preview-dark .preview-window-mark { color: #a6c9ff; background: #354d70; }.preview-dark .preview-controls button { background: #3b82f6; color: #fff; }.preview-dark .preview-controls input { color: #e4ebf5; border: 1px solid #65738a; background: #202a3c; }.preview-contrast { background: #000; border-color: #ffeb00; }.preview-contrast .preview-window { color: #ffeb00; border: 2px solid #ffeb00; background: #000; box-shadow: none; }.preview-contrast .preview-window-heading small { color: #ffeb00; }.preview-contrast .preview-window-mark { color: #000; background: #ffeb00; }.preview-contrast .preview-controls button,.preview-contrast .preview-controls input { border: 2px solid #ffeb00; color: #ffeb00; background: #000; } .verified-panel { position: absolute; z-index: 2; top: 169px; right: 0; width: 260px; padding: 17px 20px 20px; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; box-shadow: 0 5px 20px #192f4d0b; text-align: center; }.verified-panel h2 { margin: 0 0 12px; font-size: 17px; font-weight: 700; }.progress-ring { width: 116px; height: 116px; display: grid; place-items: center; margin: 0 auto 11px; border: 12px solid #45b65d; border-radius: 50%; box-shadow: inset 0 0 0 1px #e5f4e8; }.progress-ring span { color: #14284d; font-size: 22px; font-weight: 700; }.verified-summary { margin: 0 0 10px; color: #526487; font-size: 13px; line-height: 1.45; }.verified-list { display: grid; gap: 6px; list-style: none; margin: 0; padding: 0 10px; text-align: left; }.verified-list li { display: flex; align-items: center; gap: 10px; font-size: 12px; }.verified-list li span { width: 18px; height: 18px; flex: 0 0 18px; }.verified-label { display: block; margin-top: 15px; color: #168640; font-size: 12px; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .accessibility-page :focus-visible { outline: 3px solid #075ee8; outline-offset: 3px; } From ae731bb6465e89b232b613d6baedaa7f83defe81 Mon Sep 17 00:00:00 2001 From: Bold Create Agent Date: Mon, 19 Oct 2026 12:37:41 +0000 Subject: [PATCH 3/5] The Accessibility page implementation is now very close to the expected Co-authored-by: kaliraj2026 <262289517+kaliraj2026@users.noreply.github.com> --- .../Pages/Common/Accessibility.razor.css | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/samples/Blazor.Toolkit.Samples.Client/Pages/Common/Accessibility.razor.css b/samples/Blazor.Toolkit.Samples.Client/Pages/Common/Accessibility.razor.css index 72940e2d..0bb0b779 100644 --- a/samples/Blazor.Toolkit.Samples.Client/Pages/Common/Accessibility.razor.css +++ b/samples/Blazor.Toolkit.Samples.Client/Pages/Common/Accessibility.razor.css @@ -20,7 +20,7 @@ .accessibility-hero h1 { margin: 0 0 2px; color: #102044; font-size: clamp(34px, 3vw, 46px); font-weight: 700; letter-spacing: -.035em; line-height: 1.15; } .hero-subtitle { margin: 0 0 16px; color: #4c6085; font-size: clamp(16px, 1.5vw, 21px); line-height: 1.35; } .feature-badges { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; max-width: 900px; } -.feature-badge { min-width: 0; min-height: 72px; box-sizing: border-box; display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 18px; color: #102044; } +.feature-badge { min-width: 0; min-height: 72px; box-sizing: border-box; display: flex; align-items: center; gap: 9px; padding: 9px 10px; border: 1px solid transparent; border-radius: 18px; color: #102044; } .feature-badge > span:last-child { min-width: 0; flex: 1 1 auto; } .feature-badge strong,.feature-badge small { display: block; white-space: normal; overflow-wrap: anywhere; } .feature-badge strong { min-height: 2.25em; display: flex; align-items: center; font-size: 12px; font-weight: 700; line-height: 1.15; } @@ -39,21 +39,27 @@ .hero-caption { position: absolute; z-index: 3; right: 2px; bottom: 8px; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; background: white; box-shadow: 0 5px 18px #18345918; font-size: 11px; }.hero-caption > span:first-child { color: #0865df; font-size: 22px; }.hero-caption strong,.hero-caption small { display: block; }.hero-caption small { margin-top: 2px; } .why-section { margin-top: 0; }.why-section h2 { margin: 0 0 3px; font-size: 21px; line-height: 1.3; font-weight: 700; }.section-intro { max-width: 820px; margin: 0 0 15px; color: var(--a11y-muted); font-size: 14px; line-height: 1.5; } .feature-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; } -.feature-card { min-height: 96px; display: flex; align-items: flex-start; gap: 15px; padding: 17px 18px; border: 1px solid #e2e8f0; border-radius: 11px; background: #fff; box-shadow: 0 3px 12px #192f4d08; } +.feature-card { min-width: 0; min-height: 96px; display: flex; align-items: flex-start; gap: 15px; padding: 17px 18px; border: 1px solid #e2e8f0; border-radius: 11px; background: #fff; box-shadow: 0 3px 12px #192f4d08; } .feature-icon,.feature-icon.icon-keyboard,.feature-icon.icon-speaker,.feature-icon.icon-contrast,.feature-icon.icon-document,.feature-icon.icon-zoom,.feature-icon.icon-focus { width: 35px; height: 35px; flex: 0 0 35px; display: inline-flex; align-items: center; justify-content: center; color: #0879f9; }.feature-icon svg { width: 34px; height: 34px; fill: currentColor; } .feature-card h3 { margin: 2px 0 5px; color: #14284d; font-size: 14px; font-weight: 650; line-height: 1.25; }.feature-card p { margin: 0; color: #526487; font-size: 12px; line-height: 1.5; } .detail-grid { display: grid; grid-template-columns: 1fr 1.04fr 1.04fr; gap: 12px; margin-top: 12px; } .detail-card { min-width: 0; min-height: 178px; padding: 14px 16px 12px; border: 1px solid #e2e8f0; border-radius: 11px; background: #fff; box-shadow: 0 3px 12px #192f4d08; } -.detail-card h2 { display: flex; align-items: center; gap: 9px; margin: 0 0 11px; font-size: 14px; line-height: 1.3; font-weight: 650; white-space: nowrap; }.detail-icon { color: var(--a11y-blue); font-size: 23px; font-weight: 800; }.keyboard-icon { font-size: 22px; } +.detail-card h2 { display: flex; align-items: center; gap: 9px; min-width: 0; min-height: 36px; margin: 0 0 11px; font-size: 14px; line-height: 1.3; font-weight: 650; white-space: normal; overflow-wrap: anywhere; }.detail-icon { flex: 0 0 auto; color: var(--a11y-blue); font-size: 23px; font-weight: 800; }.keyboard-icon { font-size: 22px; } .standards-list { list-style: none; display: grid; gap: 7px; margin: 0; padding: 0; font-size: 12px; }.standards-list li { display: grid; grid-template-columns: 20px 1fr 1fr; align-items: center; gap: 7px; }.success-check,.verified-list li span { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: #149342; color: white; font-size: 12px; font-weight: 700; }.standard-status { color: #526487; } .reader-list { display: grid; grid-template-columns: repeat(2,1fr); gap: 9px; }.reader-tile { height: 66px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 1px solid #e2e8f0; border-radius: 10px; background: linear-gradient(135deg,#fafbfe,#f3f6fb); }.reader-tile strong { font-size: 11px; font-weight: 600; }.windows-icon { color: #0879f9; font-size: 23px; line-height: 1; }.narrator-icon { color: #0879f9; font-size: 24px; line-height: 1; }.reader-note { margin: 9px 0 0; color: #526487; font-size: 11px; } .keyboard-note { margin: -4px 0 8px; color: #536581; font-size: 10px; line-height: 1.35; }.shortcut-list { border: 1px solid #e2e8f0; border-radius: 7px; overflow: hidden; margin: 0; font-size: 10px; }.shortcut-list div { min-height: 22px; display: grid; grid-template-columns: 39% 61%; border-bottom: 1px solid #e7ebf2; }.shortcut-list div:last-child { border-bottom: 0; }.shortcut-list dt,.shortcut-list dd { margin: 0; padding: 4px 7px; }.shortcut-list dt { background: #f3f5f9; }.shortcut-list dd { color: #526487; }.shortcut-list kbd { font: inherit; font-weight: 650; color: #1d3155; text-decoration: underline; text-underline-offset: 2px; } -.theme-showcase { width: calc(100% + 280px); display: grid; grid-template-columns: 300px minmax(0,1fr); align-items: center; gap: 18px; min-height: 96px; margin-top: 14px; padding: 12px 14px; border: 1px solid #e2e8f0; border-radius: 11px; background: #fff; box-shadow: 0 3px 12px #192f4d08; } +.theme-showcase { width: calc(100% + 280px); box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 300px) minmax(0,1fr); align-items: center; gap: 18px; min-height: 96px; margin-top: 14px; padding: 12px 14px; border: 1px solid #e2e8f0; border-radius: 11px; background: #fff; box-shadow: 0 3px 12px #192f4d08; } .theme-heading { display: flex; align-items: flex-start; gap: 11px; }.theme-heading-icon { color: var(--a11y-blue); font-size: 24px; line-height: 1.1; }.theme-heading h2 { margin: 0 0 3px; font-size: 14px; font-weight: 650; }.theme-heading p { margin: 0; color: #526487; font-size: 12px; }.theme-chips { display: flex; gap: 7px; margin-top: 8px; }.theme-chips button { padding: 5px 12px; border: 1px solid #e2e8f0; border-radius: 18px; background: #fff; color: #263a5c; font: inherit; font-size: 10px; font-weight: 600; white-space: nowrap; cursor: pointer; }.theme-chips button.is-selected { border-color: #0879f9; color: #0879f9; background: #f4f8ff; } .theme-previews { display: block; min-width: 0; }.theme-preview { min-width: 0; min-height: 126px; display: flex; align-items: center; justify-content: center; padding: 14px; border: 1px solid #e2e8f0; border-radius: 9px; transition: background-color .18s ease,border-color .18s ease; }.preview-window { width: min(100%, 450px); padding: 16px 18px; border: 1px solid #dce3ed; border-radius: 10px; background: #fff; box-shadow: 0 5px 17px #1c35501c; }.preview-window-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }.preview-window-heading strong,.preview-window-heading small { display: block; }.preview-window-heading strong { font-size: 13px; line-height: 1.3; }.preview-window-heading small { margin-top: 3px; color: #61718c; font-size: 11px; }.preview-window-mark { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 8px; background: #e8f1ff; color: #0879f9; font-size: 16px; font-weight: 700; }.preview-controls { display: flex; align-items: center; gap: 9px; }.preview-controls button { height: 35px; min-width: 100px; border: 0; border-radius: 6px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }.preview-controls input { flex: 1 1 auto; min-width: 0; height: 35px; border-radius: 6px; padding: 0 10px; font: inherit; font-size: 12px; }.preview-light { background: #f4f5f8; }.preview-light .preview-window { color: #102044; }.preview-light .preview-controls button { background: #0879f9; color: #fff; }.preview-light .preview-controls input { color: #526487; border: 1px solid #dce3ed; background: #fff; }.preview-dark { background: #202a3c; border-color: #344055; }.preview-dark .preview-window { color: #f1f5fb; border-color: #43516a; background: #29354a; }.preview-dark .preview-window-heading small { color: #bcc7d9; }.preview-dark .preview-window-mark { color: #a6c9ff; background: #354d70; }.preview-dark .preview-controls button { background: #3b82f6; color: #fff; }.preview-dark .preview-controls input { color: #e4ebf5; border: 1px solid #65738a; background: #202a3c; }.preview-contrast { background: #000; border-color: #ffeb00; }.preview-contrast .preview-window { color: #ffeb00; border: 2px solid #ffeb00; background: #000; box-shadow: none; }.preview-contrast .preview-window-heading small { color: #ffeb00; }.preview-contrast .preview-window-mark { color: #000; background: #ffeb00; }.preview-contrast .preview-controls button,.preview-contrast .preview-controls input { border: 2px solid #ffeb00; color: #ffeb00; background: #000; } -.verified-panel { position: absolute; z-index: 2; top: 169px; right: 0; width: 260px; padding: 17px 20px 20px; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; box-shadow: 0 5px 20px #192f4d0b; text-align: center; }.verified-panel h2 { margin: 0 0 12px; font-size: 17px; font-weight: 700; }.progress-ring { width: 116px; height: 116px; display: grid; place-items: center; margin: 0 auto 11px; border: 12px solid #45b65d; border-radius: 50%; box-shadow: inset 0 0 0 1px #e5f4e8; }.progress-ring span { color: #14284d; font-size: 22px; font-weight: 700; }.verified-summary { margin: 0 0 10px; color: #526487; font-size: 13px; line-height: 1.45; }.verified-list { display: grid; gap: 6px; list-style: none; margin: 0; padding: 0 10px; text-align: left; }.verified-list li { display: flex; align-items: center; gap: 10px; font-size: 12px; }.verified-list li span { width: 18px; height: 18px; flex: 0 0 18px; }.verified-label { display: block; margin-top: 15px; color: #168640; font-size: 12px; } +.verified-panel { position: absolute; z-index: 2; top: 169px; right: 0; width: 260px; box-sizing: border-box; padding: 17px 20px 20px; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; box-shadow: 0 5px 20px #192f4d0b; text-align: center; }.verified-panel h2 { margin: 0 0 12px; font-size: 17px; font-weight: 700; }.progress-ring { width: 116px; height: 116px; display: grid; place-items: center; margin: 0 auto 11px; border: 12px solid #45b65d; border-radius: 50%; box-shadow: inset 0 0 0 1px #e5f4e8; }.progress-ring span { color: #14284d; font-size: 22px; font-weight: 700; }.verified-summary { margin: 0 0 10px; color: #526487; font-size: 13px; line-height: 1.45; }.verified-list { display: grid; gap: 6px; list-style: none; margin: 0; padding: 0 10px; text-align: left; }.verified-list li { display: flex; align-items: center; gap: 10px; font-size: 12px; }.verified-list li span { width: 18px; height: 18px; flex: 0 0 18px; }.verified-label { display: block; margin-top: 15px; color: #168640; font-size: 12px; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .accessibility-page :focus-visible { outline: 3px solid #075ee8; outline-offset: 3px; } +.feature-badge,.feature-card,.detail-card,.theme-showcase,.verified-panel { transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease; } +.feature-badge:hover,.feature-card:hover,.detail-card:hover,.theme-showcase:hover,.verified-panel:hover { transform: translateY(-3px); border-color: #9bc7ff; box-shadow: 0 9px 24px #1c35501a; } + +@media (prefers-reduced-motion: reduce) { + .feature-badge,.feature-card,.detail-card,.theme-showcase,.verified-panel { transition: none; } +} @media (max-width: 1250px) { .accessibility-layout { display: block; } From a430a77141c248bf93ea3e109269b6018eac2449 Mon Sep 17 00:00:00 2001 From: Bold Create Agent Date: Mon, 19 Oct 2026 12:48:02 +0000 Subject: [PATCH 4/5] The Accessibility page is now almost complete. Co-authored-by: kaliraj2026 <262289517+kaliraj2026@users.noreply.github.com> --- .../Layout/MainLayout.razor | 7 +++++-- .../Pages/Common/Accessibility.razor | 13 ------------- .../Pages/Common/Accessibility.razor.css | 1 - 3 files changed, 5 insertions(+), 16 deletions(-) diff --git a/samples/Blazor.Toolkit.Samples.Client/Layout/MainLayout.razor b/samples/Blazor.Toolkit.Samples.Client/Layout/MainLayout.razor index de6f496f..f1b3b60a 100644 --- a/samples/Blazor.Toolkit.Samples.Client/Layout/MainLayout.razor +++ b/samples/Blazor.Toolkit.Samples.Client/Layout/MainLayout.razor @@ -153,7 +153,7 @@ } @* Wide Layout: Apply full-width layout class for pages that opt out of the right TOC. *@ -
    +
    @* Cascade the TOC holder to @Body so the rendered page can publish its section list @@ -171,7 +171,7 @@ RightToc pulls the holder via [CascadingParameter] and subscribes to its Changed event directly, so no wrapper component is needed. The same holder instance is shared with @Body above. *@ @* Wide Layout: Right panel is visible only on desktop and tablet, and hidden on wide-layout pages. *@ - @if (!IsMobile && !IsTablet && !IsWideLayoutPage) + @if (!IsMobile && !IsTablet && !IsWideLayoutPage && !IsAccessibilityPage) {