docs: Fix Typos (#6686)

Co-authored-by: Marie Lucca <40550942+francinelucca@users.noreply.github.com>

Author: kerimmoresh

packages/react/src/Button/Button.features.stories.tsx

@@ -205,7 +205,7 @@ export const LabelWrap = () => {
 }
 
 export const InactiveButtonWithTooltip = () => (
-  <Tooltip text="Action unavailable: an error occurred while loading respository permissions" direction="n">
+  <Tooltip text="Action unavailable: an error occurred while loading repository permissions" direction="n">
     <Button inactive>Review changes</Button>
   </Tooltip>
 )

packages/react/src/Button/ButtonBase.tsx

@@ -111,7 +111,7 @@ const ButtonBase = forwardRef(
               .filter(descriptionID => Boolean(descriptionID))
               .join(' ')}
             // aria-labelledby is needed because the accessible name becomes unset when the button is in a loading state.
-            // We only set it when the button is in a loading state because it will supercede the aria-label when the screen
+            // We only set it when the button is in a loading state because it will supersede the aria-label when the screen
             // reader announces the button name.
             aria-labelledby={
               loading ? [`${uuid}-label`, ariaLabelledBy].filter(labelID => Boolean(labelID)).join(' ') : ariaLabelledBy
@@ -233,7 +233,7 @@ const ButtonBase = forwardRef(
             .filter(descriptionID => Boolean(descriptionID))
             .join(' ')}
           // aria-labelledby is needed because the accessible name becomes unset when the button is in a loading state.
-          // We only set it when the button is in a loading state because it will supercede the aria-label when the screen
+          // We only set it when the button is in a loading state because it will supersede the aria-label when the screen
           // reader announces the button name.
           aria-labelledby={
             loading ? [`${uuid}-label`, ariaLabelledBy].filter(labelID => Boolean(labelID)).join(' ') : ariaLabelledBy