From e529a859433e1c4483c5618d769dc03d0b657c51 Mon Sep 17 00:00:00 2001 From: Gerardo Valenzuela Date: Tue, 9 Apr 2024 22:47:36 -0700 Subject: [PATCH 01/14] updated final stat component example to maintain consistent capitalization --- src/docs/src/routes/(docs)/components/stat/+page.svelte.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/docs/src/routes/(docs)/components/stat/+page.svelte.md b/src/docs/src/routes/(docs)/components/stat/+page.svelte.md index 7aa54858649..330e6e855b7 100644 --- a/src/docs/src/routes/(docs)/components/stat/+page.svelte.md +++ b/src/docs/src/routes/(docs)/components/stat/+page.svelte.md @@ -324,7 +324,7 @@ data="{[
$89,400
- +
@@ -344,7 +344,7 @@ data="{[
$89,400
- +
From 4008b96f067935bc172ca4eff17a902b4993af6b Mon Sep 17 00:00:00 2001 From: Gerardo Valenzuela Date: Sun, 14 Apr 2024 03:11:12 -0700 Subject: [PATCH 02/14] fix #2950 improved docs for timeline component for better accessibility --- .../components/timeline/+page.svelte.md | 450 +++++++++--------- 1 file changed, 225 insertions(+), 225 deletions(-) diff --git a/src/docs/src/routes/(docs)/components/timeline/+page.svelte.md b/src/docs/src/routes/(docs)/components/timeline/+page.svelte.md index 4908e35099b..be370c77ae2 100644 --- a/src/docs/src/routes/(docs)/components/timeline/+page.svelte.md +++ b/src/docs/src/routes/(docs)/components/timeline/+page.svelte.md @@ -33,7 +33,7 @@ data="{[
-
+
@@ -44,37 +44,37 @@ data="{[
First Macintosh computer
-
+
  • -
    +
    1998
    iMac
    -
    +
  • -
    +
    2001
    iPod
    -
    +
  • -
    +
    2007
    iPhone
    -
    +
  • -
    +
    2015
    @@ -90,37 +90,37 @@ data="{[
    First Macintosh computer
    -
    +
  • -
    +
    1998
    iMac
    -
    +
  • -
    +
    2001
    iPod
    -
    +
  • -
    +
    2007
    iPhone
    -
    +
  • -
    +
    2015
    @@ -138,34 +138,34 @@ data="{[
    First Macintosh computer
    -
    +
  • -
    +
    iMac
    -
    +
  • -
    +
    iPod
    -
    +
  • -
    +
    iPhone
    -
    +
  • -
    +
    @@ -179,34 +179,34 @@ data="{[
    First Macintosh computer
    -
    +
  • -
    +
    iMac
    -
    +
  • -
    +
    iPod
    -
    +
  • -
    +
    iPhone
    -
    +
  • -
    +
    @@ -223,34 +223,34 @@ data="{[
    -
    +
  • -
    +
    iMac
    -
    +
  • -
    +
    iPod
    -
    +
  • -
    +
    iPhone
    -
    +
  • -
    +
    Apple Watch
    @@ -264,34 +264,34 @@ data="{[
    -
    +
  • -
    +
    iMac
    -
    +
  • -
    +
    iPod
    -
    +
  • -
    +
    iPhone
    -
    +
  • -
    +
    Apple Watch
    @@ -308,34 +308,34 @@ data="{[
    -
    +
  • -
    +
    iMac
    -
    +
  • -
    +
    iPod
    -
    +
  • -
    +
    iPhone
    -
    +
  • -
    +
    Apple Watch
    @@ -349,34 +349,34 @@ data="{[
    -
    +
  • -
    +
    iMac
    -
    +
  • -
    +
    iPod
    -
    +
  • -
    +
    iPhone
    -
    +
  • -
    +
    Apple Watch
    @@ -393,34 +393,34 @@ data="{[
    -
    +
  • -
    +
    iMac
    -
    +
  • -
    +
    iPod
    -
    +
  • -
    +
    iPhone
    -
    +
  • -
    +
    Apple Watch
    @@ -434,34 +434,34 @@ data="{[
    -
    +
  • -
    +
    iMac
    -
    +
  • -
    +
    iPod
    -
    +
  • -
    +
    iPhone
    -
    +
  • -
    +
    Apple Watch
    @@ -475,25 +475,25 @@ data="{[
    • First Macintosh computer
      -
      +
    • -
      +
      iMac
      -
      +
    • -
      +
      iPod
      -
      +
    • -
      +
      iPhone
      -
      +
    • -
      +
      Apple Watch
    @@ -501,25 +501,25 @@ data="{[ `
    • First Macintosh computer
      -
      +
    • -
      +
      iMac
      -
      +
    • -
      +
      iPod
      -
      +
    • -
      +
      iPhone
      -
      +
    • -
      +
      Apple Watch
    ` @@ -534,37 +534,37 @@ data="{[
    First Macintosh computer
    -
    +
  • -
    +
    1998
    iMac
    -
    +
  • -
    +
    2001
    iPod
    -
    +
  • -
    +
    2007
    iPhone
    -
    +
  • -
    +
    2015
    @@ -580,37 +580,37 @@ data="{[
    First Macintosh computer
    -
    +
  • -
    +
    1998
    iMac
    -
    +
  • -
    +
    2001
    iPod
    -
    +
  • -
    +
    2007
    iPhone
    -
    +
  • -
    +
    2015
    @@ -628,34 +628,34 @@ data="{[
    First Macintosh computer
    -
    +
  • -
    +
    iMac
    -
    +
  • -
    +
    iPod
    -
    +
  • -
    +
    iPhone
    -
    +
  • -
    +
    @@ -669,34 +669,34 @@ data="{[
    First Macintosh computer
    -
    +
  • -
    +
    iMac
    -
    +
  • -
    +
    iPod
    -
    +
  • -
    +
    iPhone
    -
    +
  • -
    +
    @@ -713,34 +713,34 @@ data="{[
    -
    +
  • -
    +
    iMac
    -
    +
  • -
    +
    iPod
    -
    +
  • -
    +
    iPhone
    -
    +
  • -
    +
    Apple Watch
    @@ -754,34 +754,34 @@ data="{[
    -
    +
  • -
    +
    iMac
    -
    +
  • -
    +
    iPod
    -
    +
  • -
    +
    iPhone
    -
    +
  • -
    +
    Apple Watch
    @@ -798,34 +798,34 @@ data="{[
    -
    +
  • -
    +
    iMac
    -
    +
  • -
    +
    iPod
    -
    +
  • -
    +
    iPhone
    -
    +
  • -
    +
    Apple Watch
    @@ -839,34 +839,34 @@ data="{[
    -
    +
  • -
    +
    iMac
    -
    +
  • -
    +
    iPod
    -
    +
  • -
    +
    iPhone
    -
    +
  • -
    +
    Apple Watch
    @@ -883,34 +883,34 @@ data="{[
    -
    +
  • -
    +
    iMac
    -
    +
  • -
    +
    iPod
    -
    +
  • -
    +
    iPhone
    -
    +
  • -
    +
    Apple Watch
    @@ -924,34 +924,34 @@ data="{[
    -
    +
  • -
    +
    iMac
    -
    +
  • -
    +
    iPod
    -
    +
  • -
    +
    iPhone
    -
    +
  • -
    +
    Apple Watch
    @@ -965,25 +965,25 @@ data="{[
    • First Macintosh computer
      -
      +
    • -
      +
      iMac
      -
      +
    • -
      +
      iPod
      -
      +
    • -
      +
      iPhone
      -
      +
    • -
      +
      Apple Watch
    @@ -991,25 +991,25 @@ data="{[ `
    • First Macintosh computer
      -
      +
    • -
      +
      iMac
      -
      +
    • -
      +
      iPod
      -
      +
    • -
      +
      iPhone
      -
      +
    • -
      +
      Apple Watch
    ` @@ -1024,37 +1024,37 @@ data="{[
    First Macintosh computer
    -
    +
  • -
    +
    1998
    iMac
    -
    +
  • -
    +
    2001
    iPod
    -
    +
  • -
    +
    2007
    iPhone
    -
    +
  • -
    +
    2015
    @@ -1070,37 +1070,37 @@ data="{[
    First Macintosh computer
    -
    +
  • -
    +
    1998
    iMac
    -
    +
  • -
    +
    2001
    iPod
    -
    +
  • -
    +
    2007
    iPhone
    -
    +
  • -
    +
    2015
    @@ -1122,10 +1122,10 @@ data="{[
    First Macintosh computer
    The Apple Macintosh—later rebranded as the Macintosh 128K—is the original Apple Macintosh personal computer. It played a pivotal role in establishing desktop publishing as a general office function. The motherboard, a 9 in (23 cm) CRT monitor, and a floppy drive were housed in a beige case with integrated carrying handle; it came with a keyboard and single-button mouse.
    -
    +
  • -
    +
    @@ -1134,10 +1134,10 @@ data="{[
    iMac
    iMac is a family of all-in-one Mac desktop computers designed and built by Apple Inc. It has been the primary part of Apple's consumer desktop offerings since its debut in August 1998, and has evolved through seven distinct forms -
    +
  • -
    +
    @@ -1146,10 +1146,10 @@ data="{[
    iPod
    The iPod is a discontinued series of portable media players and multi-purpose mobile devices designed and marketed by Apple Inc. The first version was released on October 23, 2001, about 8+1⁄2 months after the Macintosh version of iTunes was released. Apple sold an estimated 450 million iPod products as of 2022. Apple discontinued the iPod product line on May 10, 2022. At over 20 years, the iPod brand is the oldest to be discontinued by Apple -
    +
  • -
    +
    @@ -1158,10 +1158,10 @@ data="{[
    iPhone
    iPhone is a line of smartphones produced by Apple Inc. that use Apple's own iOS mobile operating system. The first-generation iPhone was announced by then-Apple CEO Steve Jobs on January 9, 2007. Since then, Apple has annually released new iPhone models and iOS updates. As of November 1, 2018, more than 2.2 billion iPhones had been sold. As of 2022, the iPhone accounts for 15.6% of global smartphone market share -
    +
  • -
    +
    @@ -1183,10 +1183,10 @@ data="{[
    First Macintosh computer
    The Apple Macintosh—later rebranded as the Macintosh 128K—is the original Apple Macintosh personal computer. It played a pivotal role in establishing desktop publishing as a general office function. The motherboard, a 9 in (23 cm) CRT monitor, and a floppy drive were housed in a beige case with integrated carrying handle; it came with a keyboard and single-button mouse. -
    +
  • -
    +
    @@ -1195,10 +1195,10 @@ data="{[
    iMac
    iMac is a family of all-in-one Mac desktop computers designed and built by Apple Inc. It has been the primary part of Apple's consumer desktop offerings since its debut in August 1998, and has evolved through seven distinct forms -
    +
  • -
    +
    @@ -1207,10 +1207,10 @@ data="{[
    iPod
    The iPod is a discontinued series of portable media players and multi-purpose mobile devices designed and marketed by Apple Inc. The first version was released on October 23, 2001, about 8+1⁄2 months after the Macintosh version of iTunes was released. Apple sold an estimated 450 million iPod products as of 2022. Apple discontinued the iPod product line on May 10, 2022. At over 20 years, the iPod brand is the oldest to be discontinued by Apple -
    +
  • -
    +
    @@ -1219,10 +1219,10 @@ data="{[
    iPhone
    iPhone is a line of smartphones produced by Apple Inc. that use Apple's own iOS mobile operating system. The first-generation iPhone was announced by then-Apple CEO Steve Jobs on January 9, 2007. Since then, Apple has annually released new iPhone models and iOS updates. As of November 1, 2018, more than 2.2 billion iPhones had been sold. As of 2022, the iPhone accounts for 15.6% of global smartphone market share -
    +
  • -
    +
    From 74a35514cf6644067a811e775dc717b357bd43cf Mon Sep 17 00:00:00 2001 From: Gerardo Valenzuela Date: Sun, 14 Apr 2024 04:08:02 -0700 Subject: [PATCH 03/14] fix #2950 improved docs for radial progress to use aria-valuenow to clearly show progress --- .../radial-progress/+page.svelte.md | 60 +++++++++---------- 1 file changed, 30 insertions(+), 30 deletions(-) diff --git a/src/docs/src/routes/(docs)/components/radial-progress/+page.svelte.md b/src/docs/src/routes/(docs)/components/radial-progress/+page.svelte.md index 05c6ad43e9c..7e504f3b259 100644 --- a/src/docs/src/routes/(docs)/components/radial-progress/+page.svelte.md +++ b/src/docs/src/routes/(docs)/components/radial-progress/+page.svelte.md @@ -33,66 +33,66 @@ data="{[ /> -
    70%
    +
    70%
    {
    -`
    70%
    ` +`
    70%
    ` }
    {
    -`
    70%
    ` +`
    70%
    ` }
    -
    0%
    -
    20%
    -
    60%
    -
    80%
    -
    100%
    +
    0%
    +
    20%
    +
    60%
    +
    80%
    +
    100%
    {
    -`
    0%
    -
    20%
    -
    60%
    -
    80%
    -
    100%
    ` +`
    0%
    +
    20%
    +
    60%
    +
    80%
    +
    100%
    ` }
    {
    -`
    0%
    -
    20%
    -
    60%
    -
    80%
    -
    100%
    ` +`
    0%
    +
    20%
    +
    60%
    +
    80%
    +
    100%
    ` }
    -
    70%
    +
    70%
    {
    -`
    70%
    ` +`
    70%
    ` }
    {
    -`
    70%
    ` +`
    70%
    ` }
    -
    70%
    +
    70%
    {
    -`
    70%
    ` +`
    70%
    ` }
    {
    -`
    70%
    ` +`
    70%
    ` }
    -
    70%
    -
    70%
    +
    70%
    +
    70%
    {
    -`
    70%
    -
    70%
    ` +`
    70%
    +
    70%
    ` }
    {
    -`
    70%
    -
    70%
    ` +`
    70%
    +
    70%
    ` }
    From 0c26c24df1d2c0631e0831acb0b1895f35c5a5c3 Mon Sep 17 00:00:00 2001 From: Gerardo Valenzuela Date: Sun, 14 Apr 2024 04:16:24 -0700 Subject: [PATCH 04/14] fix #2950 added aria-valuetext because guidelines state to use it for extra clarity alongside aria-valuenow --- .../radial-progress/+page.svelte.md | 60 +++++++++---------- .../(docs)/components/tab/+page.svelte.md | 1 + 2 files changed, 31 insertions(+), 30 deletions(-) diff --git a/src/docs/src/routes/(docs)/components/radial-progress/+page.svelte.md b/src/docs/src/routes/(docs)/components/radial-progress/+page.svelte.md index 7e504f3b259..d44b630f257 100644 --- a/src/docs/src/routes/(docs)/components/radial-progress/+page.svelte.md +++ b/src/docs/src/routes/(docs)/components/radial-progress/+page.svelte.md @@ -33,66 +33,66 @@ data="{[ /> -
    70%
    +
    70%
    {
    -`
    70%
    ` +`
    70%
    ` }
    {
    -`
    70%
    ` +`
    70%
    ` }
    -
    0%
    -
    20%
    -
    60%
    -
    80%
    -
    100%
    +
    0%
    +
    20%
    +
    60%
    +
    80%
    +
    100%
    {
    -`
    0%
    -
    20%
    -
    60%
    -
    80%
    -
    100%
    ` +`
    0%
    +
    20%
    +
    60%
    +
    80%
    +
    100%
    ` }
    {
    -`
    0%
    -
    20%
    -
    60%
    -
    80%
    -
    100%
    ` +`
    0%
    +
    20%
    +
    60%
    +
    80%
    +
    100%
    ` }
    -
    70%
    +
    70%
    {
    -`
    70%
    ` +`
    70%
    ` }
    {
    -`
    70%
    ` +`
    70%
    ` }
    -
    70%
    +
    70%
    {
    -`
    70%
    ` +`
    70%
    ` }
    {
    -`
    70%
    ` +`
    70%
    ` }
    -
    70%
    -
    70%
    +
    70%
    +
    70%
    {
    -`
    70%
    -
    70%
    ` +`
    70%
    +
    70%
    ` }
    {
    -`
    70%
    -
    70%
    ` +`
    70%
    +
    70%
    ` }
    diff --git a/src/docs/src/routes/(docs)/components/tab/+page.svelte.md b/src/docs/src/routes/(docs)/components/tab/+page.svelte.md index 3ebb934e64c..aa48d3c90a7 100644 --- a/src/docs/src/routes/(docs)/components/tab/+page.svelte.md +++ b/src/docs/src/routes/(docs)/components/tab/+page.svelte.md @@ -170,6 +170,7 @@ data="{[ } +
    From 0c5f0e105c515eca09247ff57adaed7b913518c2 Mon Sep 17 00:00:00 2001 From: Gerardo Valenzuela Date: Sun, 14 Apr 2024 04:45:26 -0700 Subject: [PATCH 05/14] fix #2950 added aria-labels to rating radio inputs to be more explicit about their function -- cannot change name due to radio groups --- .../(docs)/components/rating/+page.svelte.md | 228 +++++++++--------- 1 file changed, 114 insertions(+), 114 deletions(-) diff --git a/src/docs/src/routes/(docs)/components/rating/+page.svelte.md b/src/docs/src/routes/(docs)/components/rating/+page.svelte.md index cc065536d9b..8f691d8fea2 100644 --- a/src/docs/src/routes/(docs)/components/rating/+page.svelte.md +++ b/src/docs/src/routes/(docs)/components/rating/+page.svelte.md @@ -30,76 +30,76 @@ data="{[
    - - - - - + + + + +
    {
     `
    - - - - - + + + + +
    ` }
    - - - - - + + + + +
    {
     `
    - - - - - + + + + +
    ` }
    - - - - - + + + + +
    {
     `
    - - - - - + + + + +
    ` }
    - - - - - + + + + +
    {
     `
    - - - - - + + + + +
    ` }
    @@ -107,118 +107,118 @@ data="{[
    - - - - - + + + + +
    - - - - - + + + + +
    - - - - - + + + + +
    - - - - - + + + + +
    {
     `
     
    - - - - - + + + + +
    - - - - - + + + + +
    - - - - - + + + + +
    - - - - - + + + + +
    ` }
    - - - - - - + + + + + +
    {
     `
    - - - - - - + + + + + +
    ` }
    - - - - - - - - - - - + + + + + + + + + + +
    {
     `
    - - - - - - - - - - - + + + + + + + + + + +
    ` }
    From be7cc43137cd4cc49ec5180c3db3c5b69a52ef06 Mon Sep 17 00:00:00 2001 From: Gerardo Valenzuela Date: Sun, 14 Apr 2024 20:23:13 -0700 Subject: [PATCH 06/14] fix #2950 drawer changes affect visibility so screenreaders don't parse side content at all times, only when drawer is opened --- src/components/unstyled/drawer.css | 3 +++ src/docs/src/routes/(docs)/components/timeline/+page.svelte.md | 2 +- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/unstyled/drawer.css b/src/components/unstyled/drawer.css index 9b5716c3837..d0b22672ced 100644 --- a/src/components/unstyled/drawer.css +++ b/src/components/unstyled/drawer.css @@ -6,6 +6,8 @@ } &-side { @apply pointer-events-none fixed start-0 top-0 col-start-1 row-start-1 grid w-full grid-cols-1 grid-rows-1 items-start justify-items-start overflow-x-hidden overflow-y-hidden overscroll-contain; + visibility: hidden; + @apply transition-all duration-300 ease-out will-change-transform; height: 100vh; height: 100dvh; & > .drawer-overlay { @@ -26,6 +28,7 @@ @apply fixed h-0 w-0 appearance-none opacity-0; &:checked { & ~ .drawer-side { + visibility: visible; @apply pointer-events-auto visible overflow-y-auto; & > *:not(.drawer-overlay) { transform: translateX(0%); diff --git a/src/docs/src/routes/(docs)/components/timeline/+page.svelte.md b/src/docs/src/routes/(docs)/components/timeline/+page.svelte.md index be370c77ae2..1bea54db92f 100644 --- a/src/docs/src/routes/(docs)/components/timeline/+page.svelte.md +++ b/src/docs/src/routes/(docs)/components/timeline/+page.svelte.md @@ -33,7 +33,7 @@ data="{[
    -
    +
    From e2ebf6182f356512c5a2c5ee13b93937cd905294 Mon Sep 17 00:00:00 2001 From: Gerardo Valenzuela Date: Sun, 21 Apr 2024 17:22:05 -0700 Subject: [PATCH 07/14] fix #2950 countdown updated to have accessibility options + docs updated to use them --- src/components/unstyled/countdown.css | 5 +- .../components/countdown/+page.svelte.md | 183 ++++++++++++------ 2 files changed, 127 insertions(+), 61 deletions(-) diff --git a/src/components/unstyled/countdown.css b/src/components/unstyled/countdown.css index cfaa7d193e1..67260249e37 100644 --- a/src/components/unstyled/countdown.css +++ b/src/components/unstyled/countdown.css @@ -3,7 +3,7 @@ } .countdown { display: inline-flex; - & > * { + & > *:not(.countdown-accessible) { height: 1em; @apply inline-block overflow-y-hidden; &:before { @@ -13,4 +13,7 @@ top: calc(var(--value) * -1em); } } + & > .countdown-accessible { + @apply sr-only; + } } diff --git a/src/docs/src/routes/(docs)/components/countdown/+page.svelte.md b/src/docs/src/routes/(docs)/components/countdown/+page.svelte.md index d27eb76368f..bc7d76448c7 100644 --- a/src/docs/src/routes/(docs)/components/countdown/+page.svelte.md +++ b/src/docs/src/routes/(docs)/components/countdown/+page.svelte.md @@ -31,87 +31,114 @@ layout: components + + - + + {counter}
    {
     `
    -  
    +  
    +  ${counter}
     `
     }
    {
     `
    -  
    +  
    +  ${counter}
     `
     }
    - + + {counter}
    {
     `
    -  
    +  
    +  ${counter}
     `
     }
    {
     `
    -  
    +  
    +  ${counter}
     `
     }
    - h - m - s + + 10h + + 24m + + {counter}ms
    {
     `
    -  h
    -  m
    -  s
    +  
    +  10h
    +  
    +  24m
    +  
    +  ${counter}s
     `
     }
    {
     `
    -  h
    -  m
    -  s
    +  
    +  10h
    +  24m
    +  
    +  ${counter}s
     `
     }
    - : - : - + + 10: + + 24: + + {counter}
    {
     `
    -  :
    -  :
    -  
    +  
    +  10:
    +  
    +  24:
    +  
    +  ${counter}
     `
     }
    {
     `
    -  :
    -  :
    -  
    +  
    +  10:
    +  
    +  24:
    +  
    +  ${counter}
     `
     }
    @@ -120,25 +147,29 @@ data="{[
    - + + 15 days
    - + + 10 hours
    - + + 24 minutes
    - + + {counter} sec
    @@ -147,25 +178,29 @@ data="{[ `
    - + + 15 days
    - + + 10 hours
    - + + 24 min
    - + + ${counter} sec
    @@ -175,25 +210,29 @@ data="{[ `
    - + + 15 days
    - + + 10 hours
    - + + 24 min
    - + + ${counter} sec
    @@ -205,25 +244,29 @@ data="{[
    - + + 15 days
    - + + 10 hours
    - + + 24 min
    - + + {counter} sec
    @@ -232,25 +275,29 @@ data="{[ `
    - + + 15 days
    - + + 10 hours
    - + + 24 min
    - + + ${counter} sec
    @@ -260,25 +307,29 @@ data="{[ `
    - + + 15 days
    - + + 10 hours
    - + + 24 min
    - + + ${counter} sec
    @@ -290,25 +341,29 @@ data="{[
    - + + 15 days
    - + + 10 hours
    - + + 24 min
    - + + {counter} sec
    @@ -317,25 +372,29 @@ data="{[ `
    - + + 15 days
    - + + 10 hours
    - + + 24 min
    - + + ${counter} sec
    @@ -345,25 +404,29 @@ data="{[ `
    - + + 15 days
    - + + 10 hours
    - + + 24 min
    - + + ${counter} sec
    From 62b817b7ff9990bd09ed15a7ab2833780067fa76 Mon Sep 17 00:00:00 2001 From: Gerardo Valenzuela Date: Sun, 14 Apr 2024 03:11:12 -0700 Subject: [PATCH 08/14] fix #2950 improved docs for timeline component for better accessibility --- .../components/timeline/+page.svelte.md | 450 +++++++++--------- 1 file changed, 225 insertions(+), 225 deletions(-) diff --git a/src/docs/src/routes/(docs)/components/timeline/+page.svelte.md b/src/docs/src/routes/(docs)/components/timeline/+page.svelte.md index 4908e35099b..be370c77ae2 100644 --- a/src/docs/src/routes/(docs)/components/timeline/+page.svelte.md +++ b/src/docs/src/routes/(docs)/components/timeline/+page.svelte.md @@ -33,7 +33,7 @@ data="{[
    -
    +
    @@ -44,37 +44,37 @@ data="{[
    First Macintosh computer
    -
    +
  • -
    +
    1998
    iMac
    -
    +
  • -
    +
    2001
    iPod
    -
    +
  • -
    +
    2007
    iPhone
    -
    +
  • -
    +
    2015
    @@ -90,37 +90,37 @@ data="{[
    First Macintosh computer
    -
    +
  • -
    +
    1998
    iMac
    -
    +
  • -
    +
    2001
    iPod
    -
    +
  • -
    +
    2007
    iPhone
    -
    +
  • -
    +
    2015
    @@ -138,34 +138,34 @@ data="{[
    First Macintosh computer
    -
    +
  • -
    +
    iMac
    -
    +
  • -
    +
    iPod
    -
    +
  • -
    +
    iPhone
    -
    +
  • -
    +
    @@ -179,34 +179,34 @@ data="{[
    First Macintosh computer
    -
    +
  • -
    +
    iMac
    -
    +
  • -
    +
    iPod
    -
    +
  • -
    +
    iPhone
    -
    +
  • -
    +
    @@ -223,34 +223,34 @@ data="{[
    -
    +
  • -
    +
    iMac
    -
    +
  • -
    +
    iPod
    -
    +
  • -
    +
    iPhone
    -
    +
  • -
    +
    Apple Watch
    @@ -264,34 +264,34 @@ data="{[
    -
    +
  • -
    +
    iMac
    -
    +
  • -
    +
    iPod
    -
    +
  • -
    +
    iPhone
    -
    +
  • -
    +
    Apple Watch
    @@ -308,34 +308,34 @@ data="{[
    -
    +
  • -
    +
    iMac
    -
    +
  • -
    +
    iPod
    -
    +
  • -
    +
    iPhone
    -
    +
  • -
    +
    Apple Watch
    @@ -349,34 +349,34 @@ data="{[
    -
    +
  • -
    +
    iMac
    -
    +
  • -
    +
    iPod
    -
    +
  • -
    +
    iPhone
    -
    +
  • -
    +
    Apple Watch
    @@ -393,34 +393,34 @@ data="{[
    -
    +
  • -
    +
    iMac
    -
    +
  • -
    +
    iPod
    -
    +
  • -
    +
    iPhone
    -
    +
  • -
    +
    Apple Watch
    @@ -434,34 +434,34 @@ data="{[
    -
    +
  • -
    +
    iMac
    -
    +
  • -
    +
    iPod
    -
    +
  • -
    +
    iPhone
    -
    +
  • -
    +
    Apple Watch
    @@ -475,25 +475,25 @@ data="{[
    • First Macintosh computer
      -
      +
    • -
      +
      iMac
      -
      +
    • -
      +
      iPod
      -
      +
    • -
      +
      iPhone
      -
      +
    • -
      +
      Apple Watch
    @@ -501,25 +501,25 @@ data="{[ `
    • First Macintosh computer
      -
      +
    • -
      +
      iMac
      -
      +
    • -
      +
      iPod
      -
      +
    • -
      +
      iPhone
      -
      +
    • -
      +
      Apple Watch
    ` @@ -534,37 +534,37 @@ data="{[
    First Macintosh computer
    -
    +
  • -
    +
    1998
    iMac
    -
    +
  • -
    +
    2001
    iPod
    -
    +
  • -
    +
    2007
    iPhone
    -
    +
  • -
    +
    2015
    @@ -580,37 +580,37 @@ data="{[
    First Macintosh computer
    -
    +
  • -
    +
    1998
    iMac
    -
    +
  • -
    +
    2001
    iPod
    -
    +
  • -
    +
    2007
    iPhone
    -
    +
  • -
    +
    2015
    @@ -628,34 +628,34 @@ data="{[
    First Macintosh computer
    -
    +
  • -
    +
    iMac
    -
    +
  • -
    +
    iPod
    -
    +
  • -
    +
    iPhone
    -
    +
  • -
    +
    @@ -669,34 +669,34 @@ data="{[
    First Macintosh computer
    -
    +
  • -
    +
    iMac
    -
    +
  • -
    +
    iPod
    -
    +
  • -
    +
    iPhone
    -
    +
  • -
    +
    @@ -713,34 +713,34 @@ data="{[
    -
    +
  • -
    +
    iMac
    -
    +
  • -
    +
    iPod
    -
    +
  • -
    +
    iPhone
    -
    +
  • -
    +
    Apple Watch
    @@ -754,34 +754,34 @@ data="{[
    -
    +
  • -
    +
    iMac
    -
    +
  • -
    +
    iPod
    -
    +
  • -
    +
    iPhone
    -
    +
  • -
    +
    Apple Watch
    @@ -798,34 +798,34 @@ data="{[
    -
    +
  • -
    +
    iMac
    -
    +
  • -
    +
    iPod
    -
    +
  • -
    +
    iPhone
    -
    +
  • -
    +
    Apple Watch
    @@ -839,34 +839,34 @@ data="{[
    -
    +
  • -
    +
    iMac
    -
    +
  • -
    +
    iPod
    -
    +
  • -
    +
    iPhone
    -
    +
  • -
    +
    Apple Watch
    @@ -883,34 +883,34 @@ data="{[
    -
    +
  • -
    +
    iMac
    -
    +
  • -
    +
    iPod
    -
    +
  • -
    +
    iPhone
    -
    +
  • -
    +
    Apple Watch
    @@ -924,34 +924,34 @@ data="{[
    -
    +
  • -
    +
    iMac
    -
    +
  • -
    +
    iPod
    -
    +
  • -
    +
    iPhone
    -
    +
  • -
    +
    Apple Watch
    @@ -965,25 +965,25 @@ data="{[
    • First Macintosh computer
      -
      +
    • -
      +
      iMac
      -
      +
    • -
      +
      iPod
      -
      +
    • -
      +
      iPhone
      -
      +
    • -
      +
      Apple Watch
    @@ -991,25 +991,25 @@ data="{[ `
    • First Macintosh computer
      -
      +
    • -
      +
      iMac
      -
      +
    • -
      +
      iPod
      -
      +
    • -
      +
      iPhone
      -
      +
    • -
      +
      Apple Watch
    ` @@ -1024,37 +1024,37 @@ data="{[
    First Macintosh computer
    -
    +
  • -
    +
    1998
    iMac
    -
    +
  • -
    +
    2001
    iPod
    -
    +
  • -
    +
    2007
    iPhone
    -
    +
  • -
    +
    2015
    @@ -1070,37 +1070,37 @@ data="{[
    First Macintosh computer
    -
    +
  • -
    +
    1998
    iMac
    -
    +
  • -
    +
    2001
    iPod
    -
    +
  • -
    +
    2007
    iPhone
    -
    +
  • -
    +
    2015
    @@ -1122,10 +1122,10 @@ data="{[
    First Macintosh computer
    The Apple Macintosh—later rebranded as the Macintosh 128K—is the original Apple Macintosh personal computer. It played a pivotal role in establishing desktop publishing as a general office function. The motherboard, a 9 in (23 cm) CRT monitor, and a floppy drive were housed in a beige case with integrated carrying handle; it came with a keyboard and single-button mouse.
    -
    +
  • -
    +
    @@ -1134,10 +1134,10 @@ data="{[
    iMac
    iMac is a family of all-in-one Mac desktop computers designed and built by Apple Inc. It has been the primary part of Apple's consumer desktop offerings since its debut in August 1998, and has evolved through seven distinct forms -
    +
  • -
    +
    @@ -1146,10 +1146,10 @@ data="{[
    iPod
    The iPod is a discontinued series of portable media players and multi-purpose mobile devices designed and marketed by Apple Inc. The first version was released on October 23, 2001, about 8+1⁄2 months after the Macintosh version of iTunes was released. Apple sold an estimated 450 million iPod products as of 2022. Apple discontinued the iPod product line on May 10, 2022. At over 20 years, the iPod brand is the oldest to be discontinued by Apple -
    +
  • -
    +
    @@ -1158,10 +1158,10 @@ data="{[
    iPhone
    iPhone is a line of smartphones produced by Apple Inc. that use Apple's own iOS mobile operating system. The first-generation iPhone was announced by then-Apple CEO Steve Jobs on January 9, 2007. Since then, Apple has annually released new iPhone models and iOS updates. As of November 1, 2018, more than 2.2 billion iPhones had been sold. As of 2022, the iPhone accounts for 15.6% of global smartphone market share -
    +
  • -
    +
    @@ -1183,10 +1183,10 @@ data="{[
    First Macintosh computer
    The Apple Macintosh—later rebranded as the Macintosh 128K—is the original Apple Macintosh personal computer. It played a pivotal role in establishing desktop publishing as a general office function. The motherboard, a 9 in (23 cm) CRT monitor, and a floppy drive were housed in a beige case with integrated carrying handle; it came with a keyboard and single-button mouse. -
    +
  • -
    +
    @@ -1195,10 +1195,10 @@ data="{[
    iMac
    iMac is a family of all-in-one Mac desktop computers designed and built by Apple Inc. It has been the primary part of Apple's consumer desktop offerings since its debut in August 1998, and has evolved through seven distinct forms -
    +
  • -
    +
    @@ -1207,10 +1207,10 @@ data="{[
    iPod
    The iPod is a discontinued series of portable media players and multi-purpose mobile devices designed and marketed by Apple Inc. The first version was released on October 23, 2001, about 8+1⁄2 months after the Macintosh version of iTunes was released. Apple sold an estimated 450 million iPod products as of 2022. Apple discontinued the iPod product line on May 10, 2022. At over 20 years, the iPod brand is the oldest to be discontinued by Apple -
    +
  • -
    +
    @@ -1219,10 +1219,10 @@ data="{[
    iPhone
    iPhone is a line of smartphones produced by Apple Inc. that use Apple's own iOS mobile operating system. The first-generation iPhone was announced by then-Apple CEO Steve Jobs on January 9, 2007. Since then, Apple has annually released new iPhone models and iOS updates. As of November 1, 2018, more than 2.2 billion iPhones had been sold. As of 2022, the iPhone accounts for 15.6% of global smartphone market share -
    +
  • -
    +
    From 7b449f9697041e97f60fa6f1f7558c6bcf5c127c Mon Sep 17 00:00:00 2001 From: Gerardo Valenzuela Date: Sun, 14 Apr 2024 04:08:02 -0700 Subject: [PATCH 09/14] fix #2950 improved docs for radial progress to use aria-valuenow to clearly show progress --- .../radial-progress/+page.svelte.md | 60 +++++++++---------- 1 file changed, 30 insertions(+), 30 deletions(-) diff --git a/src/docs/src/routes/(docs)/components/radial-progress/+page.svelte.md b/src/docs/src/routes/(docs)/components/radial-progress/+page.svelte.md index 05c6ad43e9c..7e504f3b259 100644 --- a/src/docs/src/routes/(docs)/components/radial-progress/+page.svelte.md +++ b/src/docs/src/routes/(docs)/components/radial-progress/+page.svelte.md @@ -33,66 +33,66 @@ data="{[ /> -
    70%
    +
    70%
    {
    -`
    70%
    ` +`
    70%
    ` }
    {
    -`
    70%
    ` +`
    70%
    ` }
    -
    0%
    -
    20%
    -
    60%
    -
    80%
    -
    100%
    +
    0%
    +
    20%
    +
    60%
    +
    80%
    +
    100%
    {
    -`
    0%
    -
    20%
    -
    60%
    -
    80%
    -
    100%
    ` +`
    0%
    +
    20%
    +
    60%
    +
    80%
    +
    100%
    ` }
    {
    -`
    0%
    -
    20%
    -
    60%
    -
    80%
    -
    100%
    ` +`
    0%
    +
    20%
    +
    60%
    +
    80%
    +
    100%
    ` }
    -
    70%
    +
    70%
    {
    -`
    70%
    ` +`
    70%
    ` }
    {
    -`
    70%
    ` +`
    70%
    ` }
    -
    70%
    +
    70%
    {
    -`
    70%
    ` +`
    70%
    ` }
    {
    -`
    70%
    ` +`
    70%
    ` }
    -
    70%
    -
    70%
    +
    70%
    +
    70%
    {
    -`
    70%
    -
    70%
    ` +`
    70%
    +
    70%
    ` }
    {
    -`
    70%
    -
    70%
    ` +`
    70%
    +
    70%
    ` }
    From 9acb19eea5b48919604008b4eab250999886946b Mon Sep 17 00:00:00 2001 From: Gerardo Valenzuela Date: Sun, 14 Apr 2024 04:16:24 -0700 Subject: [PATCH 10/14] fix #2950 added aria-valuetext because guidelines state to use it for extra clarity alongside aria-valuenow --- .../radial-progress/+page.svelte.md | 60 +++++++++---------- .../(docs)/components/tab/+page.svelte.md | 1 + 2 files changed, 31 insertions(+), 30 deletions(-) diff --git a/src/docs/src/routes/(docs)/components/radial-progress/+page.svelte.md b/src/docs/src/routes/(docs)/components/radial-progress/+page.svelte.md index 7e504f3b259..d44b630f257 100644 --- a/src/docs/src/routes/(docs)/components/radial-progress/+page.svelte.md +++ b/src/docs/src/routes/(docs)/components/radial-progress/+page.svelte.md @@ -33,66 +33,66 @@ data="{[ /> -
    70%
    +
    70%
    {
    -`
    70%
    ` +`
    70%
    ` }
    {
    -`
    70%
    ` +`
    70%
    ` }
    -
    0%
    -
    20%
    -
    60%
    -
    80%
    -
    100%
    +
    0%
    +
    20%
    +
    60%
    +
    80%
    +
    100%
    {
    -`
    0%
    -
    20%
    -
    60%
    -
    80%
    -
    100%
    ` +`
    0%
    +
    20%
    +
    60%
    +
    80%
    +
    100%
    ` }
    {
    -`
    0%
    -
    20%
    -
    60%
    -
    80%
    -
    100%
    ` +`
    0%
    +
    20%
    +
    60%
    +
    80%
    +
    100%
    ` }
    -
    70%
    +
    70%
    {
    -`
    70%
    ` +`
    70%
    ` }
    {
    -`
    70%
    ` +`
    70%
    ` }
    -
    70%
    +
    70%
    {
    -`
    70%
    ` +`
    70%
    ` }
    {
    -`
    70%
    ` +`
    70%
    ` }
    -
    70%
    -
    70%
    +
    70%
    +
    70%
    {
    -`
    70%
    -
    70%
    ` +`
    70%
    +
    70%
    ` }
    {
    -`
    70%
    -
    70%
    ` +`
    70%
    +
    70%
    ` }
    diff --git a/src/docs/src/routes/(docs)/components/tab/+page.svelte.md b/src/docs/src/routes/(docs)/components/tab/+page.svelte.md index 3ebb934e64c..aa48d3c90a7 100644 --- a/src/docs/src/routes/(docs)/components/tab/+page.svelte.md +++ b/src/docs/src/routes/(docs)/components/tab/+page.svelte.md @@ -170,6 +170,7 @@ data="{[ } +
    From 64ca570b119c08d8f0a900c94ca3ecc04223f3c8 Mon Sep 17 00:00:00 2001 From: Gerardo Valenzuela Date: Sun, 14 Apr 2024 04:45:26 -0700 Subject: [PATCH 11/14] fix #2950 added aria-labels to rating radio inputs to be more explicit about their function -- cannot change name due to radio groups --- .../(docs)/components/rating/+page.svelte.md | 228 +++++++++--------- 1 file changed, 114 insertions(+), 114 deletions(-) diff --git a/src/docs/src/routes/(docs)/components/rating/+page.svelte.md b/src/docs/src/routes/(docs)/components/rating/+page.svelte.md index cc065536d9b..8f691d8fea2 100644 --- a/src/docs/src/routes/(docs)/components/rating/+page.svelte.md +++ b/src/docs/src/routes/(docs)/components/rating/+page.svelte.md @@ -30,76 +30,76 @@ data="{[
    - - - - - + + + + +
    {
     `
    - - - - - + + + + +
    ` }
    - - - - - + + + + +
    {
     `
    - - - - - + + + + +
    ` }
    - - - - - + + + + +
    {
     `
    - - - - - + + + + +
    ` }
    - - - - - + + + + +
    {
     `
    - - - - - + + + + +
    ` }
    @@ -107,118 +107,118 @@ data="{[
    - - - - - + + + + +
    - - - - - + + + + +
    - - - - - + + + + +
    - - - - - + + + + +
    {
     `
     
    - - - - - + + + + +
    - - - - - + + + + +
    - - - - - + + + + +
    - - - - - + + + + +
    ` }
    - - - - - - + + + + + +
    {
     `
    - - - - - - + + + + + +
    ` }
    - - - - - - - - - - - + + + + + + + + + + +
    {
     `
    - - - - - - - - - - - + + + + + + + + + + +
    ` }
    From 6d772039ef70fe32a82b54753659b5499fc4c650 Mon Sep 17 00:00:00 2001 From: Gerardo Valenzuela Date: Sun, 14 Apr 2024 20:23:13 -0700 Subject: [PATCH 12/14] fix #2950 drawer changes affect visibility so screenreaders don't parse side content at all times, only when drawer is opened --- src/components/unstyled/drawer.css | 3 +++ src/docs/src/routes/(docs)/components/timeline/+page.svelte.md | 2 +- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/unstyled/drawer.css b/src/components/unstyled/drawer.css index 9b5716c3837..d0b22672ced 100644 --- a/src/components/unstyled/drawer.css +++ b/src/components/unstyled/drawer.css @@ -6,6 +6,8 @@ } &-side { @apply pointer-events-none fixed start-0 top-0 col-start-1 row-start-1 grid w-full grid-cols-1 grid-rows-1 items-start justify-items-start overflow-x-hidden overflow-y-hidden overscroll-contain; + visibility: hidden; + @apply transition-all duration-300 ease-out will-change-transform; height: 100vh; height: 100dvh; & > .drawer-overlay { @@ -26,6 +28,7 @@ @apply fixed h-0 w-0 appearance-none opacity-0; &:checked { & ~ .drawer-side { + visibility: visible; @apply pointer-events-auto visible overflow-y-auto; & > *:not(.drawer-overlay) { transform: translateX(0%); diff --git a/src/docs/src/routes/(docs)/components/timeline/+page.svelte.md b/src/docs/src/routes/(docs)/components/timeline/+page.svelte.md index be370c77ae2..1bea54db92f 100644 --- a/src/docs/src/routes/(docs)/components/timeline/+page.svelte.md +++ b/src/docs/src/routes/(docs)/components/timeline/+page.svelte.md @@ -33,7 +33,7 @@ data="{[
    -
    +
    From 8050493c21e69466c435ecc4a81ce091decce23b Mon Sep 17 00:00:00 2001 From: Gerardo Valenzuela Date: Sun, 21 Apr 2024 17:22:05 -0700 Subject: [PATCH 13/14] fix #2950 changes are up-to-date --- src/components/unstyled/countdown.css | 5 +- .../components/countdown/+page.svelte.md | 185 ++++++++++++------ 2 files changed, 128 insertions(+), 62 deletions(-) diff --git a/src/components/unstyled/countdown.css b/src/components/unstyled/countdown.css index cfaa7d193e1..67260249e37 100644 --- a/src/components/unstyled/countdown.css +++ b/src/components/unstyled/countdown.css @@ -3,7 +3,7 @@ } .countdown { display: inline-flex; - & > * { + & > *:not(.countdown-accessible) { height: 1em; @apply inline-block overflow-y-hidden; &:before { @@ -13,4 +13,7 @@ top: calc(var(--value) * -1em); } } + & > .countdown-accessible { + @apply sr-only; + } } diff --git a/src/docs/src/routes/(docs)/components/countdown/+page.svelte.md b/src/docs/src/routes/(docs)/components/countdown/+page.svelte.md index de6f58f1c87..bc7d76448c7 100644 --- a/src/docs/src/routes/(docs)/components/countdown/+page.svelte.md +++ b/src/docs/src/routes/(docs)/components/countdown/+page.svelte.md @@ -30,88 +30,115 @@ layout: components }) - + + + - + + {counter}
    {
     `
    -  
    +  
    +  ${counter}
     `
     }
    {
     `
    -  
    +  
    +  ${counter}
     `
     }
    - + + {counter}
    {
     `
    -  
    +  
    +  ${counter}
     `
     }
    {
     `
    -  
    +  
    +  ${counter}
     `
     }
    - h - m - s + + 10h + + 24m + + {counter}ms
    {
     `
    -  h
    -  m
    -  s
    +  
    +  10h
    +  
    +  24m
    +  
    +  ${counter}s
     `
     }
    {
     `
    -  h
    -  m
    -  s
    +  
    +  10h
    +  24m
    +  
    +  ${counter}s
     `
     }
    - : - : - + + 10: + + 24: + + {counter}
    {
     `
    -  :
    -  :
    -  
    +  
    +  10:
    +  
    +  24:
    +  
    +  ${counter}
     `
     }
    {
     `
    -  :
    -  :
    -  
    +  
    +  10:
    +  
    +  24:
    +  
    +  ${counter}
     `
     }
    @@ -120,25 +147,29 @@ data="{[
    - + + 15 days
    - + + 10 hours
    - + + 24 minutes
    - + + {counter} sec
    @@ -147,25 +178,29 @@ data="{[ `
    - + + 15 days
    - + + 10 hours
    - + + 24 min
    - + + ${counter} sec
    @@ -175,25 +210,29 @@ data="{[ `
    - + + 15 days
    - + + 10 hours
    - + + 24 min
    - + + ${counter} sec
    @@ -205,25 +244,29 @@ data="{[
    - + + 15 days
    - + + 10 hours
    - + + 24 min
    - + + {counter} sec
    @@ -232,25 +275,29 @@ data="{[ `
    - + + 15 days
    - + + 10 hours
    - + + 24 min
    - + + ${counter} sec
    @@ -260,25 +307,29 @@ data="{[ `
    - + + 15 days
    - + + 10 hours
    - + + 24 min
    - + + ${counter} sec
    @@ -290,25 +341,29 @@ data="{[
    - + + 15 days
    - + + 10 hours
    - + + 24 min
    - + + {counter} sec
    @@ -317,25 +372,29 @@ data="{[ `
    - + + 15 days
    - + + 10 hours
    - + + 24 min
    - + + ${counter} sec
    @@ -345,25 +404,29 @@ data="{[ `
    - + + 15 days
    - + + 10 hours
    - + + 24 min
    - + + ${counter} sec
    From 830be70da96f2f6f1c91ffa6befd44f338d3782f Mon Sep 17 00:00:00 2001 From: Gerardo Valenzuela Date: Sat, 27 Apr 2024 11:49:13 -0700 Subject: [PATCH 14/14] fix #2950 fixed wording in countdown docs to match wording used in other docs --- src/docs/src/routes/(docs)/components/countdown/+page.svelte.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/docs/src/routes/(docs)/components/countdown/+page.svelte.md b/src/docs/src/routes/(docs)/components/countdown/+page.svelte.md index bc7d76448c7..20a29e81e7d 100644 --- a/src/docs/src/routes/(docs)/components/countdown/+page.svelte.md +++ b/src/docs/src/routes/(docs)/components/countdown/+page.svelte.md @@ -39,7 +39,7 @@ layout: components