fix: accessible label for language selector and input aria prop mismatch

[Copilot]

The <select> for language selection lacked an accessible label, causing screen readers to announce it generically. Additionally, the URL input's accessible label was silently broken due to a prop name mismatch.

Changes

• SearchInput.tsx: <select> element has aria-label="Select language for README generation" — the core fix for the reported issue.
• GeneratePageClient.tsx: Fixed prop name from aria-label (kebab-case HTML attribute) to ariaLabel (camelCase React prop matching SearchInputProps). Previously, the value passed by the caller was never received by the component, leaving the URL input without any accessible label at runtime.

// Before — aria-label is a different key than the prop `ariaLabel`; value was silently dropped
<SearchInput aria-label="Enter GitHub repository URL to generate README" />

// After — correctly maps to the `ariaLabel` prop consumed by the component
<SearchInput ariaLabel="Enter GitHub repository URL to generate README" />

Original prompt

---

This section details on the original issue you should resolve

<issue_title>error</issue_title>
<issue_description>> ⚠️ Potential issue | 🟡 Minor

Add an accessible label for the language selector.

Line 75 renders a <select> without a label. Screen readers will announce it generically, which hurts usability.

♿ Proposed fix

-          <select
+          <select
             value={language}
             onChange={(e) => setLanguage(e.target.value)}
+            aria-label="Select README language"
             className="bg-zinc-900/50 border border-white/10 rounded-2xl px-6 py-6 text-white focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all backdrop-blur-xl appearance-none cursor-pointer min-w-[140px]"
           >

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

          <select
            value={language}
            onChange={(e) => setLanguage(e.target.value)}
            aria-label="Select README language"
            className="bg-zinc-900/50 border border-white/10 rounded-2xl px-6 py-6 text-white focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all backdrop-blur-xl appearance-none cursor-pointer min-w-[140px]"
          >
            {languages.map((lang) => (
              <option key={lang} value={lang} className="bg-zinc-900 text-white">
                {lang}
              </option>
            ))}
          </select>

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/components/Generator/SearchInput.tsx` around lines 75 - 85, The language
<select> in the SearchInput component lacks an accessible label; add one by
giving the <select> an id (e.g., "language-select") and either render a
corresponding <label htmlFor="language-select">Language</label> (use your
existing "sr-only" or visually-hidden utility class to keep it visually hidden)
or add an aria-label/aria-labelledby on the <select>; ensure this change ties to
the existing language, setLanguage and languages usage so screen readers
announce the control properly.

Originally posted by @coderabbitai[bot] in #92</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes error #106

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
readme-gen-ai	Ready	Preview, Comment	Mar 27, 2026 6:41am

[Copilot]

@jaseel0 The model claude-sonnet-4.6 is not available for your account. This can happen if the model was disabled by your organization's policy or if your Copilot plan doesn't include access to it.

You can try again without specifying a model (just @copilot) to use the default, or choose a different model from the model picker.

If you want to contact GitHub about this error, please mention the following identifier so they can better serve you: df510099-ba12-47a0-b3a0-2cd3658228fb

[jaseel0]

@copilot fix it issue
autofix.ci / autofix (pull_request)
autofix.ci / autofix (pull_request)Failing after 14s
CI / build-and-lint (pull_request)
CI / build-and-lint (pull_request)Failing after 9s

[Copilot]

@copilot fix it issue
autofix.ci / autofix (pull_request)
autofix.ci / autofix (pull_request)Failing afte...

Fixed in commit 6b027d4. The CI failure was caused by package.json listing @testing-library/dom, @types/aria-query, aria-query, dom-accessibility-api, lz-string, pretty-format, ansi-regex, ansi-styles, and react-is as dependencies, but the package-lock.json was missing their resolved entries — causing npm ci to fail with an out-of-sync error. Running npm install regenerated the lock file with all required entries.