fix: improve accessibility with ARIA roles and alt tags

.agents/AGENTS.md

@@ -0,0 +1,43 @@
+# Podman.io Workspace Guidelines
+
+The following rules and guidelines have been extracted from the project's README.md and must be strictly followed when making any changes to the repository:
+
+## Tech Stack
+- **Framework**: Built using Docusaurus 2.
+- **Styling**: Tailwind CSS.
+- **Icons**: Iconify.
+
+## Development & Build Rules
+- **Pre-merge Requirement**: `yarn build` MUST be run locally before any merges to the main branch.
+
+## Code and Content Structure
+- **Content Data**: Most page data (text/images) is stored in `static/data/<page-name>`. 
+- **Global Data**: Files like `static/data/global.ts`, `testimonials.ts`, and `meetings.ts` are designed for easy updating by non-coders.
+- **Component Organization**:
+  - `src/components/content`: Self-sufficient components, large page content, or temporary components.
+  - `src/components/layout`: Headers, grids, and sections that organize content.
+  - `src/components/shapes`: SVG components (e.g., wave borders).
+  - `src/components/ui`: Reusable, presentational components with little to no data by default.
+  - `src/components/utilities`: Buttons, links, and small reusable elements.
+
+## Markdown & HTML Rendering
+- **Markdown Strings**: If you are rendering markdown from strings, you MUST use the custom `<Markdown text="..." styles="..." />` component from `components/utilities/`. This wraps `react-markdown` and handles lazy loading properly.
+- **Injected HTML**: For rendering HTML (like from WordPress), you MUST use `html-react-parser` to prevent XSS vulnerabilities.
+
+## Typescript
+- **Base Types**: Stored in `types.d.ts`. Keep these base types minimal and extend them when needed for props.
+
+## CSS and Styling
+- **Tailwind Config**: Podman themes and custom radial gradients are defined in `tailwind.config.js`.
+- **Global CSS**: Changes to default styles belong in `src/assets/css/main.css`.
+- **Fonts**: Default fonts are set inside `@layer base {}` in `main.css` using Tailwind's `@apply` syntax.
+
+## Package Management
+- Use `yarn up <package-name>` (instead of `yarn upgrade`) to upgrade packages like docusaurus and tailwind.
+
+## PR and Open Source Contribution Rules
+- **Verify Issue Status**: Before starting any work on an issue, verify that it is NOT already assigned to someone else. Check if anyone has commented that they are working on it, or if there is already an open PR linked to the issue. DO NOT work on issues that are already claimed to avoid duplicated efforts.
+- **Commit Sign-off**: You MUST certify the patch by signing all commits (`git commit -s`). The author email must match the sign-off email address.
+- **Issue References**: Reference issues using `Fixes: #00000` in the commit message (if applicable).
+- **Human-Written Text**: PR descriptions, commit messages, and GitHub comments must be human-written (not raw LLM output).
+- **Screenshots/Recordings**: Include "Before" and "After" screenshots or screen recordings for any UI changes.

src/components/content/FeaturesCarousel/index.tsx

@@ -7,6 +7,9 @@ const Tab = (props): JSX.Element => {
   return (
     <button
       onClick={method}
+      role="tab"
+      aria-selected={isActive}
+      aria-controls="tabpanel"
       className={`rounded-lg p-4 shadow-sm transition duration-150 hover:bg-purple-700 hover:text-white dark:hover:bg-purple-900 dark:hover:text-gray-50 md:h-36 md:w-56
       ${
         isActive
@@ -67,7 +70,7 @@ function FeaturesCarousel() {
   // render content
   return (
     <section className="bg-gray-100 dark:bg-gray-900">
-      <div className="container -mb-6 flex justify-center gap-5 md:-mb-10 md:gap-8">
+      <div className="container -mb-6 flex justify-center gap-5 md:-mb-10 md:gap-8" role="tablist">
         {/* Loop through Tab data and generate tab buttons for each */}
         {tabData.map((tab, index) => {
           return (

src/components/ui/ArticleCard/index.tsx

@@ -62,6 +62,7 @@ function ArticleCard(props: ArticleCardProps) {
             <img
               src={props.imgSrc || fallbackImage}
               className=" col-start-1 row-start-1 h-full w-full rounded-sm object-cover lg:w-80"
+              alt={sanitizeHtml(props.title)}
             />
           </div>
           <div className="max-w-sm items-center gap-2 self-center p-2 pr-4">
@@ -89,7 +90,7 @@ function ArticleCard(props: ArticleCardProps) {
           </h3>
           {parse(abbrSubtitle)}
           <PublishDate date={props.date} styles="row-start-1 col-start-1 z-10 my-2" />
-          <img src={props.imgSrc || fallbackImage} className="object-fit col-start-1 row-start-1 rounded-sm" />
+          <img src={props.imgSrc || fallbackImage} className="object-fit col-start-1 row-start-1 rounded-sm" alt={sanitizeHtml(props.title)} />
           <p className="text-purple-700">
             By: <a href={props.author_link}>{props.display_name}</a>
           </p>

src/pages/features.tsx

@@ -47,7 +47,7 @@ const PodmanDesktopSection = () => {
       </div>
       <div className="container flex flex-col md:flex-row items-center">
         <div id="imgdiv" className="mx-auto w-full md:w-auto">
-          <img id="pdlogo" className="mx-auto" src="logos/optimized/podman-desktop-logo-200w-198h.webp" />
+          <img id="pdlogo" className="mx-auto" src="logos/optimized/podman-desktop-logo-200w-198h.webp" alt="Podman Desktop Logo" />
         </div>
         <div className="md:w-1/2 xl:w-3/4">
           <p className="my-8 align-middle text-2xl leading-relaxed">
@@ -158,7 +158,7 @@ const PodmanCLISection = () => {
       </div>
       <div className="container mb-4 grid gap-2 lg:grid-cols-3">
         <div className="mx-auto">
-          <img className="max-h-[200px]" src="images/optimized/podman-selkie-385w-358h.webp" />
+          <img className="max-h-[200px]" src="images/optimized/podman-selkie-385w-358h.webp" alt="Podman Selkie mascot" />
         </div>
         <div className="col-span-2">
           <p className="my-8 align-middle text-2xl leading-relaxed">