docs fixes: add missing titles to framework switcher (#1813)

* fix: add missing titles to framework switcher

* fix: heading code example indentation

Author: reesscot

docs/src/components/Layout/FrameworkChooser.tsx

@@ -46,6 +46,7 @@ export const FrameworkChooser = ({ platform }) => {
       <ToggleButton
         value="react"
         size="small"
+        title="React"
         padding={{ base: '4px', medium: undefined }}
       >
         <VisuallyHidden>React</VisuallyHidden>
@@ -59,6 +60,7 @@ export const FrameworkChooser = ({ platform }) => {
       <ToggleButton
         value="angular"
         size="small"
+        title="Angular"
         padding={{ base: '4px', medium: undefined }}
       >
         <VisuallyHidden>Angular</VisuallyHidden>
@@ -72,6 +74,7 @@ export const FrameworkChooser = ({ platform }) => {
       <ToggleButton
         value="vue"
         size="small"
+        title="Vue"
         padding={{ base: '4px', medium: undefined }}
       >
         <VisuallyHidden>Vue</VisuallyHidden>
@@ -85,6 +88,7 @@ export const FrameworkChooser = ({ platform }) => {
       <ToggleButton
         value="flutter"
         size="small"
+        title="Flutter"
         padding={{ base: '4px', medium: undefined }}
       >
         <VisuallyHidden>Flutter</VisuallyHidden>

docs/src/components/Layout/Header.tsx

@@ -94,15 +94,15 @@ const ColorModeSwitcher = ({ colorMode, setColorMode }) => {
       isSelectionRequired
       className="color-switcher"
     >
-      <ToggleButton value="light">
+      <ToggleButton value="light" title="Light mode">
         <VisuallyHidden>Light mode</VisuallyHidden>
         <MdWbSunny />
       </ToggleButton>
-      <ToggleButton value="dark">
+      <ToggleButton value="dark" title="Dark mode">
         <VisuallyHidden>Dark mode</VisuallyHidden>
         <MdBedtime />
       </ToggleButton>
-      <ToggleButton value="system">
+      <ToggleButton value="system" title="System preferences">
         <VisuallyHidden>System preference</VisuallyHidden>
         <MdTonality />
       </ToggleButton>

docs/src/pages/components/heading/react.mdx

@@ -85,8 +85,8 @@ Override styles for any `Heading` component `h1 - h6`
     }
 
     h6.amplify-heading {
-    font-size: 2rem;
-    font-weight: bold;
+      font-size: 2rem;
+      font-weight: bold;
     }
     ```