v0.2.0 (#18)

* Initial tabs prototype * Add colors and initial docs for tabs component * First bits for sync & storage * Remove @fontsource-variable/onest dep * Update TabItem.astro Add class to make sure the regex can't fail * Actually remove the dep this time * Update lockfile * Add tab sync / storage * Update docs, fix modal weirdness, add card variant, finish tabs * Update theme helper for tailwind theme compatibility * Fix theme toggle types being too complex * Add starlight compat to themehelper * Update lockfile * Update JSDoc for types, update version in package.json, fix theme helper * Try to fix lockfile? * Remove tailwind class compatibility for theme helper in favor of data-theme * Fix icon not changing color automatically * Actually fix lockfile * Changes to theme helper and theme toggle docs * Fix again lol * Fix everything docs * Add missing JSDoc comments * Fix typo * Create integration, update homepage docs, add tailwind docs * Adjusts button hover states for better accessibility * Add biome on push to main * Make buttons, selects, search selects and modals keyboard accessible * Fix color contrast in ec theme * Use correct role * fixes * Make checkboxes, radio groups and toggles keyboard accessible * Typo fix * Learn to read * Fix wrong indentation * Add sr only labels for input/textarea * Fix open select with space key & reset focus index on non active navigation * Various accessibility improvements * Fix dropdown & toaster accessibility * Make tabs accessible, make image in site title not tabbable, give toasts priority tab index * Fix select arrow keys & pageup/down * Swap out tabs on homepage for components from lib * Add aria roles to dropdown * Label theme button * Add role to tabs, don't blur search select when selected * Remove old dependency, label select buttons * Upgrade complete * Fix remaining accessibility issues * Add missing _top ID for header * Add missing aria-label to hero section * Fix Radio Group and Tabs keyboard navigation * Prepare docs for 0.2.0 release * Add aria label to toasts * Make all scripts bundle-able, update css, resolve global.css path & more * Remove double quotes, fix missing highlight * Remove integration import from astro config --------- Co-authored-by: HiDeoo <494699+HiDeoo@users.noreply.github.com> Co-authored-by: Jacob Jenkins <7649031+jdtjenkins@users.noreply.github.com> Co-authored-by: Elian <hello@elian.codes> Co-authored-by: Adam Matthiesen <30383579+Adammatthiesen@users.noreply.github.com> Co-authored-by: Paul Valladares <85648028+dreyfus92@users.noreply.github.com> Co-authored-by: Reuben Tier <64310361+TheOtterlord@users.noreply.github.com> Co-authored-by: Matthew Justice <72817096+JusticeMatthew@users.noreply.github.com>
withstudiocms · Dec 19, 2024 · e471e11 · e471e11
1 parent d50381d
commit e471e11
Show file tree

Hide file tree

Showing 76 changed files with 3,499 additions and 1,658 deletions.
diff --git a/.changeset/brown-bobcats-draw.md b/.changeset/brown-bobcats-draw.md
@@ -0,0 +1,21 @@
+---
+"@studiocms/ui": minor
+---
+
+### The Accessibility Update
+
+This version of `@studiocms/ui` includes a lot of improvements to the documentation and components. The most important changes include the move to
+an integration-based system and a massive keyboard accessibility overhaul (thanks to [HiDeoo](https://github.com/HiDeoo) for the feedback on this)!
+
+### Components
+
+- Added a new `<Tabs />` component based on the tabs on the homepage.
+- Updated the `<Card />` component to include a new "filled" style.
+
+### Utilities
+
+- Moved the `ThemeHelper` class to its own category in the docs.
+
+### Accessibility
+
+- Overhauled the keyboard accessibility on all components to make them adhere to the ARIA standards.
diff --git a/docs/astro.config.mts b/docs/astro.config.mts
@@ -1,7 +1,6 @@
 import starlight from '@astrojs/starlight';
 import onestWoff2 from '@fontsource-variable/onest/files/onest-latin-wght-normal.woff2?url';
 import { defineConfig, envField } from 'astro/config';
-import starlightImageZoom from 'starlight-image-zoom';
 import rehypePluginKit from './src/plugins/rehypePluginKit';
 
 // Define the Site URL
@@ -63,7 +62,7 @@ export default defineConfig({
 			defaultLocale: 'root',
 			locales,
 			social: {
-				github: 'https://github.com/withstudiocms/studiocms',
+				github: 'https://github.com/withstudiocms/ui',
 				discord: 'https://chat.studiocms.dev',
 				youtube: 'https://www.youtube.com/@StudioCMS',
 				'x.com': 'https://x.com/withstudiocms',
@@ -91,14 +90,14 @@ export default defineConfig({
 					tag: 'meta',
 					attrs: {
 						property: 'og:image',
-						content: `${site}og.jpg?v=1`,
+						content: `${site}og.png?v=1`,
 					},
 				},
 				{
 					tag: 'meta',
 					attrs: {
 						property: 'twitter:image',
-						content: `${site}og.jpg?v=1`,
+						content: `${site}og.png?v=1`,
 					},
 				},
 				{
@@ -159,6 +158,10 @@ export default defineConfig({
 						{
 							label: 'Installation',
 							link: 'docs/',
+							badge: {
+								text: 'Updated!',
+								variant: 'success',
+							}
 						},
 						{
 							label: 'Release Notes',
@@ -170,15 +173,28 @@ export default defineConfig({
 						},
 					],
 				},
+				{
+					label: 'Upgrade Guides',
+					autogenerate: {
+						directory: 'docs/upgrade-guides',
+						collapsed: true,
+					},
+				},
 				{
 					label: 'Components',
 					autogenerate: {
 						directory: 'docs/components',
 						collapsed: true,
 					},
 				},
+				{
+					label: 'Utilities',
+					autogenerate: {
+						directory: 'docs/utilities',
+						collapsed: true,
+					},
+				},
 			],
-			plugins: [starlightImageZoom()],
 		}),
 	],
 });
diff --git a/docs/ec.config.mjs b/docs/ec.config.mjs
@@ -32,6 +32,7 @@ export default defineEcConfig({
 		frames: {
 			editorActiveTabIndicatorBottomColor: 'var(--sl-color-accent)',
 		},
+		gutterForeground: 'rgba(166, 166, 166, 0.84)',
 		twoSlash: {
 			cursorColor: '#f8f8f2',
 		},

diff --git a/docs/lunaria.config.ts b/docs/lunaria.config.ts
@@ -5,7 +5,6 @@ export default defineConfig({
 		name: 'withstudiocms/ui',
 		rootDir: 'docs',
 		hosting: 'github',
-		// TODO: Change to 'main' this once the branch is ready to merge
 		branch: 'main',
 	},
 	sourceLocale: {

diff --git a/docs/package.json b/docs/package.json
@@ -15,7 +15,7 @@
   "dependencies": {
     "@11ty/eleventy-fetch": "^5.0.1",
     "@astrojs/check": "catalog:",
-    "@astrojs/starlight": "https://gitpkg.now.sh/HiDeoo/starlight/packages/starlight?hd-astro-v5",
+    "@astrojs/starlight": "0.30.0",
     "@expressive-code/plugin-line-numbers": "^0.38.3",
     "@fontsource-variable/fira-code": "^5.1.0",
     "@fontsource-variable/onest": "catalog:",
@@ -47,8 +47,7 @@
     "rehype-external-links": "^3.0.0",
     "rehype-slug": "^6.0.0",
     "sharp": "^0.33.5",
-    "starlight-image-zoom": "^0.9.0",
-    "starlight-package-managers": "^0.8.0",
+    "starlight-package-managers": "^0.8.1",
     "tsm": "^2.3.0",
     "typescript": "catalog:",
     "unist-util-visit": "^5.0.0"

diff --git a/docs/public/og.jpg b/docs/public/og.jpg
diff --git a/docs/public/og.png b/docs/public/og.png
diff --git a/docs/src/assets/astro.svg b/docs/src/assets/astro.svg
diff --git a/docs/src/assets/logo-adaptive.svg b/docs/src/assets/logo-adaptive.svg
diff --git a/docs/src/assets/swords.svg b/docs/src/assets/swords.svg
diff --git a/docs/src/components/PreviewCard.astro b/docs/src/components/PreviewCard.astro
@@ -2,11 +2,16 @@
 type Props = {
 	vertical?: boolean;
 	gapSize?: 'sm' | 'md' | 'lg';
+  fullWidth?: boolean;
+  fullHeight?: boolean;
 };
 
-const { vertical = false, gapSize = 'md' } = Astro.props;
+const { vertical = false, gapSize = 'md', fullWidth, fullHeight } = Astro.props;
 ---
-<div class="preview-card not-content" class:list={[vertical && "vertical", gapSize]}>
+<div 
+  class="preview-card not-content"
+  class:list={[vertical && "vertical", gapSize]}
+>
   <slot />
 </div>
 <style>
@@ -18,6 +23,7 @@ const { vertical = false, gapSize = 'md' } = Astro.props;
     align-items: center;
     justify-content: center;
     gap: 1rem;
+    flex-wrap: wrap;
   }
 
   .preview-card.vertical {

diff --git a/docs/src/components/landing/EcosystemSection.astro b/docs/src/components/landing/EcosystemSection.astro
@@ -30,7 +30,7 @@ import SwordsIcon from '~/assets/swords.svg';
             </p>
         </div>
         <div class="benefit-card">
-            <Icon name='user-group' width={24} height={24} />
+            <Icon name='user-group' width={24} height={24} aria-hidden="true" />
             <h3>Community-built</h3>
             <p>
                 StudioCMS isn't a closed-off project or organization - it is made up of Astro 

diff --git a/docs/src/components/landing/HeroSection.astro b/docs/src/components/landing/HeroSection.astro
@@ -17,7 +17,7 @@ import {
 import Icon from '@studiocms/ui/utils/Icon.astro';
 import GitHubIcon from '~/components/icons/GitHubIcon.astro';
 ---
-<section class="hero not-content">
+<section class="hero not-content" aria-label="A bento grid showcasing various different components from @studiocms/ui">
    <div class="checkbox">
       <Checkbox
          label='Checkbox'
@@ -28,6 +28,7 @@ import GitHubIcon from '~/components/icons/GitHubIcon.astro';
    <div class="input">
       <Input
          placeholder='Input'
+         aria-label="Input example"
       />
    </div>
    <div class="toggle">
@@ -67,26 +68,26 @@ import GitHubIcon from '~/components/icons/GitHubIcon.astro';
       />
    </div>
    <div class="hero-text">
-      <h1>Why install another Framework just for UI?</h1>
+      <h1 id="_top">Why install another Framework just for UI?</h1>
       <div class="hero-desc">
          <p>StudioCMS UI is an Astro-native UI library.</p>
-         <p>All the components you need, without the bloat of React.</p>
+         <p>All the components you need, without the pain of React.</p>
       </div>
       <div class="cta-buttons">
          <Button color='primary' as="a" href={'/docs/'} size='lg'>
             <Icon name='book-open' slot="start-content" width={24} height={24} />
             Get started
          </Button>
-         <Button color='default' as="a" href={'https://github.com/withstudiocms/ui'} style={'color: white;'} size='lg'>
+         <Button color='default' as="a" href={'https://github.com/withstudiocms/ui'} size='lg'>
             <GitHubIcon width={24} height={23.5} class="github-icon" slot={'start-content'} />
             Star on GitHub
          </Button>
       </div>
    </div>
    <div class="theme">
       <ThemeToggle>
-         <Icon name='moon' width={24} height={24} slot="dark" />
-         <Icon name='sun' width={24} height={24} slot="light" />
+         <Icon name='moon' width={24} height={24} slot="dark" aria-label="Switch to light mode" />
+         <Icon name='sun' width={24} height={24} slot="light" aria-label="Switch to dark mode" />
       </ThemeToggle>
    </div>
    <div class="divider">
@@ -120,6 +121,7 @@ import GitHubIcon from '~/components/icons/GitHubIcon.astro';
          fullWidth
          fullHeight
          placeholder={'Countless stars scattered,\nacross obsidian skies,\nfrosty breath lingers.'}
+         aria-label="Textarea example"
       />
    </div>
    <div class="toast">