diff --git a/src/reusecore/Search/index.js b/src/reusecore/Search/index.js index 85ed90bcda6825..95763abdf15d1b 100644 --- a/src/reusecore/Search/index.js +++ b/src/reusecore/Search/index.js @@ -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) { @@ -36,6 +43,8 @@ const SearchBox = ({
handleChange(e)} placeholder="Search..." autoFocus={focusSearch} + aria-label={accessibleLabel} + autoComplete={autoComplete} /> -
diff --git a/src/sections/Blog/Blog-grid/index.js b/src/sections/Blog/Blog-grid/index.js index 78f6cc2a9251cf..775bbc36a2ac4e 100644 --- a/src/sections/Blog/Blog-grid/index.js +++ b/src/sections/Blog/Blog-grid/index.js @@ -49,12 +49,22 @@ const BlogGrid = ({ setListView={setListView} setGridView={setGridView} /> - +
- {queryResults.length < 1 && ( @@ -62,11 +72,17 @@ const BlogGrid = ({ )} - {searchedPosts.length > 0 && searchedPosts.map(({ id, frontmatter, fields }, index) => ( - - - - ))} + {searchedPosts.length > 0 && + searchedPosts.map(({ id, frontmatter, fields }, index) => ( + + + + ))} {searchedPosts.length > 0 && (
- {!pageContext.tag && !pageContext.category ? ( @@ -62,23 +64,43 @@ const BlogList = ({
) : ( - + )}
- {searchedPosts.length > 0 && searchedPosts?.map(({ id, frontmatter, fields }, index) => ( - + ))} diff --git a/src/sections/Company/News-grid/index.js b/src/sections/Company/News-grid/index.js index 00bb54b885624f..c161064de041b4 100644 --- a/src/sections/Company/News-grid/index.js +++ b/src/sections/Company/News-grid/index.js @@ -117,6 +117,9 @@ const NewsGrid = ({ data }) => { searchQuery={searchQuery} searchData={searchData} focusSearch={true} + ariaLabel="Search news" + id="news-search" + name="news-search" />
diff --git a/src/sections/Meshery/Meshery-integrations/IntegrationsGrid.js b/src/sections/Meshery/Meshery-integrations/IntegrationsGrid.js index 1f41cbe5046f60..5ffd7605c00903 100644 --- a/src/sections/Meshery/Meshery-integrations/IntegrationsGrid.js +++ b/src/sections/Meshery/Meshery-integrations/IntegrationsGrid.js @@ -230,6 +230,9 @@ const IntegrationsGrid = ({ category, count }) => { setHideFilter={setHideFilter} classnames={["integration-search"]} focusSearch={false} + ariaLabel="Search integrations" + id="integration-search" + name="integration-search" />
diff --git a/src/sections/Projects/Sistent/components/index.js b/src/sections/Projects/Sistent/components/index.js index f4845b78142df0..be10cdc91a3f72 100644 --- a/src/sections/Projects/Sistent/components/index.js +++ b/src/sections/Projects/Sistent/components/index.js @@ -53,7 +53,13 @@ const SistentComponents = ({ data }) => {
- +
diff --git a/src/sections/Resources/Resources-grid/index.js b/src/sections/Resources/Resources-grid/index.js index 8958290507c5cd..f0aeb189448058 100644 --- a/src/sections/Resources/Resources-grid/index.js +++ b/src/sections/Resources/Resources-grid/index.js @@ -23,7 +23,6 @@ const ResourceGrid = (props) => { left: 100, behavior: "smooth", }); - }; return ( @@ -37,14 +36,25 @@ const ResourceGrid = (props) => { paginate={paginate} currentPage={props.currentPage} focusSearch={true} + ariaLabel="Search resources" + id="resource-search" + name="resource-search" />
- - {props.data.length < 1 && } + {props.data.length < 1 && ( + + )} {searchedResource.map(({ id, frontmatter, fields }) => (