Skip to content

Commit 51b80d0

Browse files
silviyabotevasilviyaboteva
authored
Merge pull request #2997 from telerik/a11y-fixes
A11y fixes
2 parents b411764 + 42c8857 commit 51b80d0

File tree

12 files changed

+124
-115
lines changed

12 files changed

+124
-115
lines changed

‎examples/kendo-react-project-tracker-app/src/components/AppBarComponent.tsx‎

Lines changed: 27 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -22,34 +22,40 @@ export default function AppBarComponent() {
2222
return (
2323
<AppBar positionMode="sticky" className="bg-surface-alt !p-4" themeColor='inherit'>
2424
<AppBarSection className="grow gap-4">
25-
<a href="#" onClick={(e) => { e.preventDefault(); navigate('/'); }}>
26-
<img src={logo} alt="Logo" className="hidden md:flex" />
27-
<img src={compactLogo} alt="Logo" className="flex md:hidden" />
28-
</a>
29-
</AppBarSection>
25+
<div role="banner">
26+
<a href="#" onClick={(e) => { e.preventDefault(); navigate('/'); }}>
27+
<img src={logo} alt="Logo" className="hidden md:flex" />
28+
<img src={compactLogo} alt="Logo" className="flex md:hidden" />
29+
</a>
30+
</div>
31+
</AppBarSection>
3032

3133
<AppBarSection className="grow md:grow-0 !hidden sm:!inline-flex">
32-
<TextBox prefix={() => (
33-
<>
34-
<InputPrefix>
35-
<SvgIcon icon={searchIcon} />
36-
</InputPrefix>
37-
<InputSeparator />
38-
</>
39-
)}
40-
placeholder="Search"
41-
fillMode="solid"
42-
className="!w-75"
34+
<div role="search">
35+
<TextBox prefix={() => (
36+
<>
37+
<InputPrefix>
38+
<SvgIcon icon={searchIcon} />
39+
</InputPrefix>
40+
<InputSeparator />
41+
</>
42+
)}
43+
placeholder="Search"
44+
fillMode="solid"
45+
className="!w-75"
4346
/>
47+
</div>
4448
</AppBarSection>
4549

4650
<AppBarSection className="sm:!hidden">
47-
<Button fillMode="flat" svgIcon={searchIcon} />
51+
<div role="search">
52+
<Button fillMode="flat" svgIcon={searchIcon} title="Search button" />
53+
</div>
4854
</AppBarSection>
4955

5056
<AppBarSection className="gap-2">
51-
<div onClick={() => setShow(!show)} ref={anchor}>
52-
<Avatar rounded="full" type="text" themeColor="primary">JP</Avatar>
57+
<div onClick={() => setShow(!show)} ref={anchor} role="contentinfo">
58+
<Avatar rounded="full" type="text" themeColor="primary" className="cursor-pointer">JP</Avatar>
5359
</div>
5460
<Popover
5561
show={show}
@@ -75,10 +81,10 @@ export default function AppBarComponent() {
7581
</Popover>
7682
<span className="k-appbar-separator border-border"></span>
7783
<BadgeContainer>
78-
<Button svgIcon={bellIcon} fillMode="flat" />
84+
<Button svgIcon={bellIcon} fillMode="flat" title="Notifications button" />
7985
<Badge rounded="full" position="inside" align={{ vertical: 'top', horizontal: 'end' }} themeColor="primary" />
8086
</BadgeContainer>
81-
</AppBarSection>
87+
</AppBarSection>
8288
</AppBar>
8389
);
8490
}

‎examples/kendo-react-project-tracker-app/src/components/DrawerComponent.tsx‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@ import { folderIcon, homeIcon, listUnorderedSquareIcon, userOutlineIcon } from '
44
import { To, useLocation, useNavigate } from 'react-router-dom';
55

66
const drawerItems = [
7-
{ text: "Home", svgIcon: homeIcon, route: '/', selected: true, className: "rounded-md [.k-selected]:!bg-primary/8 [.k-selected]:!text-primary" },
8-
{ text: "Projects", svgIcon: folderIcon, route: '/projects', className: "rounded-md [.k-selected]:!bg-primary/8 [.k-selected]:!text-primary" },
9-
{ text: "Tasks", svgIcon: listUnorderedSquareIcon, route: '/tasks', className: "rounded-md [.k-selected]:!bg-primary/8 [.k-selected]:!text-primary" },
10-
{ text: "Team Management", svgIcon: userOutlineIcon, route: '/team-management', className: "rounded-md [.k-selected]:!bg-primary/8 [.k-selected]:!text-primary" }
7+
{ text: "Home", svgIcon: homeIcon, route: '/', selected: true, className: "rounded-md [.k-selected]:!bg-primary/8 [.k-selected]:!text-primary-emphasis" },
8+
{ text: "Projects", svgIcon: folderIcon, route: '/projects', className: "rounded-md [.k-selected]:!bg-primary/8 [.k-selected]:!text-primary-emphasis" },
9+
{ text: "Tasks", svgIcon: listUnorderedSquareIcon, route: '/tasks', className: "rounded-md [.k-selected]:!bg-primary/8 [.k-selected]:!text-primary-emphasis" },
10+
{ text: "Team Management", svgIcon: userOutlineIcon, route: '/team-management', className: "rounded-md [.k-selected]:!bg-primary/8 [.k-selected]:!text-primary-emphasis" }
1111
];
1212

1313
interface DrawerComponentProps {
@@ -31,6 +31,10 @@ const DrawerComponent: React.FC<DrawerComponentProps> = ({ children }) => {
3131

3232
const selected = setSelectedItem(location.pathname);
3333

34+
if (document.getElementsByClassName('k-drawer')[0]) {
35+
document.getElementsByClassName('k-drawer')[0].setAttribute('role', 'navigation');
36+
document.getElementsByClassName('k-drawer')[0].setAttribute('title', 'Drawer title');
37+
}
3438
return (
3539
<Drawer
3640
expanded={true}
@@ -44,7 +48,9 @@ const DrawerComponent: React.FC<DrawerComponentProps> = ({ children }) => {
4448
width={223}
4549
>
4650
<DrawerContent>
47-
{children}
51+
<div role="main">
52+
{children}
53+
</div>
4854
</DrawerContent>
4955
</Drawer>
5056
);

‎examples/kendo-react-project-tracker-app/src/index.css‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@
5252
--kendo-color-tertiary-subtle: #D8F1FD;
5353
--kendo-color-tertiary-subtle-hover: #C5EAFC;
5454
--kendo-color-tertiary-subtle-active: #A3DFFB;
55-
--kendo-color-tertiary: #03A9F4;
55+
--kendo-color-tertiary: oklch(from #03A9F4 calc(l - 0.15) c h);
5656
--kendo-color-tertiary-hover: #039AE0;
5757
--kendo-color-tertiary-active: #028CCB;
5858
--kendo-color-tertiary-emphasis: #61C9F9;
@@ -63,7 +63,7 @@
6363
--kendo-color-error-subtle: #E05A4D;
6464
--kendo-color-error-subtle-hover: #DE5143;
6565
--kendo-color-error-subtle-active: #DC4839;
66-
--kendo-color-error: #DC4839;
66+
--kendo-color-error: oklch(from #DC4839 calc(l - 0.05) c h);
6767
--kendo-color-error-hover: #D14436;
6868
--kendo-color-error-active: #C64133;
6969
--kendo-color-error-emphasis: #BB3D30;
@@ -74,7 +74,7 @@
7474
--kendo-color-success-subtle: #4EBE69;
7575
--kendo-color-success-subtle-hover: #44BB60;
7676
--kendo-color-success-subtle-active: #39B757;
77-
--kendo-color-success: #2FB34E;
77+
--kendo-color-success: oklch(from #2FB34E calc(l - 0.15) c h);
7878
--kendo-color-success-hover: #2DAA4A;
7979
--kendo-color-success-active: #2AA146;
8080
--kendo-color-success-emphasis: #289842;
@@ -85,7 +85,7 @@
8585
--kendo-color-warning-subtle: #F2C34A;
8686
--kendo-color-warning-subtle-hover: #F2BF3F;
8787
--kendo-color-warning-subtle-active: #F1BC35;
88-
--kendo-color-warning: #F0B82A;
88+
--kendo-color-warning: oklch(from #F0B82A calc(l + 0.10) c calc(h + 10));
8989
--kendo-color-warning-hover: #E4AF28;
9090
--kendo-color-warning-active: #D8A626;
9191
--kendo-color-warning-emphasis: #CC9C24;

‎examples/kendo-react-project-tracker-app/src/pages/Home.tsx‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,12 @@ import { Calendar } from "@progress/kendo-react-dateinputs";
77
import { pencilIcon, plusIcon, trashIcon } from "@progress/kendo-svg-icons";
88
import { tasksData, listData, projectsData, teamsData } from "./data";
99
import { useNavigate } from "react-router-dom";
10+
import React from "react";
1011

1112
export default function Home() {
1213
const navigate = useNavigate();
14+
const [date, setDate] = React.useState(new Date());
15+
1316
const handleSeeAllProjectsClick = () => {
1417
navigate('/projects');
1518
};
@@ -57,12 +60,12 @@ export default function Home() {
5760
</div>
5861
</CardBody>
5962
<CardFooter className="border-0 p-2">
60-
<Button fillMode="flat" themeColor="primary" onClick={handleSeeAllProjectsClick}>See all</Button>
63+
<Button fillMode="flat" themeColor="primary" onClick={handleSeeAllProjectsClick} title="See all projects">See all</Button>
6164
</CardFooter>
6265
</Card>
6366
</div>
6467
<div className="col-span-2 sm:col-span-1 lg:col-span-6 xl:col-span-1">
65-
<Calendar className="rounded-2xl w-full" />
68+
<Calendar className="rounded-2xl w-full" value={date} onChange={e => setDate(e.target.value)} tabIndex={0}/>
6669
</div>
6770
<div className="col-span-2 sm:col-span-1 lg:col-span-3 xl:col-span-1 h-72.5 lg:h-116">
6871
<Card className="rounded-2xl overflow-auto max-h-72.5 lg:max-h-116">
@@ -85,24 +88,23 @@ export default function Home() {
8588
})}
8689
</CardBody>
8790
<CardFooter className="border-0 p-2">
88-
<Button fillMode="flat" themeColor="primary" onClick={handleSeeAllTeamsClick}>See all</Button>
91+
<Button fillMode="flat" themeColor="primary" onClick={handleSeeAllTeamsClick} title="See all teams">See all</Button>
8992
</CardFooter>
9093
</Card>
9194
</div>
9295
<div className="col-span-2 lg:col-span-4 xl:col-span-1 h-116">
9396
<Card className="rounded-2xl h-full">
9497
<CardHeader className="border-0 flex flex-wrap justify-between items-center gap-2">
9598
<CardTitle className="font-medium">To-Do List</CardTitle>
96-
<Button fillMode="flat" themeColor="primary" svgIcon={plusIcon}>Add more tasks</Button>
99+
<Button fillMode="flat" themeColor="primary" svgIcon={plusIcon} title="Add more tasks">Add more tasks</Button>
97100
</CardHeader>
98101
<CardBody className="h-full overflow-y-hidden">
99102
<div className="h-full overflow-y-auto">
100103
{listData.map((item, index) => <div className="!flex !my-2 !gap-2 !p-0.5" key={'list-item-' + index}>
101-
<Checkbox rounded="small" />
102-
<span>{item.text}</span>
104+
<Checkbox rounded="small" label={item.text}/>
103105
<div className="ml-auto shrink-0">
104-
<Button svgIcon={pencilIcon} fillMode="flat" />
105-
<Button svgIcon={trashIcon} fillMode="flat" themeColor="error" />
106+
<Button svgIcon={pencilIcon} fillMode="flat" title="Edit button"/>
107+
<Button svgIcon={trashIcon} fillMode="flat" themeColor="error" title="Delete button"/>
106108
</div>
107109
</div>)}
108110
</div>
@@ -115,13 +117,13 @@ export default function Home() {
115117
<CardTitle className="font-medium">Tasks</CardTitle>
116118
</CardHeader>
117119
<CardBody className="h-full overflow-y-hidden">
118-
<Grid className="h-full" data={tasksData}>
120+
<Grid className="h-full" data={tasksData} navigatable={true}>
119121
<GridColumn field="taskName" title="Task Name" />
120122
<GridColumn field="status" title="Status" width={115} />
121123
</Grid>
122124
</CardBody>
123125
<CardFooter className="border-0 p-2">
124-
<Button fillMode="flat" themeColor="primary" onClick={handleSeeAllTasksClick}>See all</Button>
126+
<Button fillMode="flat" themeColor="primary" onClick={handleSeeAllTasksClick} title="See all tasks">See all</Button>
125127
</CardFooter>
126128
</Card>
127129
</div>

‎examples/kendo-react-project-tracker-app/src/pages/NewTask.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -151,14 +151,14 @@ export default function Task() {
151151
<TextArea rows={30} className="rounded-t-2xl"/>
152152
<div className="bg-surface-alt border-1 border-t-0 border-border rounded-b-2xl px-4 py-2">
153153
<div className="hidden lg:flex gap-1">
154-
<Button svgIcon={checkIcon} themeColor="primary" size="large">Save changes</Button>
155-
<Button svgIcon={folderIcon} fillMode="flat" size="large" className="ml-auto">Archive Task</Button>
156-
<Button svgIcon={trashIcon} fillMode="flat" themeColor="error" size="large">Delete task</Button>
154+
<Button svgIcon={checkIcon} themeColor="primary" size="large" title="Save changes">Save changes</Button>
155+
<Button svgIcon={folderIcon} fillMode="flat" size="large" className="ml-auto" title="Archive task">Archive Task</Button>
156+
<Button svgIcon={trashIcon} fillMode="flat" themeColor="error" size="large" title="Delete task">Delete task</Button>
157157
</div>
158158
<div className="flex lg:hidden gap-1">
159-
<Button svgIcon={checkIcon} themeColor="primary" size="large">Save changes</Button>
160-
<Button svgIcon={folderIcon} fillMode="flat" size="large" className="ml-auto">Archive Task</Button>
161-
<Button svgIcon={trashIcon} fillMode="flat" themeColor="error" size="large">Delete task</Button>
159+
<Button svgIcon={checkIcon} themeColor="primary" size="large" title="Save changes">Save changes</Button>
160+
<Button svgIcon={folderIcon} fillMode="flat" size="large" className="ml-auto" title="Archive task">Archive Task</Button>
161+
<Button svgIcon={trashIcon} fillMode="flat" themeColor="error" size="large" title="Delete task">Delete task</Button>
162162
</div>
163163
</div>
164164
</div>

‎examples/kendo-react-project-tracker-app/src/pages/Projects.tsx‎

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,19 @@ import {
22
Avatar,
33
Breadcrumb,
44
BreadcrumbLinkMouseEvent,
5+
BreadcrumbLinkProps,
56
GridLayout,
67
} from "@progress/kendo-react-layout";
78
import {
89
homeIcon
910
} from "@progress/kendo-svg-icons";
1011
import { SvgIcon } from "@progress/kendo-react-common";
11-
import React from "react";
12+
1213
import { useNavigate } from "react-router-dom";
1314
import { Badge } from "@progress/kendo-react-indicators";
1415
import { projectsData } from "./data";
1516

16-
interface DataModel {
17-
id: string;
18-
text?: string;
19-
icon?: React.ReactNode;
20-
}
21-
22-
const breadcrumbItems: DataModel[] = [
17+
const breadcrumbItems: BreadcrumbLinkProps[] = [
2318
{ id: "home", icon: <SvgIcon icon={homeIcon} /> },
2419
{ id: "projects", text: "Projects" },
2520
];
@@ -76,7 +71,7 @@ export default function Projects() {
7671
<div className="text-sm text-subtle">Project Manager</div>
7772
<div className="flex items-center">
7873
<Avatar type={'image'} size="small" className="mr-1" border={false}>
79-
<img src={project.AvatarSrc} />
74+
<img src={project.AvatarSrc} alt={project.ProjectManager} />
8075
</Avatar>
8176
<span className="truncate">Marlon66</span>
8277
</div>
@@ -85,7 +80,7 @@ export default function Projects() {
8580
<div className="text-sm text-subtle">Stakeholder(s)</div>
8681
<div className="flex items-center">
8782
<Avatar type={'image'} size="small" className="mr-1">
88-
<img src={project.AvatarSrc} />
83+
<img src={project.AvatarSrc} alt={project.Stakeholders} />
8984
</Avatar>
9085
<span className="truncate">Monserrat49</span>
9186
</div>

0 commit comments

Comments
 (0)