Skip to content

Uds 2072 - add search landmark to multiple packages for accessibility #1640

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
davidornelas11 wants to merge 4 commits into
base: dev
Choose a base branch
from
+129 −123
Open

Uds 2072 - add search landmark to multiple packages for accessibility #1640

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b08eb08
fix(component-header-footer): add search landmark to header for acces…
davidornelas11 Feb 27, 2026
7847c8c
fix(app-webdir-ui): add search landmark accessibility to search page
davidornelas11 Feb 27, 2026
08d8f48
fix(app-degree-pages): add search landmark accessibility to listing page
davidornelas11 Feb 27, 2026
27b3e15
chore(component-header-footer): linting
davidornelas11 Mar 10, 2026
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
80 changes: 41 additions & 39 deletions packages/app-degree-pages/src/components/ListingPage/components/SearchBar/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,49 +54,51 @@ const SearchBar = ({ value, onChange, onSearch }) => {
data-searching={searching}
data-testid="search-bar"
>
<form
data-testid="search-bar-form"
className="uds-form p-0 col-md-6 col-sm-12"
onSubmit={e => {
e.preventDefault();
onSearch();
setSearching(true);
timeoutId = setTimeout(() => setSearching(false), 500);
clearTimeout(timeoutId);
}}
>
<div className="form-group mb-0 me-2">
<label htmlFor="search-field">Search</label>
<search>
<form
data-testid="search-bar-form"
className="uds-form p-0 col-md-6 col-sm-12"
onSubmit={e => {
e.preventDefault();
onSearch();
setSearching(true);
timeoutId = setTimeout(() => setSearching(false), 500);
clearTimeout(timeoutId);
}}
>
<div className="form-group mb-0 me-2">
<label htmlFor="search-field">Search</label>

<div className="d-flex row align-items-baseline g-3">
<div className="col-sm-12 col-md-6 align-self-end">
<input
data-testid="search-field"
id="search-field"
value={value}
type="text"
className="form-control"
placeholder="Search degree programs"
onChange={e => {
onChange(e.target.value);
trackSearchEvent(e.target.value);
}}
/>
</div>
<div className="d-flex row align-items-baseline g-3">
<div className="col-sm-12 col-md-6 align-self-end">
<input
data-testid="search-field"
id="search-field"
value={value}
type="text"
className="form-control"
placeholder="Search degree programs"
onChange={e => {
onChange(e.target.value);
trackSearchEvent(e.target.value);
}}
/>
</div>

<div className="col-sm-12 col-md-6 mt-2 mt-sm-0">
<Button
data-testid="search-button"
color="maroon"
label="Search now"
ariaLabel="Search now"
size="default"
onClick={onSearch}
/>
<div className="col-sm-12 col-md-6 mt-2 mt-sm-0">
<Button
data-testid="search-button"
color="maroon"
label="Search now"
ariaLabel="Search now"
size="default"
onClick={onSearch}
/>
</div>
</div>
</div>
</div>
</form>
</form>
</search>
</Section>
);
};
Expand Down
42 changes: 22 additions & 20 deletions packages/app-webdir-ui/src/SearchPage/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,26 +131,28 @@ function SearchPage({
<span className="highlight-gold">Search</span>
</h1>
<div className="options-area">
<form className="uds-form">
<div className="form-group">
<input
type="text"
className="form-control"
id="search-input"
placeholder="Search asu.edu"
value={searchValue}
onChange={e => setSearchValue(e.target.value)}
onKeyDown={inputKeyPress}
ref={inputRef}
/>
<Button
color="maroon"
icon={["fas", "search"]}
label="Search"
onClick={() => doSearch()}
/>
</div>
</form>
<search>
<form className="uds-form">
<div className="form-group">
<input
type="text"
className="form-control"
id="search-input"
placeholder="Search asu.edu"
value={searchValue}
onChange={e => setSearchValue(e.target.value)}
onKeyDown={inputKeyPress}
ref={inputRef}
/>
<Button
color="maroon"
icon={["fas", "search"]}
label="Search"
onClick={() => doSearch()}
/>
</div>
</form>
</search>
<div className="profile-options">
<div className="desktop-button">
<Button
Expand Down
130 changes: 66 additions & 64 deletions packages/component-header-footer/src/header/components/UniversalNavbar/Search/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,70 +79,72 @@ const Search = () => {
});
};
return (
<SearchWrapper
// @ts-ignore
breakpoint={breakpoint}
action={searchUrl}
onSubmit={handleSearch}
method="get"
name="gs"
className={open ? CLASS_NAMES.OPEN_SEARCH : ""}
data-testid="universal-nav-search-form"
role="search"
>
{!isMobile ? (
<>
{!open && (
<button
type="button"
aria-label="Search asu.edu"
onClick={handleChangeVisibility}
className={CLASS_NAMES.SEARCH_BUTTON}
data-testid="search-button"
>
<span>Search</span>
<FontAwesomeIcon icon={faSearch} />
</button>
)}
{open && (
<>
<SearchInput
inputRef={inputRef}
hasInputValue={hasInputValue}
setHasInputValue={setHasInputValue}
isMobile={isMobile}
onBlur={() => {
if (!hasInputValue) setOpen(false);
}}
/>
<Button
color="dark"
text="Search"
as="button"
classes={CLASS_NAMES.SUBMIT_BUTTON}
/>
</>
)}
</>
) : (
<label>
<SearchInput
inputRef={inputRef}
hasInputValue={hasInputValue}
setHasInputValue={setHasInputValue}
isMobile={isMobile}
/>
</label>
)}
<input name="url_host" value={site} type="hidden" />
<input name="site" value="default_collection" type="hidden" />
<input name="sort" value="date:D:L:d1" type="hidden" />
<input name="output" value="xml_no_dtd" type="hidden" />
<input name="ie" value="UTF-8" type="hidden" />
<input name="oe" value="UTF-8" type="hidden" />
<input name="client" value="asu_frontend" type="hidden" />
<input name="proxystylesheet" value="asu_frontend" type="hidden" />
</SearchWrapper>
<search>
<SearchWrapper
// @ts-ignore
breakpoint={breakpoint}
action={searchUrl}
onSubmit={handleSearch}
method="get"
name="gs"
className={open ? CLASS_NAMES.OPEN_SEARCH : ""}
data-testid="universal-nav-search-form"
role="search"
>
{!isMobile ? (
<>
{!open && (
<button
type="button"
aria-label="Search asu.edu"
onClick={handleChangeVisibility}
className={CLASS_NAMES.SEARCH_BUTTON}
data-testid="search-button"
>
<span>Search</span>
<FontAwesomeIcon icon={faSearch} />
</button>
)}
{open && (
<>
<SearchInput
inputRef={inputRef}
hasInputValue={hasInputValue}
setHasInputValue={setHasInputValue}
isMobile={isMobile}
onBlur={() => {
if (!hasInputValue) setOpen(false);
}}
/>
<Button
color="dark"
text="Search"
as="button"
classes={CLASS_NAMES.SUBMIT_BUTTON}
/>
</>
)}
</>
) : (
<label>
<SearchInput
inputRef={inputRef}
hasInputValue={hasInputValue}
setHasInputValue={setHasInputValue}
isMobile={isMobile}
/>
</label>
)}
<input name="url_host" value={site} type="hidden" />
<input name="site" value="default_collection" type="hidden" />
<input name="sort" value="date:D:L:d1" type="hidden" />
<input name="output" value="xml_no_dtd" type="hidden" />
<input name="ie" value="UTF-8" type="hidden" />
<input name="oe" value="UTF-8" type="hidden" />
<input name="client" value="asu_frontend" type="hidden" />
<input name="proxystylesheet" value="asu_frontend" type="hidden" />
</SearchWrapper>
</search>
);
};

Expand Down