Skip to content

fix(search): add accessible attributes to search input and button #8082

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.

Sign up for GitHub

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

Open
tejaswiverma121-byte wants to merge 1 commit into
base: master
Choose a base branch
from
Open

fix(search): add accessible attributes to search input and button #8082

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 13 additions & 2 deletions src/reusecore/Search/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,15 @@ const SearchBox = ({
paginate,
currentPage,
classnames,
focusSearch
focusSearch,
ariaLabel,
"aria-label": aria_label,
id = "search",
name = "search",
autoComplete = "off",
}) => {
const accessibleLabel = ariaLabel || aria_label || "Search";

const handleChange = (e) => {
if (hideFilter != undefined && setHideFilter != undefined) {
if (e.target.value.length > 0) {
Expand All @@ -36,15 +43,19 @@ const SearchBox = ({
<SearchWrapper>
<div className={`search-box ${classnames ? classnames.join(" ") : ""}`}>
<DebounceInput
id={id}
name={name}
type="text"
value={searchQuery}
minLength={1}
debounceTimeout={500}
onChange={(e) => handleChange(e)}
placeholder="Search..."
autoFocus={focusSearch}
aria-label={accessibleLabel}
autoComplete={autoComplete}
/>
<Button aria-label="search icon">
<Button type="button" aria-label="Search">
<FaSearch />
</Button>
</div>
Expand Down
34 changes: 25 additions & 9 deletions src/sections/Blog/Blog-grid/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,24 +49,40 @@ const BlogGrid = ({
setListView={setListView}
setGridView={setGridView}
/>
<SearchBox searchQuery={searchQuery} searchData={searchData} paginate={paginate} currentPage={currentPage} focusSearch={true}/>
<SearchBox
searchQuery={searchQuery}
searchData={searchData}
paginate={paginate}
currentPage={currentPage}
focusSearch={true}
ariaLabel="Search blog posts"
id="blog-search"
name="blog-search"
/>
</div>
<div className="blog-grid-wrapper">
<Row style={{
flexWrap: "wrap"
}}
<Row
style={{
flexWrap: "wrap",
}}
>
{queryResults.length < 1 && (
<Col $xs={12} $sm={6}>
No blog post that matches the title "{searchQuery}" found.
</Col>
)}

{searchedPosts.length > 0 && searchedPosts.map(({ id, frontmatter, fields }, index) => (
<Col key={id} $xs={12} $sm={6}>
<Card frontmatter={frontmatter} fields={fields} loading={index === 0 ? "eager" : "lazy"} fetchpriority={index === 0 ? "high" : "auto"} />
</Col>
))}
{searchedPosts.length > 0 &&
searchedPosts.map(({ id, frontmatter, fields }, index) => (
<Col key={id} $xs={12} $sm={6}>
<Card
frontmatter={frontmatter}
fields={fields}
loading={index === 0 ? "eager" : "lazy"}
fetchpriority={index === 0 ? "high" : "auto"}
/>
</Col>
))}
<Col>
{searchedPosts.length > 0 && (
<Pagination
Expand Down
46 changes: 34 additions & 12 deletions src/sections/Blog/Blog-list/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,9 @@ const BlogList = ({
const header = tag
? `${totalCount} post${totalCount === 1 ? "" : "s"} tagged with "${tag}"`
: category
? `${totalCount} post${totalCount === 1 ? "" : "s"
} categorized as "${category}"`
? `${totalCount} post${
totalCount === 1 ? "" : "s"
} categorized as "${category}"`
: "Blog";

// Change page
Expand All @@ -47,9 +48,10 @@ const BlogList = ({
/>
<div className="blog-page-wrapper">
<Container>
<Row style={{
flexWrap: "wrap"
}}
<Row
style={{
flexWrap: "wrap",
}}
>
<Col $xs={12} $lg={8}>
{!pageContext.tag && !pageContext.category ? (
Expand All @@ -62,23 +64,43 @@ const BlogList = ({
<SearchBox
searchQuery={searchQuery}
searchData={searchData}
paginate={paginate} currentPage={currentPage}
paginate={paginate}
currentPage={currentPage}
focusSearch={true}
ariaLabel="Search blog posts"
id="blog-search"
name="blog-search"
/>
</div>
) : (
<SearchBox searchQuery={searchQuery} searchData={searchData} paginate={paginate} currentPage={currentPage} focusSearch={true} />
<SearchBox
searchQuery={searchQuery}
searchData={searchData}
paginate={paginate}
currentPage={currentPage}
focusSearch={true}
ariaLabel="Search blog posts"
id="blog-search"
name="blog-search"
/>
)}
<div className="blog-list-wrapper">
<Row style={{
flexWrap: "wrap"
}}
className="blog-lists"
<Row
style={{
flexWrap: "wrap",
}}
className="blog-lists"
>
{searchedPosts.length > 0 &&
searchedPosts?.map(({ id, frontmatter, fields }, index) => (
<Col $xs={12} key={id}>
<Card frontmatter={frontmatter} fields={fields} loading={index === 0 ? "eager" : "lazy"} fetchpriority={index === 0 ? "high" : "auto"} listView={true} />
<Card
frontmatter={frontmatter}
fields={fields}
loading={index === 0 ? "eager" : "lazy"}
fetchpriority={index === 0 ? "high" : "auto"}
listView={true}
/>
</Col>
))}
<Col>
Expand Down
3 changes: 3 additions & 0 deletions src/sections/Company/News-grid/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,6 +117,9 @@ const NewsGrid = ({ data }) => {
searchQuery={searchQuery}
searchData={searchData}
focusSearch={true}
ariaLabel="Search news"
id="news-search"
name="news-search"
/>
</div>
</div>
Expand Down
3 changes: 3 additions & 0 deletions src/sections/Meshery/Meshery-integrations/IntegrationsGrid.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -230,6 +230,9 @@ const IntegrationsGrid = ({ category, count }) => {
setHideFilter={setHideFilter}
classnames={["integration-search"]}
focusSearch={false}
ariaLabel="Search integrations"
id="integration-search"
name="integration-search"
/>

<section style={{ margin: "0 2.6rem" }}>
Expand Down
8 changes: 7 additions & 1 deletion src/sections/Projects/Sistent/components/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,13 @@ const SistentComponents = ({ data }) => {
</div>
<div className="main-content">
<div className="search-container">
<SearchBox searchQuery={searchQuery} searchData={searchData} />
<SearchBox
searchQuery={searchQuery}
searchData={searchData}
ariaLabel="Search components"
id="component-search"
name="component-search"
/>
</div>
<div className="product_cards">
<div className="cards">
Expand Down
20 changes: 15 additions & 5 deletions src/sections/Resources/Resources-grid/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ const ResourceGrid = (props) => {
left: 100,
behavior: "smooth",
});

};

return (
Expand All @@ -37,14 +36,25 @@ const ResourceGrid = (props) => {
paginate={paginate}
currentPage={props.currentPage}
focusSearch={true}
ariaLabel="Search resources"
id="resource-search"
name="resource-search"
/>
</div>
</div>
<Row style={{
flexWrap: "wrap"
}}
<Row
style={{
flexWrap: "wrap",
}}
>
{props.data.length < 1 && <EmptyResources errorMessage={"No matching resources"} errorSubtitle={"Try removing one or more filters to broaden your results."} />}
{props.data.length < 1 && (
<EmptyResources
errorMessage={"No matching resources"}
errorSubtitle={
"Try removing one or more filters to broaden your results."
}
/>
)}

{searchedResource.map(({ id, frontmatter, fields }) => (
<Col key={id} $xs={12} $sm={6} $xl={4}>
Expand Down
Loading