dequelabs · frankensteinke · Jun 23, 2026 · Jun 22, 2026 · Jun 22, 2026
@@ -1,6 +1,6 @@
 ---
 title: ImpactBadge
-description: The ImpactBadge is an extension of the Badge component is designed to indicate the type of impact
+description: The ImpactBadge is an extension of the Badge component that is designed to indicate the type of impact
 source: https://github.com/dequelabs/cauldron/tree/develop/packages/react/src/components/ImpactBadge/index.tsx
 storybook: true
 ---

@@ -1,6 +1,6 @@
 ---
 title: TooltipTabstop
-description: A keyboard-accesible tooltip for non-interactive elements.
+description: A keyboard-accessible tooltip for non-interactive elements.
 source: https://github.com/dequelabs/cauldron/tree/develop/packages/react/src/components/TooltipTabstop/index.tsx
 ---
 

@@ -40,7 +40,7 @@ There are a few additional packages that you will need to install:
 
 ### Setup
 
-Once installed, you will need to add include cauldron's styles somewhere in the top level of your application. You will also need to load the required font family of Roboto before cauldron styles. This can be using [google fonts](https://fonts.google.com/specimen/Roboto) or with something like [fontsource](https://fontsource.org/fonts/roboto):
+Once installed, you will need to include cauldron's styles somewhere in the top level of your application. You will also need to load the required font family of Roboto before cauldron styles. This can be done using [google fonts](https://fonts.google.com/specimen/Roboto) or with something like [fontsource](https://fontsource.org/fonts/roboto):
 
 An example of this using the [fontsource](https://fontsource.org/fonts/roboto) package and loading cauldron styles as follows:
 

@@ -21,7 +21,7 @@ pnpm screenshots --update-snapshots
 ```
 
 > [!NOTE]
-> Screenshot comparisons use a color threshhold of [0.2](https://playwright.dev/docs/api/class-pageassertions#page-assertions-to-have-screenshot-1-option-threshold) to help avoid unnecessary diffs from pixel anti-aliasing. If you need to generate a change to a component that has color changes only, you may want to first delete the previous snapshot before running the above command to get a clean component snapshot.
+> Screenshot comparisons use a color threshold of [0.2](https://playwright.dev/docs/api/class-pageassertions#page-assertions-to-have-screenshot-1-option-threshold) to help avoid unnecessary diffs from pixel anti-aliasing. If you need to generate a change to a component that has color changes only, you may want to first delete the previous snapshot before running the above command to get a clean component snapshot.
 
 Finally, to run screenshot comparison tests run:
 

@@ -37,7 +37,7 @@ export const typeMap: TypeMap = {
 
 export const tabIndexHandler = (reset: boolean, toast: HTMLElement | null) => {
   if (reset) {
-    // restore tab indicies that we clobbered
+    // restore tab indices that we clobbered
     return queryAll('[data-cached-tabindex]').forEach((el: HTMLElement) => {
       el.tabIndex = Number(el.getAttribute('data-cached-tabindex'));
     });

@@ -196,7 +196,7 @@ const TwoColumnPanel = forwardRef<HTMLDivElement, TwoColumnPanelProps>(
       };
     }, [columnLeftRef.current, isCollapsed]);
 
-    // When the collapsable panel starts to overlay content, it needs to become a focus trap and collapsed by default
+    // When the collapsible panel starts to overlay content, it needs to become a focus trap and collapsed by default
     useLayoutEffect(() => {
       const mediaQueryList = matchMedia(collapsedMediaQuery);
       const handleMatch = (matches: boolean) => {

@@ -42,7 +42,7 @@ const htmlAnchorRef = React.createRef<HTMLAnchorElement>();
 
 /*
  * Note: The below components are statically typed and get validated with tsc
- * to ensure we don't arbitrarily break polymoprhic components. Valid component
+ * to ensure we don't arbitrarily break polymorphic components. Valid component
  * types should throw no errors, where @ts-expect-error is used to indicate
  * an invalid or missing property.
  */

@@ -1,6 +1,6 @@
 /*
  * variable naming convention:
- * --{component name (if applicable)}-{style property}-{...modifiers (if applicable, hypen separated)}
+ * --{component name (if applicable)}-{style property}-{...modifiers (if applicable, hyphen separated)}
  * example: --foo-background-color-light
  */