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.

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

Accessibility Updates #4683

Merged
merged 12 commits into from
Oct 31, 2024
Merged

Accessibility Updates #4683

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
eca02a6
Conversion of ids to classes where those ids can be duplicated (to pr…
nick-next Oct 19, 2024
8400815
Added comments and copyright to a file that was missing them.
nick-next Oct 19, 2024
052ba84
There is functionality associated with an id in the search box (which…
nick-next Oct 19, 2024
eaa782d
The MediaText component now has an alt prop, with either the alt or t…
nick-next Oct 19, 2024
23e51b8
Ensures that the aria-labelledby attribute is correctly linking the b…
jenibelle08 Oct 17, 2024
f69bc68
Adds aria-label for search input, as there is no visible label
jenibelle08 Oct 17, 2024
9ebf939
Improved keyboard tab handling on the carousel.
nick-next Oct 20, 2024
31dabd3
Adjusting the header hierarchy in the main navigation.
nick-next Oct 20, 2024
c8a1dfe
Change height of buttons so when they are focused they dont use the w…
pablonoel Oct 20, 2024
a1a65f3
CSS cleanup
nick-next Oct 22, 2024
cfe1148
Resolution to Codacy analysis findings.
nick-next Oct 25, 2024
c613760
Removed the id distinction between the menu and desktop versions of t…
nick-next Oct 31, 2024
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
4 changes: 2 additions & 2 deletions static/css/base.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ $headings-font-weight: 600;

/*
If the grid-breakpoints change, the TypeScript equivalent should be updated:
`static/js/apps/base/utilities/utilities.ts`, `export const BREAKPOINTS`
`static/js/shared/hooks/breakpoints.tsx`, `export const BREAKPOINTS`
*/
$grid-breakpoints: (
xs: 0,
Expand Down Expand Up @@ -160,7 +160,7 @@ $headings-font-family: $font-family-sans-serif;
background: var(--gm-3-white);
}

#main-header #main-header-logo {
#main-header .main-header-logo {
display: flex;
align-items: center;
img {
Expand Down
49 changes: 26 additions & 23 deletions static/css/core.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -151,17 +151,16 @@ section {

li {
display: flex;
align-items: stretch;
align-items: center;
margin: 0;
padding: 0;

.menu-main-button {
border: 0;
padding: 0;
padding: 8px 0;
margin: 0;
display: flex;
align-items: center;
height: 100%;
background-color: transparent;
.menu-main-label {
font-size: 0.875rem;
Expand All @@ -185,7 +184,7 @@ section {
.menu-main-link {
display: flex;
align-items: center;
height: 100%;
padding: 8px 0;
color: #474747;
transition: color 0.3s ease-in-out;
font-size: 0.875rem;
Expand Down Expand Up @@ -244,15 +243,17 @@ section {
font-size: 1.4rem;
font-weight: 100;
}
h4 {
font-family: $font-family-google-title;
font-size: 1rem;
text-transform: uppercase;
color: #5e5e5e;
font-weight: 300;
margin: 0 0 32px 0;
.group {
h3 {
font-family: $font-family-google-title;
font-size: 1rem;
text-transform: uppercase;
color: #5e5e5e;
font-weight: 300;
margin: 0 0 32px 0;
}
}
h5 {
h4 {
font-family: $font-family-google-title;
font-size: 1rem;
font-weight: 500;
Expand Down Expand Up @@ -504,14 +505,16 @@ section {
font-size: 1.4rem;
font-weight: 100;
}
h4 {
font-family: $font-family-google-title;
font-size: 1rem;
text-transform: uppercase;
color: #5e5e5e;
font-weight: 300;
.group {
h3 {
font-family: $font-family-google-title;
font-size: 1rem;
text-transform: uppercase;
color: #5e5e5e;
font-weight: 300;
}
}
h5 {
h4 {
font-family: $font-family-google-title;
font-size: 1rem;
font-weight: 500;
Expand Down Expand Up @@ -603,8 +606,8 @@ section {

.search-input-text {
display: block;
padding: 0px;
margin: 0px;
padding: 0;
margin: 0;
width: 150px;
flex-grow: 10;
height: 38px;
Expand Down Expand Up @@ -657,7 +660,7 @@ section {
.search-input-result-section {
display: flex;
flex-direction: column;
padding: 10px 0px;
padding: 10px 0;

.search-input-result {
display: flex;
Expand All @@ -682,7 +685,7 @@ section {
}

.result-divider {
margin: 0px;
margin: 0;
}
}

Expand Down
7 changes: 5 additions & 2 deletions static/js/apps/base/components/header_bar/header_bar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@

import React, { ReactElement } from "react";

import { useBreakpoints } from "../../../../shared/hooks/breakpoints";
import { HeaderMenu, Labels, Routes } from "../../../../shared/types/base";
import HeaderBarSearch from "./header_bar_search";
import HeaderLogo from "./header_logo";
Expand Down Expand Up @@ -52,6 +53,8 @@ const HeaderBar = ({
labels,
routes,
}: HeaderBarProps): ReactElement => {
const { up, down } = useBreakpoints();

return (
<div id="main-header-container">
<nav id="main-nav">
Expand All @@ -63,7 +66,7 @@ const HeaderBar = ({
labels={labels}
routes={routes}
/>
{showHeaderSearchBar && <HeaderBarSearch />}
{showHeaderSearchBar && up("lg") && <HeaderBarSearch />}
<MenuDesktop menu={menu} labels={labels} routes={routes} />
</div>
<div className="navbar-menu-mobile">
Expand All @@ -74,7 +77,7 @@ const HeaderBar = ({
labels={labels}
routes={routes}
/>
{showHeaderSearchBar && <HeaderBarSearch />}
{showHeaderSearchBar && down("md") && <HeaderBarSearch />}
<MenuMobile menu={menu} labels={labels} routes={routes} />
</div>
</nav>
Expand Down
10 changes: 8 additions & 2 deletions static/js/apps/base/components/header_bar/header_bar_search.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,11 +27,17 @@ import {
triggerGAEvent,
} from "../../../../shared/ga_events";

const HeaderBarSearch = (): ReactElement => {
interface HeaderBarSearchProps {
inputId?: string;
}

const HeaderBarSearch = ({
inputId = "query-search-input",
}: HeaderBarSearchProps): ReactElement => {
return (
<NlSearchBar
variant="header-inline"
inputId="query-search-input"
inputId={inputId}
onSearch={(q): void => {
triggerGAEvent(GA_EVENT_NL_SEARCH, {
[GA_PARAM_QUERY]: q,
Expand Down
2 changes: 1 addition & 1 deletion static/js/apps/base/components/header_bar/header_logo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ const HeaderLogo = ({
return (
<div className="navbar-brand">
{logoPath && (
<div id="main-header-logo">
<div className="main-header-logo">
<a
href={routes["static.homepage"]}
aria-label={labels["Back to homepage"]}
Expand Down
123 changes: 66 additions & 57 deletions static/js/apps/base/components/header_bar/menu_desktop.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,68 +93,77 @@ const MenuDesktop = ({
return (
<div className="header-menu" ref={menuContainerRef}>
<ul className="header-menu-list">
{menu.map((menuItem, index) => (
<li key={menuItem.label}>
{menuItem.url ? (
<a
className="menu-main-link"
href={resolveHref(menuItem.url, routes)}
onClick={() => {
triggerGAEvent(GA_EVENT_HEADER_CLICK, {
[GA_PARAM_ID]: `desktop main ${menuItem.id}`,
[GA_PARAM_URL]: menuItem.url,
});
return true;
}}
>
{labels[menuItem.label]}
</a>
) : (
<>
<button
className="menu-main-button"
onClick={(): void => {
{menu.map((menuItem, index) => {
const buttonId = slugify(`nav-${menuItem.label}-button`);
const dropdownId = slugify(`nav-${menuItem.label}-dropdown`);

return (
<li key={menuItem.label}>
{menuItem.url ? (
<a
className="menu-main-link"
href={resolveHref(menuItem.url, routes)}
onClick={() => {
triggerGAEvent(GA_EVENT_HEADER_CLICK, {
[GA_PARAM_ID]: `desktop ${menuItem.id}`,
[GA_PARAM_ID]: `desktop main ${menuItem.id}`,
[GA_PARAM_URL]: menuItem.url,
});
return !menuItem.url && toggleMenu(index);
}}
onTouchEnd={(e): void => {
if (!menuItem.url) itemMenuTouch(e, index);
return true;
}}
>
<span className="menu-main-label">
{labels[menuItem.label]}
</span>
<span
className={`material-icons-outlined menu-arrow-icon ${
openMenu === index ? "open" : ""
}`}
{labels[menuItem.label]}
</a>
) : (
<>
<button
id={buttonId}
className="menu-main-button"
onClick={(): void => {
triggerGAEvent(GA_EVENT_HEADER_CLICK, {
[GA_PARAM_ID]: `desktop ${menuItem.id}`,
});
return !menuItem.url && toggleMenu(index);
}}
onTouchEnd={(e): void => {
if (!menuItem.url) itemMenuTouch(e, index);
}}
aria-expanded={openMenu === index}
aria-controls={dropdownId}
>
keyboard_arrow_down
</span>
</button>
<div
ref={(el: HTMLDivElement | null): void => {
submenuRefs.current[index] = el;
}}
className="rich-menu-container"
aria-labelledby={slugify(`nav-${menuItem.label}-dropdown`)}
style={{
maxHeight: openMenu === index ? `${panelHeight}px` : 0,
}}
>
<MenuDesktopRichMenu
menuItem={menuItem}
labels={labels}
routes={routes}
open={openMenu === index}
/>
</div>
</>
)}
</li>
))}
<span className="menu-main-label">
{labels[menuItem.label]}
</span>
<span
className={`material-icons-outlined menu-arrow-icon ${
openMenu === index ? "open" : ""
}`}
>
keyboard_arrow_down
</span>
</button>
<div
ref={(el: HTMLDivElement | null): void => {
submenuRefs.current[index] = el;
}}
id={dropdownId}
className="rich-menu-container"
aria-labelledby={buttonId}
style={{
maxHeight: openMenu === index ? `${panelHeight}px` : 0,
}}
>
<MenuDesktopRichMenu
menuItem={menuItem}
labels={labels}
routes={routes}
open={openMenu === index}
/>
</div>
</>
)}
</li>
);
})}
</ul>
<div className={"panel"} style={{ height: panelHeight }} />
</div>
Expand Down
8 changes: 4 additions & 4 deletions static/js/apps/base/components/header_bar/menu_rich_section_group.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,15 +49,15 @@ const MenuRichSectionGroup = ({

return (
<div className={"group"}>
{menuGroup.title && <h4>{menuGroup.title}</h4>}
{menuGroup.title && <h3>{menuGroup.title}</h3>}
{menuGroup.items.map((item, index) => (
<div key={index} className={"item"}>
{item.title && item.url ? (
<h5>
<h4>
<a
href={resolveHref(item.url, routes)}
className={"item-link"}
onClick={() => {
onClick={(): boolean => {
triggerGAEvent(GA_EVENT_HEADER_CLICK, {
[GA_PARAM_ID]: `${type} submenu ${menuGroup.id}-${index}`,
[GA_PARAM_URL]: item.url,
Expand All @@ -74,7 +74,7 @@ const MenuRichSectionGroup = ({
)}
{item.title}
</a>
</h5>
</h4>
) : (
<h5>{item.title}</h5>
)}
Expand Down
17 changes: 0 additions & 17 deletions static/js/apps/base/utilities/utilities.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,20 +139,3 @@ export const extractLabels = (elementId = "metadata-labels"): Labels => {

return labels;
};

/*
A breakpoints constant object for responsiveness, for access on the TypeScript side.
These are the default breakpoints for a page that does not have custom breakpoints and are
applied in: `static/css/base.scss`

If a page does not use default breakpoints and those breakpoints are required on
the TypeScript side, a separate breakpoint object should be created.
*/
export const BREAKPOINTS = {
xs: 0,
sm: 576,
md: 768,
lg: 1068,
xl: 1350,
xxl: 1400,
};
2 changes: 1 addition & 1 deletion static/js/apps/homepage/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
*/

/**
* Entry point for Version 2 of the home page.
* Entry point for the home page.
*/

import React from "react";
Expand Down
1 change: 1 addition & 0 deletions static/js/build/one_data_commons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ const OneDataCommons = (): ReactElement => {
return [
<MediaText
key={0}
alt={"One Data Commons Website Screenshot"}
mediaType="image"
mediaSource="images/content/build/ONEData.png"
>
Expand Down
Loading
Loading