docs: Fix several typos in the documentation (#24756)

(cherry picked from commit 21a5cf6)

Author: Michael Doner

guides/theming.md

@@ -348,7 +348,7 @@ The example below shows how to customize the color of all buttons inside element
 
 You can use the `get-color-from-palette` function to get specific hues from a palette by their
 number identifier. You can also access the contrast color for a particular hue by suffixing the
-hue's number idenfier with `-contrast`.
+hue's number identifier with `-contrast`.
 
 ```scss
 @use '@angular/material' as mat;

src/cdk/overlay/overlay.md

@@ -74,7 +74,7 @@ the overlay element. There are four scroll strategies available as part of the l
 
 `BlockScrollStrategy` will block page scrolling while the overlay is open. Note that some
 applications may implement special or customized page scrolling; if the `BlockScrollStrategy`
-conflicts with this kind of situation, it can be overriden by re-providing `BlockScrollStrategy`
+conflicts with this kind of situation, it can be overridden by re-providing `BlockScrollStrategy`
 with a custom implementation.
 
 `RepositionScrollStrategy` will re-position the overlay element on scroll. Note that this will have

src/cdk/testing/test-harnesses.md

@@ -619,9 +619,9 @@ and
 [`SeleniumWebDriverElement`](https://github.com/angular/components/blob/master/src/cdk/testing/selenium-webdriver/selenium-web-driver-element.ts#L22)
 implementations in Angular CDK serve as good examples of implementations of this interface.
 
-#### Creating a `HarnessEnvironemnt` implementation for the environment
+#### Creating a `HarnessEnvironment` implementation for the environment
 
-Test authors use `HarnessEnvironemnt` to create component harness instances for use in tests.
+Test authors use `HarnessEnvironment` to create component harness instances for use in tests.
 
 `HarnessEnvironment` is an abstract class that must be extended to create a concrete subclass for
 the new environment. When supporting a new test environment, you must create a `HarnessEnvironment`

src/material/input/input.md

@@ -99,7 +99,7 @@ for the `<input>`. However, if there's no label specified in the form field, `ar
 Any `mat-error` and `mat-hint` are automatically added to the input's `aria-describedby` list, and
 `aria-invalid` is automatically updated based on the input's validity state.
 
-When conveying an error, be sure to not rely soley on color. In the message itself, you can use an
+When conveying an error, be sure to not rely solely on color. In the message itself, you can use an
 icon or text such as "Error:" to indicate the message is an error message.
 
 ### Troubleshooting

src/material/progress-bar/progress-bar.md

@@ -45,6 +45,6 @@ use the theme's primary color. This can be changed to `'accent'` or `'warn'`.
 
 `MatProgressBar` implements the ARIA `role="progressbar"` pattern. By default, the progress bar
 sets `aria-valuemin` to `0` and `aria-valuemax` to `100`. Avoid changing these values, as this may
-cause incompatiblity with some assistive technology.
+cause incompatibility with some assistive technology.
 
 Always provide an accessible label via `aria-label` or `aria-labelledby` for each progress bar.

src/material/progress-spinner/progress-spinner.md

@@ -26,6 +26,6 @@ progress-spinners use the theme's primary color. This can be changed to `'accent
 
 `MatProgressSpinner` implements the ARIA `role="progressbar"` pattern. By default, the spinner
 sets `aria-valuemin` to `0` and `aria-valuemax` to `100`. Avoid changing these values, as this may
-cause incompatiblity with some assistive technology.
+cause incompatibility with some assistive technology.
 
 Always provide an accessible label via `aria-label` or `aria-labelledby` for each spinner.

src/material/sidenav/sidenav.md

@@ -120,7 +120,7 @@ If no `mode` is specified, `over` is used by default.
 The `over` and `push` sidenav modes show a backdrop by default, while the `side` mode does not. This
 can be customized by setting the `hasBackdrop` property on `mat-sidenav-container`. Explicitly
 setting `hasBackdrop` to `true` or `false` will override the default backdrop visibility setting for
-all sidenavs regadless of mode. Leaving the property unset or setting it to `null` will use the
+all sidenavs regardless of mode. Leaving the property unset or setting it to `null` will use the
 default backdrop visibility for each mode.
 
 <!-- example(sidenav-backdrop) -->
@@ -212,7 +212,7 @@ specific role makes sense, `role="region"` is again a good fallback.
 #### Focus management
 The sidenav has the ability to capture focus. This behavior is turned on for the `push` and `over` modes and it is off for `side` mode. You can change its default behavior by the `autoFocus` input.
 
-By default the first tabbable element will recieve focus upon open. If you want a different element to be focused, you can set the `cdkFocusInitial` attribute on it.
+By default the first tabbable element will receive focus upon open. If you want a different element to be focused, you can set the `cdkFocusInitial` attribute on it.
 
 ### Troubleshooting
 

src/material/sort/sort.md

@@ -50,7 +50,7 @@ description for the button element, such as "Sort by last name".
 
 `MatSortHeader` applies the `aria-sort` attribute to communicate the active sort state to
 assistive technology. However, most screen readers do not announce changes to the value of
-`aria-sort`, meaning that screen reader users do not receive feedback that sorting occured. To
+`aria-sort`, meaning that screen reader users do not receive feedback that sorting occurred. To
 remedy this, use the `matSortChange` event on the `MatSort` directive to announce state
 updates with the `LiveAnnouncer` service from `@angular/cdk/a11y`.
 

src/material/tabs/tabs.md

@@ -53,7 +53,7 @@ placed relatively close to the `mat-tab-nav-bar` (see [Accessibility](#accessibi
 
 ### Lazy Loading
 By default, the tab contents are eagerly loaded. Eagerly loaded tabs
-will initalize the child components but not inject them into the DOM
+will initialize the child components but not inject them into the DOM
 until the tab is activated.
 
 

src/youtube-player/README.md

@@ -11,7 +11,7 @@ To install, run `npm install @angular/youtube-player`.
 Follow the following instructions for setting up the YouTube player component:
 
 - First, follow the [instructions for installing the API script](https://developers.google.com/youtube/iframe_api_reference#Getting_Started).
-- Then make sure the API is available before bootstraping the YouTube Player component.
+- Then make sure the API is available before bootstrapping the YouTube Player component.
 - Provide the video id by extracting it from the video URL.
 
 ## Example