Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: resolve a11y warnings for label-has-associated-control rule #4152

Open
wants to merge 10 commits into
base: beta
Choose a base branch
from
101 changes: 0 additions & 101 deletions components/AddContributorsHeader/add-contributors-header.tsx

This file was deleted.

2 changes: 2 additions & 0 deletions components/Contributors/AddToContributorInsightDrawer.tsx
Original file line number Diff line number Diff line change
@@ -135,6 +135,7 @@ export default function AddToContributorInsightDrawer({
})),
]}
value={selectedInsight ?? "new"}
labelText="Select a workspace"
placeholder="Select a workspace"
onValueChange={(value) => {
setSelectedInsight(value);
@@ -154,6 +155,7 @@ export default function AddToContributorInsightDrawer({
})),
]}
value={workspaceId}
labelText="Select a workspace"
placeholder="Select a workspace"
onValueChange={(value) => {
setWorkspaceId(value);
2 changes: 2 additions & 0 deletions components/Contributors/AddToContributorInsightModal.tsx
Original file line number Diff line number Diff line change
@@ -136,6 +136,7 @@ export default function AddToContributorInsightModal({
})),
]}
value={selectedInsight ?? "new"}
labelText="Select a workspace"
placeholder="Select a workspace"
onValueChange={(value) => {
setSelectedInsight(value);
@@ -155,6 +156,7 @@ export default function AddToContributorInsightModal({
})),
]}
value={workspaceId}
labelText="Select a workspace"
placeholder="Select a workspace"
onValueChange={(value) => {
setWorkspaceId(value);
1 change: 1 addition & 0 deletions components/Repositories/AddToWorkspaceDrawer.tsx
Original file line number Diff line number Diff line change
@@ -137,6 +137,7 @@ export default function AddToWorkspaceDrawer({ repository, type = "repo" }: AddT
]}
position="popper"
value={workspaceId ?? "new"}
labelText="Select a workspace"
placeholder="Select a workspace"
onValueChange={(value) => {
setWorkspaceId(value);
1 change: 1 addition & 0 deletions components/Repositories/AddToWorkspaceModal.tsx
Original file line number Diff line number Diff line change
@@ -131,6 +131,7 @@ export default function AddToWorkspaceModal({ repository, isOpen, onCloseModal,
})),
]}
value={workspaceId ?? "new"}
labelText="Select a workspace"
placeholder="Select a workspace"
onValueChange={(value) => {
setWorkspaceId(value);
8 changes: 7 additions & 1 deletion components/Workspaces/SearchReposTable.tsx
Original file line number Diff line number Diff line change
@@ -62,7 +62,13 @@ export const SearchedReposTable = ({
event.preventDefault;
}}
>
<Search placeholder="Filter repositories" className="w-full" name="query" onChange={onFilter} />
<Search
placeholder="Filter repositories"
labelText="Filter repositories from the list"
className="w-full"
name="query"
onChange={onFilter}
/>
</form>
</TableHead>
</TableRow>
8 changes: 7 additions & 1 deletion components/Workspaces/SearchedContributorsTable.tsx
Original file line number Diff line number Diff line change
@@ -43,7 +43,13 @@ export const SearchedContributorsTable = ({
event.preventDefault;
}}
>
<Search placeholder="Filter contributors" className="w-full" name="query" onChange={onFilter} />
<Search
placeholder="Filter contributors"
labelText="Filter contributors from the list"
className="w-full"
name="query"
onChange={onFilter}
/>
</form>
</TableHead>
</TableRow>
Original file line number Diff line number Diff line change
@@ -81,6 +81,7 @@ export const SearchByContributorsStep = ({
>
<Search
placeholder="Search contributors"
labelText="Search contributors"
className="w-full"
isLoading={searchIsLoading}
name="query"
Original file line number Diff line number Diff line change
@@ -66,6 +66,7 @@ export const SearchByReposStep = ({
>
<Search
placeholder="Search repositories"
labelText="Search repositories"
className="w-full"
isLoading={searchIsLoading}
name="query"
1 change: 1 addition & 0 deletions components/Workspaces/TrackedRepoWizard/SearchOrgStep.tsx
Original file line number Diff line number Diff line change
@@ -27,6 +27,7 @@ export const SearchOrgStep = ({ onSelectOrg, onSearch, orgs }: SearchOrgStepProp
>
<Search
placeholder="Search your organizations"
labelText="Search your organizations"
className="w-full"
name="query"
onChange={(event) => {
Original file line number Diff line number Diff line change
@@ -62,6 +62,7 @@ const WorkspaceMembersConfig = ({
value={username}
onChange={(value) => handleChange(value)}
placeholder="Enter username"
labelText="Enter full username"
name="search"
className="flex-1 text-base"
/>
8 changes: 5 additions & 3 deletions components/atoms/Search/search.tsx
Original file line number Diff line number Diff line change
@@ -24,6 +24,7 @@ interface SearchProps {
onSelect?: (value: string) => void;
isLoading?: boolean;
isDisabled?: boolean;
labelText: string;
}

const suggestionsStyle = {
@@ -45,6 +46,7 @@ const Search = ({
isLoading,
onSelect,
isDisabled,
labelText,
}: SearchProps): JSX.Element => {
const [cursor, setCursor] = useState(-1);
const [search, setSearch] = useState(value);
@@ -111,19 +113,19 @@ const Search = ({
// using min-w-[15rem] to take into account the width of the X icon when it gets rendered
// to avoid the search input from expanding when someone starts typing.
return (
<div
<label
className={`${
className && className
} flex bg-white py-1 px-3 shadow-input border transition focus-within:ring focus-within:border-orange-500 focus-within:ring-orange-100 rounded-lg ring-light-slate-6 items-center relative min-w-[15rem]`}
>
<span className="sr-only">{labelText}</span>
<FaSearch className="text-light-slate-9" fontSize={16} onClick={handleOnSearch} />
<input
className="w-full pl-2 placeholder:text-sm focus:outline-none placeholder:text-slate-400 disabled:cursor-not-allowed"
placeholder={placeholder}
name={name}
value={search}
type="search"
id={name}
onChange={handleChange}
onKeyUp={(e) => {
if (e.code === "Enter") {
@@ -176,7 +178,7 @@ const Search = ({
)}
</>
)}
</div>
</label>
);
};
export default Search;
7 changes: 5 additions & 2 deletions components/atoms/Select/single-select.tsx
Original file line number Diff line number Diff line change
@@ -15,6 +15,7 @@ interface SingleSelectProps {
position?: "popper" | "item-aligned";
isSearchable?: boolean;
insetLabel?: string;
labelText: string;
}

const SingleSelect = ({
@@ -26,6 +27,7 @@ const SingleSelect = ({
inputPlaceholder,
isSearchable = false,
insetLabel,
labelText,
}: SingleSelectProps) => {
const inputRef = useRef<HTMLInputElement>(null);
const [inputValue, setInputValue] = useState("");
@@ -64,8 +66,9 @@ const SingleSelect = ({
insetLabel && `before:content-[attr(data-inset-label)] before:mr-1 before:font-normal before:text-slate-500`
)}
>
<Tooltip content={current?.label ?? placeholder}>
<div className="flex items-center w-44 ">
<span className="sr-only">{labelText}</span>
<Tooltip content={current?.label ?? placeholder} aria-hidden="true">
<div className="flex items-center w-44" aria-hidden="true">
<p className="flex-grow text-start truncate">{current?.label ?? placeholder}</p>
</div>
</Tooltip>
1 change: 1 addition & 0 deletions components/atoms/Select/single.select.stories.tsx
Original file line number Diff line number Diff line change
@@ -38,6 +38,7 @@ const baseProps: ComponentProps<typeof SingleSelect> = {
// eslint-disable-next-line no-console
console.log(value);
},
labelText: "Accessible label",
};

export const Default: Story = {
Original file line number Diff line number Diff line change
@@ -794,6 +794,7 @@ const ContributorHighlightCard = ({
<Search
isLoading={tagRepoSearchLoading}
placeholder="Repository Full Name (ex: open-sauced/open-sauced)"
labelText="Search repository by full name (ex: open-sauced/open-sauced)"
className="!w-full text-md text-gra"
name={"query"}
suggestions={repoTagSuggestions}
Original file line number Diff line number Diff line change
@@ -815,6 +815,7 @@ const HighlightInputForm = ({ refreshCallback }: HighlightInputFormProps): JSX.E
<Search
isLoading={tagRepoSearchLoading}
placeholder="Repository Full Name (ex: open-sauced/open-sauced)"
labelText="Search repository by full name (ex: open-sauced/open-sauced)"
className="text-sm font-normal !w-full px-2"
name={"query"}
suggestions={repoTagSuggestions}
Original file line number Diff line number Diff line change
@@ -91,6 +91,7 @@ const HubContributorsHeader = ({
<div className="flex w-full">
<Search
placeholder={`Search for contributors to add to your list`}
labelText="Search for contributors to add to your list"
className="!w-full text-sm py-1.5"
name={"contributors"}
onChange={(value) => setContributorSearch(value)}
1 change: 1 addition & 0 deletions components/molecules/TableHeader/table-header.tsx
Original file line number Diff line number Diff line change
@@ -88,6 +88,7 @@ const TableHeader = ({ title, metaInfo, entity, onSearch, layout, onLayoutToggle
{onSearch ? (
<Search
placeholder={`Search ${title}`}
labelText={`Search ${title}`}
className="max-w-full text-sm py-1.5"
name={"query"}
onSearch={onSearch}
Original file line number Diff line number Diff line change
@@ -68,6 +68,7 @@ const TeamMembersConfig = ({
value={email}
onChange={(value) => handleChange(value)}
placeholder="Enter email address"
labelText="Enter email address"
name="search"
className="flex-1 text-base"
/>
Loading
Loading