- Adding alt text to images in the react courses (#905)

DanDaManTran · web-flow · commit 163de1575b15 · 2025-04-04T10:24:17.000-05:00
* - Adding alt text to images in the react courses
diff --git a/exercises/react-vite/02-setting-up-your-environment/02-solution/src/App.tsx b/exercises/react-vite/02-setting-up-your-environment/02-solution/src/App.tsx
@@ -1,7 +1,7 @@
 import { useState } from "react"
 import reactLogo from "./assets/react.svg"
 import viteLogo from "./assets/vite.svg"
-import "./App.css"
+import "./index.css"
 
 function App() {
   const [count, setCount] = useState(0)
diff --git a/exercises/react-vite/02-setting-up-your-environment/03-solution/src/App.tsx b/exercises/react-vite/02-setting-up-your-environment/03-solution/src/App.tsx
@@ -1,7 +1,7 @@
 import { useState } from "react"
 import reactLogo from "./assets/react.svg"
 import viteLogo from "./assets/vite.svg"
-import "./App.css"
+import "./index.css"
 
 function App() {
   const [count, setCount] = useState(0)
diff --git a/exercises/react-vite/03-intro-to-jsx/01-solution/src/App.tsx b/exercises/react-vite/03-intro-to-jsx/01-solution/src/App.tsx
@@ -5,7 +5,7 @@ const App: React.FC = () => {
         <h2 className="page-header">Restaurants</h2>
         <div className="restaurant">
           <img
-            alt=""
+            alt="A thumbnail for Poutine Palace"
             src="/node_modules/place-my-order-assets/images/4-thumbnail.jpg"
             width="100"
             height="100"
diff --git a/exercises/react-vite/03-intro-to-jsx/02-problem/src/App.tsx b/exercises/react-vite/03-intro-to-jsx/02-problem/src/App.tsx
@@ -41,7 +41,7 @@ const App: React.FC = () => {
         <h2 className="page-header">Restaurants</h2>
         <div className="restaurant">
           <img
-            alt=""
+            alt="A thumbnail for Restaurants"
             src="/node_modules/place-my-order-assets/images/4-thumbnail.jpg"
             width="100"
             height="100"
diff --git a/exercises/react-vite/03-intro-to-jsx/02-solution/src/App.tsx b/exercises/react-vite/03-intro-to-jsx/02-solution/src/App.tsx
@@ -42,7 +42,7 @@ const App: React.FC = () => {
         {restaurants.data ? (
           restaurants.data.map(({ _id, address, images, name, slug }) => (
             <div key={_id} className="restaurant">
-              <img src={images.thumbnail} alt="" width="100" height="100" />
+              <img src={images.thumbnail} alt={`A thumbnail for ${name}`} width="100" height="100" />
               <h3>{name}</h3>
 
               {address && (
diff --git a/exercises/react-vite/04-components/01-problem/src/App.tsx b/exercises/react-vite/04-components/01-problem/src/App.tsx
@@ -43,7 +43,7 @@ const App: React.FC = () => {
         {restaurants.data ? (
           restaurants.data.map(({ _id, address, images, name, slug }) => (
             <div key={_id} className="restaurant">
-              <img src={images.thumbnail} alt="" width="100" height="100" />
+              <img src={images.thumbnail} alt={`A thumbnail for ${name}`} width="100" height="100" />
               <h3>{name}</h3>
 
               {address && (
diff --git a/exercises/react-vite/04-components/01-solution/src/App.tsx b/exercises/react-vite/04-components/01-solution/src/App.tsx
@@ -1,5 +1,5 @@
 import RestaurantList from "./pages/RestaurantList"
-import "./App.css"
+import "./index.css"
 
 const App: React.FC = () => {
   return (
diff --git a/exercises/react-vite/04-components/01-solution/src/pages/RestaurantList/RestaurantList.tsx b/exercises/react-vite/04-components/01-solution/src/pages/RestaurantList/RestaurantList.tsx
@@ -42,7 +42,7 @@ const RestaurantList: React.FC = () => {
         {restaurants.data ? (
           restaurants.data.map(({ _id, address, images, name, slug }) => (
             <div key={_id} className="restaurant">
-              <img src={images.thumbnail} alt="" width="100" height="100" />
+              <img src={images.thumbnail} alt={`A thumbnail for ${name}`} width="100" height="100" />
               <h3>{name}</h3>
 
               {address && (
diff --git a/exercises/react-vite/05-props/01-problem/src/App.tsx b/exercises/react-vite/05-props/01-problem/src/App.tsx
@@ -1,5 +1,5 @@
 import RestaurantList from "./pages/RestaurantList"
-import "./App.css"
+import "./index.css"
 
 const App: React.FC = () => {
   return (
diff --git a/exercises/react-vite/05-props/01-problem/src/pages/RestaurantList/RestaurantList.tsx b/exercises/react-vite/05-props/01-problem/src/pages/RestaurantList/RestaurantList.tsx
@@ -43,7 +43,7 @@ const RestaurantList: React.FC = () => {
         {restaurants.data ? (
           restaurants.data.map(({ _id, address, images, name, slug }) => (
             <div key={_id} className="restaurant">
-              <img src={images.thumbnail} alt="" width="100" height="100" />
+              <img src={images.thumbnail} alt={`A thumbnail for ${name}`} width="100" height="100" />
               <h3>{name}</h3>
 
               {address && (
diff --git a/exercises/react-vite/05-props/01-solution/src/App.tsx b/exercises/react-vite/05-props/01-solution/src/App.tsx
@@ -1,5 +1,5 @@
 import RestaurantList from "./pages/RestaurantList"
-import "./App.css"
+import "./index.css"
 
 const App: React.FC = () => {
   return (
diff --git a/exercises/react-vite/05-props/01-solution/src/pages/RestaurantList/ListItem.tsx b/exercises/react-vite/05-props/01-solution/src/pages/RestaurantList/ListItem.tsx
@@ -19,7 +19,7 @@ const ListItem: React.FC<ListItemProps> = ({
   return (
     <>
       <div className="restaurant">
-        <img src={thumbnail} alt="" width="100" height="100" />
+        <img src={thumbnail} alt={`A thumbnail for ${name}`} width="100" height="100" />
         <h3>{name}</h3>
 
         {address && (
diff --git a/exercises/react-vite/06-routing/01-problem/src/pages/RestaurantList/ListItem.tsx b/exercises/react-vite/06-routing/01-problem/src/pages/RestaurantList/ListItem.tsx
@@ -19,7 +19,7 @@ const ListItem: React.FC<ListItemProps> = ({
   return (
     <>
       <div className="restaurant">
-        <img src={thumbnail} alt="" width="100" height="100" />
+        <img src={thumbnail} alt={`A thumbnail for ${name}`} width="100" height="100" />
         <h3>{name}</h3>
 
         {address && (
diff --git a/exercises/react-vite/06-routing/01-solution/src/pages/RestaurantList/ListItem.tsx b/exercises/react-vite/06-routing/01-solution/src/pages/RestaurantList/ListItem.tsx
@@ -19,7 +19,7 @@ const ListItem: React.FC<ListItemProps> = ({
   return (
     <>
       <div className="restaurant">
-        <img src={thumbnail} alt="" width="100" height="100" />
+        <img src={thumbnail} alt={`A thumbnail for ${name}`} width="100" height="100" />
         <h3>{name}</h3>
 
         {address && (
diff --git a/exercises/react-vite/06-routing/02-problem/src/pages/RestaurantList/ListItem.tsx b/exercises/react-vite/06-routing/02-problem/src/pages/RestaurantList/ListItem.tsx
@@ -19,7 +19,7 @@ const ListItem: React.FC<ListItemProps> = ({
   return (
     <>
       <div className="restaurant">
-        <img src={thumbnail} alt="" width="100" height="100" />
+        <img src={thumbnail} alt={`A thumbnail for ${name}`} width="100" height="100" />
         <h3>{name}</h3>
 
         {address && (
diff --git a/exercises/react-vite/06-routing/02-solution/src/pages/RestaurantList/ListItem.tsx b/exercises/react-vite/06-routing/02-solution/src/pages/RestaurantList/ListItem.tsx
@@ -19,7 +19,7 @@ const ListItem: React.FC<ListItemProps> = ({
   return (
     <>
       <div className="restaurant">
-        <img src={thumbnail} alt="" width="100" height="100" />
+        <img src={thumbnail} alt={`A thumbnail for ${name}`} width="100" height="100" />
         <h3>{name}</h3>
 
         {address && (
diff --git a/exercises/react-vite/07-styling-in-react/01-problem/src/pages/RestaurantList/ListItem.tsx b/exercises/react-vite/07-styling-in-react/01-problem/src/pages/RestaurantList/ListItem.tsx
@@ -19,7 +19,7 @@ const ListItem: React.FC<ListItemProps> = ({
   return (
     <>
       <div className="restaurant">
-        <img src={`/${thumbnail}`} alt="" width="100" height="100" />
+        <img src={thumbnail} alt={`A thumbnail for ${name}`} width="100" height="100" />
         <h3>{name}</h3>
 
         {address && (
diff --git a/exercises/react-vite/07-styling-in-react/01-solution/src/pages/RestaurantList/ListItem.tsx b/exercises/react-vite/07-styling-in-react/01-solution/src/pages/RestaurantList/ListItem.tsx
@@ -19,7 +19,7 @@ const ListItem: React.FC<ListItemProps> = ({
   return (
     <>
       <div className="restaurant">
-        <img src={`/${thumbnail}`} alt="" width="100" height="100" />
+        <img src={thumbnail} alt={`A thumbnail for ${name}`} width="100" height="100" />
         <h3>{name}</h3>
 
         {address && (
diff --git a/exercises/react-vite/08-stateful-hooks/01-problem/src/pages/RestaurantList/ListItem.tsx b/exercises/react-vite/08-stateful-hooks/01-problem/src/pages/RestaurantList/ListItem.tsx
@@ -19,7 +19,7 @@ const ListItem: React.FC<ListItemProps> = ({
   return (
     <>
       <div className="restaurant">
-        <img src={`/${thumbnail}`} alt="" width="100" height="100" />
+        <img src={thumbnail} alt={`A thumbnail for ${name}`} width="100" height="100" />
         <h3>{name}</h3>
 
         {address && (
diff --git a/exercises/react-vite/08-stateful-hooks/01-solution/src/pages/RestaurantList/ListItem.tsx b/exercises/react-vite/08-stateful-hooks/01-solution/src/pages/RestaurantList/ListItem.tsx
@@ -19,7 +19,7 @@ const ListItem: React.FC<ListItemProps> = ({
   return (
     <>
       <div className="restaurant">
-        <img src={`/${thumbnail}`} alt="" width="100" height="100" />
+        <img src={thumbnail} alt={`A thumbnail for ${name}`} width="100" height="100" />
         <h3>{name}</h3>
 
         {address && (
diff --git a/exercises/react-vite/08-stateful-hooks/02-problem/src/pages/RestaurantList/ListItem.tsx b/exercises/react-vite/08-stateful-hooks/02-problem/src/pages/RestaurantList/ListItem.tsx
@@ -19,7 +19,7 @@ const ListItem: React.FC<ListItemProps> = ({
   return (
     <>
       <div className="restaurant">
-        <img src={`/${thumbnail}`} alt="" width="100" height="100" />
+        <img src={thumbnail} alt={`A thumbnail for ${name}`} width="100" height="100" />
         <h3>{name}</h3>
 
         {address && (
diff --git a/exercises/react-vite/08-stateful-hooks/02-solution/src/pages/RestaurantList/ListItem.tsx b/exercises/react-vite/08-stateful-hooks/02-solution/src/pages/RestaurantList/ListItem.tsx
@@ -19,7 +19,7 @@ const ListItem: React.FC<ListItemProps> = ({
   return (
     <>
       <div className="restaurant">
-        <img src={`/${thumbnail}`} alt="" width="100" height="100" />
+        <img src={thumbnail} alt={`A thumbnail for ${name}`} width="100" height="100" />
         <h3>{name}</h3>
 
         {address && (
diff --git a/exercises/react-vite/08-stateful-hooks/03-problem/src/pages/RestaurantList/ListItem.tsx b/exercises/react-vite/08-stateful-hooks/03-problem/src/pages/RestaurantList/ListItem.tsx
@@ -19,7 +19,7 @@ const ListItem: React.FC<ListItemProps> = ({
   return (
     <>
       <div className="restaurant">
-        <img src={`/${thumbnail}`} alt="" width="100" height="100" />
+        <img src={thumbnail} alt={`A thumbnail for ${name}`} width="100" height="100" />
         <h3>{name}</h3>
 
         {address && (
diff --git a/exercises/react-vite/08-stateful-hooks/03-solution/src/pages/RestaurantList/ListItem.tsx b/exercises/react-vite/08-stateful-hooks/03-solution/src/pages/RestaurantList/ListItem.tsx
@@ -19,7 +19,7 @@ const ListItem: React.FC<ListItemProps> = ({
   return (
     <>
       <div className="restaurant">
-        <img src={`/${thumbnail}`} alt="" width="100" height="100" />
+        <img src={thumbnail} alt={`A thumbnail for ${name}`} width="100" height="100" />
         <h3>{name}</h3>
 
         {address && (
diff --git a/exercises/react-vite/09-making-http-requests/01-problem/src/pages/RestaurantList/ListItem.tsx b/exercises/react-vite/09-making-http-requests/01-problem/src/pages/RestaurantList/ListItem.tsx
@@ -19,7 +19,7 @@ const ListItem: React.FC<ListItemProps> = ({
   return (
     <>
       <div className="restaurant">
-        <img src={`/${thumbnail}`} alt="" width="100" height="100" />
+        <img src={thumbnail} alt={`A thumbnail for ${name}`} width="100" height="100" />
         <h3>{name}</h3>
 
         {address && (
diff --git a/exercises/react-vite/09-making-http-requests/01-solution/src/pages/RestaurantList/ListItem.tsx b/exercises/react-vite/09-making-http-requests/01-solution/src/pages/RestaurantList/ListItem.tsx
@@ -19,7 +19,7 @@ const ListItem: React.FC<ListItemProps> = ({
   return (
     <>
       <div className="restaurant">
-        <img src={`/${thumbnail}`} alt="" width="100" height="100" />
+        <img src={thumbnail} alt={`A thumbnail for ${name}`} width="100" height="100" />
         <h3>{name}</h3>
 
         {address && (
diff --git a/exercises/react-vite/09-making-http-requests/02-problem/src/pages/RestaurantList/ListItem.tsx b/exercises/react-vite/09-making-http-requests/02-problem/src/pages/RestaurantList/ListItem.tsx
@@ -19,7 +19,7 @@ const ListItem: React.FC<ListItemProps> = ({
   return (
     <>
       <div className="restaurant">
-        <img src={`/${thumbnail}`} alt="" width="100" height="100" />
+        <img src={thumbnail} alt={`A thumbnail for ${name}`} width="100" height="100" />
         <h3>{name}</h3>
 
         {address && (
diff --git a/exercises/react-vite/09-making-http-requests/02-solution/src/pages/RestaurantList/ListItem.tsx b/exercises/react-vite/09-making-http-requests/02-solution/src/pages/RestaurantList/ListItem.tsx
@@ -19,7 +19,7 @@ const ListItem: React.FC<ListItemProps> = ({
   return (
     <>
       <div className="restaurant">
-        <img src={`/${thumbnail}`} alt="" width="100" height="100" />
+        <img src={thumbnail} alt={`A thumbnail for ${name}`} width="100" height="100" />
         <h3>{name}</h3>
 
         {address && (
diff --git a/exercises/react-vite/09-making-http-requests/03-problem/src/pages/RestaurantList/ListItem.tsx b/exercises/react-vite/09-making-http-requests/03-problem/src/pages/RestaurantList/ListItem.tsx
@@ -19,7 +19,7 @@ const ListItem: React.FC<ListItemProps> = ({
   return (
     <>
       <div className="restaurant">
-        <img src={`/${thumbnail}`} alt="" width="100" height="100" />
+        <img src={thumbnail} alt={`A thumbnail for ${name}`} width="100" height="100" />
         <h3>{name}</h3>
 
         {address && (
diff --git a/exercises/react-vite/09-making-http-requests/03-solution/src/pages/RestaurantList/ListItem.tsx b/exercises/react-vite/09-making-http-requests/03-solution/src/pages/RestaurantList/ListItem.tsx
@@ -19,7 +19,7 @@ const ListItem: React.FC<ListItemProps> = ({
   return (
     <>
       <div className="restaurant">
-        <img src={`/${thumbnail}`} alt="" width="100" height="100" />
+        <img src={thumbnail} alt={`A thumbnail for ${name}`} width="100" height="100" />
         <h3>{name}</h3>
 
         {address && (
diff --git a/exercises/react-vite/09-making-http-requests/04-problem/src/pages/RestaurantList/ListItem.tsx b/exercises/react-vite/09-making-http-requests/04-problem/src/pages/RestaurantList/ListItem.tsx
@@ -19,7 +19,7 @@ const ListItem: React.FC<ListItemProps> = ({
   return (
     <>
       <div className="restaurant">
-        <img src={`/${thumbnail}`} alt="" width="100" height="100" />
+        <img src={thumbnail} alt={`A thumbnail for ${name}`} width="100" height="100" />
         <h3>{name}</h3>
 
         {address && (
diff --git a/exercises/react-vite/09-making-http-requests/04-solution/src/pages/RestaurantList/ListItem.tsx b/exercises/react-vite/09-making-http-requests/04-solution/src/pages/RestaurantList/ListItem.tsx
@@ -19,7 +19,7 @@ const ListItem: React.FC<ListItemProps> = ({
   return (
     <>
       <div className="restaurant">
-        <img src={`/${thumbnail}`} alt="" width="100" height="100" />
+        <img src={thumbnail} alt={`A thumbnail for ${name}`} width="100" height="100" />
         <h3>{name}</h3>
 
         {address && (
diff --git a/exercises/react-vite/10-nested-routes/01-solution/src/pages/RestaurantDetails/RestaurantDetails.tsx b/exercises/react-vite/10-nested-routes/01-solution/src/pages/RestaurantDetails/RestaurantDetails.tsx
@@ -34,7 +34,7 @@ const RestaurantDetails: React.FC = () => {
         <h3>The best food this side of the Mississippi</h3>
 
         <p className="description">
-          <img alt="" src={`/${restaurant.data.images.owner}`} />
+          <img alt={`The owner of ${restaurant.data.name}`} src={`/${restaurant.data.images.owner}`} />
           Description for {restaurant.data.name}
         </p>
         <p className="order-link">
diff --git a/exercises/react-vite/10-nested-routes/01-solution/src/pages/RestaurantList/ListItem.tsx b/exercises/react-vite/10-nested-routes/01-solution/src/pages/RestaurantList/ListItem.tsx
@@ -21,7 +21,7 @@ const ListItem: React.FC<ListItemProps> = ({
   return (
     <>
       <div className="restaurant">
-        <img src={`/${thumbnail}`} alt="" width="100" height="100" />
+        <img src={thumbnail} alt={`A thumbnail for ${name}`} width="100" height="100" />
         <h3>{name}</h3>
 
         {address && (
diff --git a/exercises/react-vite/10-nested-routes/02-solution/src/pages/RestaurantDetails/RestaurantDetails.tsx b/exercises/react-vite/10-nested-routes/02-solution/src/pages/RestaurantDetails/RestaurantDetails.tsx
@@ -34,7 +34,7 @@ const RestaurantDetails: React.FC = () => {
         <h3>The best food this side of the Mississippi</h3>
 
         <p className="description">
-          <img alt="" src={`/${restaurant.data.images.owner}`} />
+          <img alt={`The owner of ${restaurant.data.name}`} src={`/${restaurant.data.images.owner}`} />
           Description for {restaurant.data.name}
         </p>
         <p className="order-link">
diff --git a/exercises/react-vite/10-nested-routes/02-solution/src/pages/RestaurantList/ListItem.tsx b/exercises/react-vite/10-nested-routes/02-solution/src/pages/RestaurantList/ListItem.tsx
@@ -21,7 +21,7 @@ const ListItem: React.FC<ListItemProps> = ({
   return (
     <>
       <div className="restaurant">
-        <img src={`/${thumbnail}`} alt="" width="100" height="100" />
+        <img src={thumbnail} alt={`A thumbnail for ${name}`} width="100" height="100" />
         <h3>{name}</h3>
 
         {address && (
diff --git a/exercises/react-vite/11-controlled-vs-uncontrolled/01-problem/src/pages/RestaurantDetails/RestaurantDetails.tsx b/exercises/react-vite/11-controlled-vs-uncontrolled/01-problem/src/pages/RestaurantDetails/RestaurantDetails.tsx
@@ -34,7 +34,7 @@ const RestaurantDetails: React.FC = () => {
         <h3>The best food this side of the Mississippi</h3>
 
         <p className="description">
-          <img alt="" src={`/${restaurant.data.images.owner}`} />
+          <img alt={`The owner of ${restaurant.data.name}`} src={`/${restaurant.data.images.owner}`} />
           Description for {restaurant.data.name}
         </p>
         <p className="order-link">
diff --git a/exercises/react-vite/11-controlled-vs-uncontrolled/01-problem/src/pages/RestaurantList/ListItem.tsx b/exercises/react-vite/11-controlled-vs-uncontrolled/01-problem/src/pages/RestaurantList/ListItem.tsx
@@ -21,7 +21,7 @@ const ListItem: React.FC<ListItemProps> = ({
   return (
     <>
       <div className="restaurant">
-        <img src={`/${thumbnail}`} alt="" width="100" height="100" />
+        <img src={thumbnail} alt={`A thumbnail for ${name}`} width="100" height="100" />
         <h3>{name}</h3>
 
         {address && (
diff --git a/exercises/react-vite/11-controlled-vs-uncontrolled/01-solution/src/pages/RestaurantDetails/RestaurantDetails.tsx b/exercises/react-vite/11-controlled-vs-uncontrolled/01-solution/src/pages/RestaurantDetails/RestaurantDetails.tsx
@@ -34,7 +34,7 @@ const RestaurantDetails: React.FC = () => {
         <h3>The best food this side of the Mississippi</h3>
 
         <p className="description">
-          <img alt="" src={`/${restaurant.data.images.owner}`} />
+          <img alt={`The owner of ${restaurant.data.name}`} src={`/${restaurant.data.images.owner}`} />
           Description for {restaurant.data.name}
         </p>
         <p className="order-link">
diff --git a/exercises/react-vite/11-controlled-vs-uncontrolled/01-solution/src/pages/RestaurantList/ListItem.tsx b/exercises/react-vite/11-controlled-vs-uncontrolled/01-solution/src/pages/RestaurantList/ListItem.tsx
@@ -21,7 +21,7 @@ const ListItem: React.FC<ListItemProps> = ({
   return (
     <>
       <div className="restaurant">
-        <img src={`/${thumbnail}`} alt="" width="100" height="100" />
+        <img src={thumbnail} alt={`A thumbnail for ${name}`} width="100" height="100" />
         <h3>{name}</h3>
 
         {address && (
diff --git a/exercises/react-vite/11-controlled-vs-uncontrolled/02-problem/src/pages/RestaurantDetails/RestaurantDetails.tsx b/exercises/react-vite/11-controlled-vs-uncontrolled/02-problem/src/pages/RestaurantDetails/RestaurantDetails.tsx
@@ -34,7 +34,7 @@ const RestaurantDetails: React.FC = () => {
         <h3>The best food this side of the Mississippi</h3>
 
         <p className="description">
-          <img alt="" src={`/${restaurant.data.images.owner}`} />
+          <img alt={`The owner of ${restaurant.data.name}`} src={`/${restaurant.data.images.owner}`} />
           Description for {restaurant.data.name}
         </p>
         <p className="order-link">
diff --git a/exercises/react-vite/11-controlled-vs-uncontrolled/02-problem/src/pages/RestaurantList/ListItem.tsx b/exercises/react-vite/11-controlled-vs-uncontrolled/02-problem/src/pages/RestaurantList/ListItem.tsx
@@ -21,7 +21,7 @@ const ListItem: React.FC<ListItemProps> = ({
   return (
     <>
       <div className="restaurant">
-        <img src={`/${thumbnail}`} alt="" width="100" height="100" />
+        <img src={thumbnail} alt={`A thumbnail for ${name}`} width="100" height="100" />
         <h3>{name}</h3>
 
         {address && (
diff --git a/exercises/react-vite/11-controlled-vs-uncontrolled/02-solution/src/pages/RestaurantDetails/RestaurantDetails.tsx b/exercises/react-vite/11-controlled-vs-uncontrolled/02-solution/src/pages/RestaurantDetails/RestaurantDetails.tsx
@@ -34,7 +34,7 @@ const RestaurantDetails: React.FC = () => {
         <h3>The best food this side of the Mississippi</h3>
 
         <p className="description">
-          <img alt="" src={`/${restaurant.data.images.owner}`} />
+          <img alt={`The owner of ${restaurant.data.name}`} src={`/${restaurant.data.images.owner}`} />
           Description for {restaurant.data.name}
         </p>
         <p className="order-link">
diff --git a/exercises/react-vite/11-controlled-vs-uncontrolled/02-solution/src/pages/RestaurantList/ListItem.tsx b/exercises/react-vite/11-controlled-vs-uncontrolled/02-solution/src/pages/RestaurantList/ListItem.tsx
@@ -21,7 +21,7 @@ const ListItem: React.FC<ListItemProps> = ({
   return (
     <>
       <div className="restaurant">
-        <img src={`/${thumbnail}`} alt="" width="100" height="100" />
+        <img src={thumbnail} alt={`A thumbnail for ${name}`} width="100" height="100" />
         <h3>{name}</h3>
 
         {address && (
diff --git a/exercises/react-vite/11-controlled-vs-uncontrolled/03-problem/src/pages/RestaurantDetails/RestaurantDetails.tsx b/exercises/react-vite/11-controlled-vs-uncontrolled/03-problem/src/pages/RestaurantDetails/RestaurantDetails.tsx
@@ -34,7 +34,7 @@ const RestaurantDetails: React.FC = () => {
         <h3>The best food this side of the Mississippi</h3>
 
         <p className="description">
-          <img alt="" src={`/${restaurant.data.images.owner}`} />
+          <img alt={`The owner of ${restaurant.data.name}`} src={`/${restaurant.data.images.owner}`} />
           Description for {restaurant.data.name}
         </p>
         <p className="order-link">
diff --git a/exercises/react-vite/11-controlled-vs-uncontrolled/03-problem/src/pages/RestaurantList/ListItem.tsx b/exercises/react-vite/11-controlled-vs-uncontrolled/03-problem/src/pages/RestaurantList/ListItem.tsx
diff --git a/exercises/react-vite/11-controlled-vs-uncontrolled/03-solution/src/pages/RestaurantDetails/RestaurantDetails.tsx b/exercises/react-vite/11-controlled-vs-uncontrolled/03-solution/src/pages/RestaurantDetails/RestaurantDetails.tsx
diff --git a/exercises/react-vite/11-controlled-vs-uncontrolled/03-solution/src/pages/RestaurantList/ListItem.tsx b/exercises/react-vite/11-controlled-vs-uncontrolled/03-solution/src/pages/RestaurantList/ListItem.tsx
diff --git a/exercises/react-vite/12-testing/01-problem/src/pages/RestaurantDetails/RestaurantDetails.tsx b/exercises/react-vite/12-testing/01-problem/src/pages/RestaurantDetails/RestaurantDetails.tsx
diff --git a/exercises/react-vite/12-testing/01-problem/src/pages/RestaurantList/ListItem.tsx b/exercises/react-vite/12-testing/01-problem/src/pages/RestaurantList/ListItem.tsx
diff --git a/exercises/react-vite/12-testing/01-solution/src/pages/RestaurantDetails/RestaurantDetails.tsx b/exercises/react-vite/12-testing/01-solution/src/pages/RestaurantDetails/RestaurantDetails.tsx
diff --git a/exercises/react-vite/12-testing/01-solution/src/pages/RestaurantList/ListItem.tsx b/exercises/react-vite/12-testing/01-solution/src/pages/RestaurantList/ListItem.tsx
diff --git a/exercises/react-vite/12-testing/02-problem/src/pages/RestaurantDetails/RestaurantDetails.tsx b/exercises/react-vite/12-testing/02-problem/src/pages/RestaurantDetails/RestaurantDetails.tsx
diff --git a/exercises/react-vite/12-testing/02-problem/src/pages/RestaurantList/ListItem.tsx b/exercises/react-vite/12-testing/02-problem/src/pages/RestaurantList/ListItem.tsx
diff --git a/exercises/react-vite/12-testing/02-solution/src/pages/RestaurantDetails/RestaurantDetails.tsx b/exercises/react-vite/12-testing/02-solution/src/pages/RestaurantDetails/RestaurantDetails.tsx
diff --git a/exercises/react-vite/12-testing/02-solution/src/pages/RestaurantList/ListItem.tsx b/exercises/react-vite/12-testing/02-solution/src/pages/RestaurantList/ListItem.tsx
diff --git a/src/react-native/02-setting-up-your-environment/setting-up-your-environment.md b/src/react-native/02-setting-up-your-environment/setting-up-your-environment.md
diff --git a/src/react-vite/03-intro-to-jsx/template.html b/src/react-vite/03-intro-to-jsx/template.html
diff --git a/src/react-vite/react.md b/src/react-vite/react.md
