Skip to content

Commit 82004ac

Browse files
patclarknvidiapatclarknvidia
authored
UI updates for accessibility and compliance with WCAG 2.1 (#73)
* OSMO-5625: OSMO WCAG 2.1 compliance * Fix TopMenu on 400% zoom; fix prettier * Polish drop-down arrow pos * Fix top menu font size * Create Collection as Icon button... always there, but aria-disabled if needed * Move Layout to top-level and move tutorials to their own route * Fix double-header on workflows * Fix responsiveness of gauges on pool details * Add ariaLabel to SlideOut * Fix outline for checkboxes * Add missing role=list for gauges * Disable task filters when not in list view * Switch to hamburger menu for all screen sizes. Show h1 title on all views. * Combine top menu and profile menu * Move platforms to the top of pool details * Make header and body bg slightly different * Polish columns on single wf view * Fix for single task view (don't update URL, aria-disable buttons * Polish * Pin menu * OSMO-5964: Animate the opening/closing of menu/slideout * OSMO-5980: When RHS is pinned the body gets horizontal scroll instead of just the table * Spinners * useMinScreenWidth * Fix warning about keys * OSMO-5981: Screen Reader: Table announces "No Results Found" as it is loading, and the spinner never says "Loading" * Fix Single Task View * Fix cligin graph view * PR feedback * Mpore PR feedback * Tie @tanstack/react-query to 4.32.x
1 parent 237e06e commit 82004ac

File tree

128 files changed

+3034
-2190
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

128 files changed

+3034
-2190
lines changed

‎ui/.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,3 +40,6 @@ yarn-error.log*
4040

4141
# typescript
4242
*.tsbuildinfo
43+
*:Zone.Identifier
44+
*.diff
45+

‎ui/.prettierrc.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
"printWidth": 120,
77
"useTabs": false,
88
"bracketSpacing": true,
9-
"jsxBracketSameLine": false,
9+
"bracketSameLine": false,
1010
"arrowParens": "always",
1111
"endOfLine": "lf",
1212
"singleAttributePerLine": true

‎ui/package-lock.json‎

Lines changed: 8 additions & 8 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎ui/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
"@swc/helpers": "^0.5.1",
2020
"@t3-oss/env-nextjs": "^0.7.0",
2121
"@tailwindcss/postcss": "^4.1.4",
22-
"@tanstack/react-query": "^4.32.6",
22+
"@tanstack/react-query": "4.32.x",
2323
"@tanstack/react-table": "^8.10.7",
2424
"@tanstack/table-core": "8.10.7",
2525
"@tisoap/react-flow-smart-edge": "^3.0.0",

‎ui/src/app/auth/success/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ export default function LoginSuccessCallback() {
3131

3232
if (!idToken || !refreshToken || !redirectTo) {
3333
return (
34-
<div className="flex h-screen w-screen items-center justify-center">
34+
<div className="flex h-full w-full items-center justify-center">
3535
<PageError
3636
title="Auth callback failed"
3737
errorMessage="Missing id_token, refresh_token, or redirect_to search params"

‎ui/src/app/datasets/[bucket]/[name]/components/CollectionDetails.tsx‎

Lines changed: 88 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,8 @@
1313
//limitations under the License.
1414

1515
//SPDX-License-Identifier: Apache-2.0
16-
import { useEffect, useRef, useState } from "react";
1716

1817
import Link from "next/link";
19-
import { useWindowSize } from "usehooks-ts";
2018

2119
import { OutlinedIcon } from "~/components/Icon";
2220
import { Colors, Tag } from "~/components/Tag";
@@ -31,105 +29,100 @@ interface DatasetDetailsProps {
3129

3230
export const CollectionDetails = ({ dataset }: DatasetDetailsProps) => {
3331
const toolParamUpdater = useToolParamUpdater();
34-
const containerRef = useRef<HTMLDivElement>(null);
35-
const [height, setHeight] = useState(0);
36-
const windowSize = useWindowSize();
37-
38-
useEffect(() => {
39-
if (containerRef?.current) {
40-
setHeight(windowSize.height - containerRef.current.getBoundingClientRect().top - 12);
41-
}
42-
}, [windowSize.height]);
4332

4433
return (
45-
<div ref={containerRef}>
46-
<div
47-
className="h-full flex flex-col overflow-y-auto w-[33vw] max-w-150 body-component"
48-
style={{
49-
height: `${height}px`,
50-
}}
34+
<div className="h-full flex flex-col overflow-y-auto w-[33vw] max-w-150 body-component shadow-lg shadow-black/50 z-10">
35+
<section
36+
aria-labelledby="details-title"
37+
className="h-full w-full flex flex-col dag-details-body"
5138
>
52-
<div className="h-full w-full flex flex-col dag-details-body">
53-
<div className="text-center p-3 font-semibold brand-header">{dataset.name}</div>
54-
<div className="h-full">
55-
<dl className="p-3">
56-
<dt>ID</dt>
57-
<dd>{dataset.id}</dd>
58-
<dt>Bucket</dt>
59-
<dd>
60-
<Link
61-
key={dataset.bucket}
62-
href={`/datasets/${dataset.bucket}`}
63-
className="tag-container"
64-
>
65-
<Tag color={Colors.platform}>{dataset.bucket}</Tag>
66-
</Link>
67-
</dd>
68-
{dataset.created_by && (
69-
<>
70-
<dt>Created By</dt>
71-
<dd>{dataset.created_by}</dd>
72-
</>
39+
<h2
40+
id="details-title"
41+
className="text-center p-global font-semibold brand-header"
42+
>
43+
{dataset.name}
44+
</h2>
45+
<div className="h-full">
46+
<dl
47+
className="p-global"
48+
aria-labelledby="details-title"
49+
>
50+
<dt>ID</dt>
51+
<dd>{dataset.id}</dd>
52+
<dt>Bucket</dt>
53+
<dd>
54+
<Link
55+
key={dataset.bucket}
56+
href={`/datasets/${dataset.bucket}`}
57+
className="tag-container"
58+
>
59+
<Tag color={Colors.platform}>{dataset.bucket}</Tag>
60+
</Link>
61+
</dd>
62+
{dataset.created_by && (
63+
<>
64+
<dt>Created By</dt>
65+
<dd>{dataset.created_by}</dd>
66+
</>
67+
)}
68+
<dt>Created Date</dt>
69+
<dd>{convertToReadableTimezone(dataset.created_date)}</dd>
70+
<dt>Labels</dt>
71+
<dd>
72+
{Object.entries(dataset.labels).length > 0 ? (
73+
<div className="flex flex-wrap gap-1">
74+
{Object.entries(dataset.labels).map(([key, value], index) => (
75+
<Tag
76+
key={index}
77+
color={Colors.tag}
78+
>
79+
{key}: {String(value)}
80+
</Tag>
81+
))}
82+
</div>
83+
) : (
84+
<p>None</p>
7385
)}
74-
<dt>Created Date</dt>
75-
<dd>{convertToReadableTimezone(dataset.created_date)}</dd>
76-
<dt>Labels</dt>
77-
<dd>
78-
{Object.entries(dataset.labels).length > 0 ? (
79-
<div className="flex flex-wrap gap-1">
80-
{Object.entries(dataset.labels).map(([key, value], index) => (
81-
<Tag
82-
key={index}
83-
color={Colors.tag}
84-
>
85-
{key}: {String(value)}
86-
</Tag>
87-
))}
88-
</div>
89-
) : (
90-
<p>None</p>
91-
)}
92-
</dd>
93-
</dl>
94-
</div>
95-
<div
96-
className={`dag-actions body-footer w-full`}
97-
role="list"
98-
aria-label="Collection Actions"
86+
</dd>
87+
</dl>
88+
</div>
89+
<div
90+
className={`dag-actions body-footer w-full`}
91+
role="list"
92+
aria-label="Collection Actions"
93+
>
94+
<button
95+
className="btn btn-action whitespace-nowrap"
96+
role="listitem"
97+
onClick={() => {
98+
toolParamUpdater({ tool: ToolType.Labels });
99+
}}
100+
>
101+
<OutlinedIcon name="snippet_folder" />
102+
Edit Labels
103+
</button>
104+
<button
105+
className="btn btn-action whitespace-nowrap"
106+
role="listitem"
107+
onClick={() => {
108+
toolParamUpdater({ tool: ToolType.Delete });
109+
}}
110+
>
111+
<OutlinedIcon name="delete" />
112+
Delete Collection
113+
</button>
114+
<button
115+
className="btn btn-action whitespace-nowrap"
116+
role="listitem"
117+
onClick={() => {
118+
toolParamUpdater({ tool: ToolType.Rename });
119+
}}
99120
>
100-
<button
101-
className="btn btn-action whitespace-nowrap"
102-
role="listitem"
103-
onClick={() => {
104-
toolParamUpdater({ tool: ToolType.Labels });
105-
}}
106-
>
107-
<OutlinedIcon name="snippet_folder" />
108-
Edit Labels
109-
</button>
110-
<button
111-
className="btn btn-action whitespace-nowrap"
112-
role="listitem"
113-
onClick={() => {
114-
toolParamUpdater({ tool: ToolType.Delete });
115-
}}
116-
>
117-
<OutlinedIcon name="delete" />
118-
Delete Collection
119-
</button>
120-
<button
121-
className="btn btn-action whitespace-nowrap"
122-
role="listitem"
123-
onClick={() => {
124-
toolParamUpdater({ tool: ToolType.Rename });
125-
}}
126-
>
127-
<OutlinedIcon name="snippet_folder" />
128-
Rename Collection
129-
</button>
130-
</div>
121+
<OutlinedIcon name="snippet_folder" />
122+
Rename Collection
123+
</button>
131124
</div>
132-
</div>
125+
</section>
133126
</div>
134127
);
135128
};

‎ui/src/app/datasets/[bucket]/[name]/components/CollectionOverview.tsx‎

Lines changed: 9 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,12 @@
1515
//SPDX-License-Identifier: Apache-2.0
1616
"use client";
1717

18-
import { useEffect, useRef, useState } from "react";
18+
import { useEffect, useState } from "react";
1919

2020
import { useSearchParams } from "next/navigation";
2121

22-
import { DatasetTag } from "~/components/Tag";
22+
import PageHeader from "~/components/PageHeader";
23+
import { Colors, Tag } from "~/components/Tag";
2324
import { type DataInfoResponse, type DatasetTypesSchema } from "~/models";
2425

2526
import { CollectionDetails } from "./CollectionDetails";
@@ -37,25 +38,20 @@ export default function CollectionOverview({
3738
const searchParams = useSearchParams();
3839
const toolParamUpdater = useToolParamUpdater();
3940
const [tool, setTool] = useState<ToolType | undefined>(undefined);
40-
const headerRef = useRef<HTMLDivElement>(null);
4141

4242
useEffect(() => {
4343
setTool(searchParams.get(PARAM_KEYS.tool) as ToolType | undefined);
4444
}, [searchParams, toolParamUpdater]);
4545

4646
return (
4747
<>
48-
<div
49-
className="page-header mb-3 flex items-center text-center gap-3"
50-
ref={headerRef}
51-
>
52-
<DatasetTag isCollection={dataset.type === "COLLECTION"}>{dataset.type}</DatasetTag>
53-
<h1>
48+
<PageHeader>
49+
<h2 className="grow">
5450
{dataset.bucket}/{dataset.name}
55-
</h1>
56-
<div className="w-25" />
57-
</div>
58-
<div className="grid h-full w-full gap-3 grid-cols-[1fr_auto] relative px-3">
51+
</h2>
52+
<Tag color={Colors.collection}>Collection</Tag>
53+
</PageHeader>
54+
<div className="grid h-full w-full grid-cols-[1fr_auto] relative">
5955
<CollectionVersionsTable collection={dataset} />
6056
<CollectionDetails dataset={dataset} />
6157
</div>

‎ui/src/app/datasets/[bucket]/[name]/components/CollectionVersionsTable.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,7 @@ export const CollectionVersionsTable: React.FC<{
105105
getPaginationRowModel: getPaginationRowModel(),
106106
getSortedRowModel: getSortedRowModel(),
107107
getFilteredRowModel: getFilteredRowModel(),
108+
getRowId: (row) => row.version,
108109
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
109110
// @ts-ignore
110111
onColumnFiltersChange: setColumnFilters,
@@ -123,7 +124,6 @@ export const CollectionVersionsTable: React.FC<{
123124
<TableBase
124125
columns={columns}
125126
table={table}
126-
paddingOffset={12}
127127
className="body-component"
128128
>
129129
<TablePagination

0 commit comments

Comments
 (0)