docs(blog): update radix post (#6465)

refinedev · Nov 7, 2024 · 00bc2bc · 00bc2bc
1 parent d78d18b
commit 00bc2bc
Showing 1 changed file with 152 additions and 0 deletions.
diff --git a/documentation/blog/2024-04-04-radix-ui.md → documentation/blog/2024-11-06-radix-ui.md b/documentation/blog/2024-04-04-radix-ui.md → documentation/blog/2024-11-06-radix-ui.md
@@ -8,10 +8,28 @@ image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2024-04-04-radix-ui/s
 hide_table_of_contents: false
 ---
 
+**This article was last updated on November 6, 2024, to include performance optimization tips and accessibility-focused animation handling techniques for improved user experiences in Radix UI when paired with Framer Motion.**
+
 ## Introduction
 
 `Radix` is an open-source headless library that provides components for creating user-friendly, high-quality `React` online applications and design systems. It offers a wide range of accessible headless primitives, meant to expedite development by providing frequently used UI elements such as dialogues, selections, accordions, tabs, and more. In this article, we will illustrate how to build components with Radix.
 
+Step we'll take in this article:
+
+- [Radix Building Blocks](#radix-building-blocks)
+  - [Primitives](#primitives)
+  - [Colors](#colors)
+  - [Icons](#icons)
+  - [Themes](#themes)
+  - [Setup Radix in your React Project](#setup-radix-in-your-react-project)
+- [Adding Animations to Radix Components with Framer Motion](#adding-animations-to-radix-components-with-framer-motion)
+  - [Why Use Framer Motion with Radix?](#why-use-framer-motion-with-radix)
+  - [Build components with Radix](#build-components-with-radix)
+- [Accessibility Best Practices in Radix UI](#accessibility-best-practices-in-radix-ui)
+  - [Why Accessibility Matters in Radix UI](#why-accessibility-matters-in-radix-ui)
+  - [Key Accessibility Considerations](#key-accessibility-considerations)
+  - [Example Code for an Accessible Modal](#example-code-for-an-accessible-modal)
+
 ## Radix Building Blocks
 
 Radix consists of four building blocks: **Primitives**, **Colors**, **Icons** and **Themes**. These tools can be used to create comprehensive design systems. Let's take a deeper look at each product and see how they can be utilized independently or together to meet your needs.
@@ -482,6 +500,80 @@ import {
 } from "@radix-ui/colors";
 ```
 
+## Adding Animations to Radix Components with Framer Motion
+
+If you want to give interactions with the components of Radix UI a more fluent look by adding an animation, combining Framer Motion with Radix can be quite powerful. Framer Motion interacts really seamlessly with the headless components of Radix while giving control over animating states, keeping things accessible.
+
+### Why Use Framer Motion with Radix?
+
+Radix UI consists of completely headless components, meaning there are no animations. The power of Framer Motion is that it lets us take these otherwise static Radix elements, like modals, dropdowns, and tooltips, and animate them in a really declarative and reusable manner. This will make the interactions feel way more smooth and engaging, but since Framer Motion works in a declarative way, that means we can keep our animations consistent and accessible.
+
+**Install Framer Motion:**
+
+Then, install Framer Motion if it’s not already in the project:
+
+```tsx
+npm install framer-motion
+```
+
+**The wrapping of radix components with animation controls:**
+
+Wrap radix elements in Framer Motion’s components, such as motion.div, which can handle animations related to entrance, exit, and interaction states.
+**Define Animation Variants:**
+
+Framer Motion will allow us to define variants of animations—hidden/visible states we can toggle depending on the state of the component. So, opening a modal would slap a visible variant on it and fade or slide it into view, for example.
+
+The example below represents how you might animate a Radix dialog using Framer Motion. This setup will apply a fade in when the dialog opens, and a fade out on close:
+
+```tsx
+import * as Dialog from "@radix-ui/react-dialog";
+import { motion } from "framer-motion";
+
+const modalVariants = {
+  hidden: { opacity: 0, y: -20 },
+  visible: { opacity: 1, y: 0 },
+};
+
+function AnimatedDialog() {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger>Open Dialog</Dialog.Trigger>
+      <Dialog.Portal>
+        <Dialog.Overlay asChild>
+          <motion.div
+            initial="hidden"
+            animate="visible"
+            exit="hidden"
+            variants={modalVariants}
+            transition={{ duration: 0.3 }}
+            className="fixed inset-0 bg-black bg-opacity-50"
+          />
+        </Dialog.Overlay>
+        <Dialog.Content asChild>
+          <motion.div
+            initial="hidden"
+            animate="visible"
+            exit="hidden"
+            variants={modalVariants}
+            transition={{ duration: 0.3 }}
+            className="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-md bg-white p-6"
+          >
+            <h2>Animated Radix Dialog</h2>
+            <p>This dialogue fades in and out nicely!</p>
+            <Dialog.Close>Close</Dialog.Close>
+          </motion.div>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+```
+
+Tips for Smooth Animations
+• Exit Transitions: Make the exit transitions pop for dialog or overlay close smoothly.
+• Timing for Transition: Edit the transition times in order to harbor smooth motion, without anything going too slow or fast.
+• Accessibility Reduce Motion: Remember that for some users, they like having minimal motion. You should consider adding a prefers-reduced-motion media query in order to turn off animations when this is enabled.
+
 ### Build components with Radix
 
 This article will include sample components for **Dialogs** and **Slider**.
@@ -621,6 +713,66 @@ function App() {
 <img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2024-04-04-radix-ui/6.gif" alt="radix ui" />
 </div>
 
+## Accessibility Best Practices in Radix UI
+
+I wanted to share some key points on accessibility when working with Radix UI. Radix UI is known for its focus on accessible components, but it’s always good to double-check and ensure our implementations fully support inclusive design. Here’s a quick rundown of accessibility considerations when building components with Radix UI.
+
+### Why Accessibility Matters in Radix UI
+
+Radix UI provides a strong foundation with accessible primitives, ensuring that core elements like buttons, modals, and accordions are keyboard-friendly, screen-reader-compatible, and accessible by default. Even so, reviewing accessibility settings in complex components, especially when customizing, is essential.
+
+### Key Accessibility Considerations
+
+**Keyboard Navigation**:
+
+Radix UI components support keyboard navigation by default, making it easy to tab through interactive elements. For components like dropdowns or sliders, ensure they retain focus states and are easy to navigate with both keyboard and mouse.
+
+**Aria Attributes**:
+
+Radix UI uses appropriate ARIA roles and attributes by default, but we should verify them when we modify components. For example, if you add custom elements within a modal or dialog, confirm that ARIA roles like `aria-labelledby` and `aria-describedby` are accurately set to ensure screen readers can announce elements correctly.
+
+**Focus Management**:
+
+Radix UI provides automatic focus trapping for dialogs and modals. This feature keeps keyboard focus within a modal until it’s closed, which is great for user experience. However, if you add nested focusable elements, make sure they fit naturally into this flow.
+
+**Color Contrast and Theming**:
+
+When using Radix Colors, check color contrast ratios to ensure compliance with WCAG standards. While Radix colors are designed for accessibility, specific color customizations might need additional contrast adjustments for readability.
+
+**Customizable Announcements**:
+Some Radix components, like alerts or notifications, don’t automatically include screen reader announcements. If you’re building components that convey important status messages, consider adding `aria-live` regions for real-time updates so screen readers alert users promptly.
+
+### Example Code for an Accessible Modal
+
+Here’s a snippet to ensure focus is properly managed within a Radix dialog:
+
+```javascript
+import * as Dialog from "@radix-ui/react-dialog";
+
+function AccessibleModal() {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger>Open Modal</Dialog.Trigger>
+      <Dialog.Portal>
+        <Dialog.Overlay />
+        <Dialog.Content
+          aria-labelledby="dialog-title"
+          aria-describedby="dialog-description"
+        >
+          <h2 id="dialog-title">Welcome</h2>
+          <p id="dialog-description">This is an accessible modal example.</p>
+          <button onClick={() => Dialog.Root.close()}>Close</button>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+```
+
+This setup uses ARIA attributes and manages focus effectively, helping make our modal both accessible and easy to navigate.
+
+Integrating these practices should make a noticeable difference in user experience, especially for users relying on assistive technologies.
+
 ## Conclusion
 
 In this article, we looked at `Radix`, discussed `Radix's` Primitives, Colors, Icons, and Themes, and finally built components with Radix Primitives. Radix is an outstanding component library that you should consider using if you want to create design systems or visually appealing web apps.