Skip to content

Commit ed7c1d4

Browse files
sharhiosharhio
committed
accessibility improvements
1 parent 2187e4a commit ed7c1d4

33 files changed

Lines changed: 234 additions & 130 deletions

‎src/App.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -216,9 +216,9 @@ const App: FC<IConfigurationProps> = props => {
216216
<>
217217
<SkipToMainContent />
218218
<BannerContainer />
219-
<section role="main" id="mainContent">
219+
<main id="mainContent">
220220
<CreateViewPage />
221-
</section>
221+
</main>
222222
</>
223223
)}
224224
/>
@@ -234,9 +234,9 @@ const App: FC<IConfigurationProps> = props => {
234234
<>
235235
<SkipToMainContent />
236236
<BannerContainer />
237-
<section role="main" id="mainContent">
237+
<main id="mainContent">
238238
<CreateViewPage />
239-
</section>
239+
</main>
240240
</>
241241
)}
242242
/>
@@ -246,9 +246,9 @@ const App: FC<IConfigurationProps> = props => {
246246
<>
247247
<SkipToMainContent />
248248
<BannerContainer />
249-
<section role="main" id="mainContent">
249+
<main id="mainContent">
250250
<UserMonitors />
251-
</section>
251+
</main>
252252
</>
253253
)}
254254
/>

‎src/i18n.ts‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ export const resources = {
1515
breadCrumbsModify: 'Edit the stop display',
1616
breadCrumbsOwnMonitors: 'My stop displays',
1717
breadCrumbsSite: 'Journey Planner',
18+
breadcrumbsNav: 'Breadcrumb',
1819
cancel: 'Cancel',
1920
cancelled: 'Cancelled',
2021
changeLanguage: 'Change language to {{language}}',
@@ -41,6 +42,8 @@ export const resources = {
4142
displayLanguages: 'Languages',
4243
displayMap: 'Map view',
4344
duration: 'Duration / language',
45+
'duration-disabled':
46+
'Duration / language – not applicable for a single view with one language',
4447
'edit-display': 'Edit display',
4548
'edit-map': 'Adjust the crop >',
4649
'front-page-no-sign-in-button': 'Continue without logging in',
@@ -81,6 +84,10 @@ export const resources = {
8184
'language-name-en': 'English',
8285
'language-name-fi': 'Finnish',
8386
'language-name-sv': 'Swedish',
87+
'added-stops': 'Added stops',
88+
leftColumn: 'Left column',
89+
rightColumn: 'Right column',
90+
renameDestinationFor: 'Rename {{line}} destination in {{lang}}',
8491
languageSelection: 'Language selection',
8592
layout: 'Layout',
8693
'layout-double': 'Double view',
@@ -182,6 +189,7 @@ export const resources = {
182189
breadCrumbsModify: 'Muokkaa pysäkkinäyttöä',
183190
breadCrumbsOwnMonitors: 'Omat pysäkkinäytöt',
184191
breadCrumbsSite: 'Reittiopas',
192+
breadcrumbsNav: 'Murupolku',
185193
cancel: 'Peruuta',
186194
cancelled: 'Peruttu',
187195
changeLanguage: 'Vaihda kieleen {{language}}',
@@ -209,6 +217,8 @@ export const resources = {
209217
displayLanguages: 'Esityskielet',
210218
displayMap: 'Karttanäkymä',
211219
duration: 'Kesto / esityskieli',
220+
'duration-disabled':
221+
'Kesto / esityskieli – ei käytössä yksittäiselle näkymälle, jossa on yksi kieli',
212222
'edit-display': 'Muokkaa näyttöä',
213223
'edit-map': 'Muokkaa rajausta > ',
214224
'front-page-no-sign-in-button': 'Jatka kirjautumatta',
@@ -247,6 +257,11 @@ export const resources = {
247257
'language-name-en': 'Englanti',
248258
'language-name-fi': 'Suomi',
249259
'language-name-sv': 'Ruotsi',
260+
'added-stops': 'Lisätyt pysäkit',
261+
leftColumn: 'Vasen sarake',
262+
rightColumn: 'Oikea sarake',
263+
renameDestinationFor:
264+
'Nimeä linjan {{line}} kohde uudelleen kielellä {{lang}}',
250265
languageSelection: 'Kielen valinta',
251266
layout: 'Asettelu',
252267
'layout-double': 'Kaksoisnäkymä',
@@ -348,6 +363,7 @@ export const resources = {
348363
breadCrumbsModify: 'Redigera hållplatsskärmen',
349364
breadCrumbsOwnMonitors: 'Mina hållplatsskärmar',
350365
breadCrumbsSite: 'Reseplaneraren',
366+
breadcrumbsNav: 'Brödsmulor',
351367
cancel: 'Ångra',
352368
cancelled: 'Inställt',
353369
changeLanguage: 'Byt språket till {{language}}',
@@ -375,6 +391,8 @@ export const resources = {
375391
displayLanguages: 'Språk',
376392
displayMap: 'Kartvy',
377393
duration: 'Tid / språk',
394+
'duration-disabled':
395+
'Tid / språk – inte tillgänglig för en enskild vy med ett språk',
378396
'edit-display': 'Redigera skärmen',
379397
'edit-map': 'Justera beskärningen >',
380398
'front-page-no-sign-in-button': 'Fortsätt utan att logga in',
@@ -414,6 +432,10 @@ export const resources = {
414432
'language-name-en': 'engelska',
415433
'language-name-fi': 'finska',
416434
'language-name-sv': 'svenska',
435+
'added-stops': 'Tillagda hållplatser',
436+
leftColumn: 'Vänster kolumn',
437+
rightColumn: 'Höger kolumn',
438+
renameDestinationFor: 'Byt namn på {{line}} destination på {{lang}}',
417439
languageSelection: 'Språkval',
418440
layout: 'Justering',
419441
'layout-double': 'Dubbelvy',

‎src/ui/Banner.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,6 @@ const Banner = () => {
4444
{user.sub ? (
4545
<button
4646
className="menu-button"
47-
role="button"
4847
aria-label={t('userMenuOpen')}
4948
onClick={setUserOpen}
5049
>
@@ -85,7 +84,6 @@ const Banner = () => {
8584
<div className="menu-container">
8685
<button
8786
className="menu-button"
88-
role="button"
8987
aria-label={t('menuOpen')}
9088
onClick={setBurgerOpen}
9189
>

‎src/ui/BannerContainer.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,10 @@ import { ConfigContext } from '../contexts';
77
const BannerContainer = () => {
88
const config = useContext(ConfigContext);
99
return (
10-
<section className="navigation-container" aria-label="navigation">
10+
<nav className="navigation-container" aria-label="navigation">
1111
{config.name === 'hsl' ? <BannerHSL /> : <Banner />}
1212
<Breadcrumbs />
13-
</section>
13+
</nav>
1414
);
1515
};
1616

‎src/ui/Breadcrumbs.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,10 @@
77
padding-top: 39px;
88

99
.crumbs {
10+
padding-left: 0;
11+
list-style: none;
12+
margin: 0;
13+
1014
.to-home {
1115
text-decoration: none;
1216
color: $primary-color;
@@ -24,6 +28,7 @@
2428
}
2529

2630
.main-header {
31+
margin: 0;
2732
padding-top: 53px;
2833
font-size: 36px;
2934
font-style: normal;

‎src/ui/Breadcrumbs.tsx‎

Lines changed: 33 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -39,37 +39,39 @@ const Breadcrumbs = () => {
3939

4040
return (
4141
<div className="breadcrumbs-container">
42-
<div className="crumbs">
43-
{crumbs.map((crumb, i) => {
44-
let path = arr[i];
45-
if (crumb === null) {
46-
crumb = 'breadCrumbsCreate';
47-
path = '';
48-
}
49-
return (
50-
<React.Fragment key={`crumb${i}`}>
51-
{i !== 0 && (
52-
<Icon
53-
img={'arrow-down'}
54-
width={14}
55-
height={14}
56-
rotate={'-90'}
57-
color={config.colors.primary}
58-
margin={'0 10px'}
59-
/>
60-
)}
61-
{i === crumbs.length - 1 ? (
62-
t(crumb)
63-
) : (
64-
<Link className="to-home" to={`/${path}`}>
65-
{t(crumb)}
66-
</Link>
67-
)}
68-
</React.Fragment>
69-
);
70-
})}
71-
</div>
72-
<span className="main-header">{t(crumbs[crumbs.length - 1])}</span>
42+
<nav aria-label={t('breadcrumbsNav')}>
43+
<ol className="crumbs">
44+
{crumbs.map((crumb, i) => {
45+
let path = arr[i];
46+
if (crumb === null) {
47+
crumb = 'breadCrumbsCreate';
48+
path = '';
49+
}
50+
return (
51+
<li key={`crumb${i}`} style={{ display: 'contents' }}>
52+
{i !== 0 && (
53+
<Icon
54+
img={'arrow-down'}
55+
width={14}
56+
height={14}
57+
rotate={'-90'}
58+
color={config.colors.primary}
59+
margin={'0 10px'}
60+
/>
61+
)}
62+
{i === crumbs.length - 1 ? (
63+
<span aria-current="page">{t(crumb)}</span>
64+
) : (
65+
<Link className="to-home" to={`/${path}`}>
66+
{t(crumb)}
67+
</Link>
68+
)}
69+
</li>
70+
);
71+
})}
72+
</ol>
73+
</nav>
74+
<h1 className="main-header">{t(crumbs[crumbs.length - 1])}</h1>
7375
</div>
7476
);
7577
};

‎src/ui/BurgerMenu.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ const BurgerMenu: FC<Props> = ({ createStatic, isOpen, onClose }) => {
3838
aria-label={t('changeLanguage', {
3939
language: t(`language-name-${language}`),
4040
})}
41+
aria-current={i18n.language === language ? true : undefined}
4142
>
4243
{language}
4344
</Link>,
@@ -91,12 +92,12 @@ const BurgerMenu: FC<Props> = ({ createStatic, isOpen, onClose }) => {
9192
className={classNames}
9293
overlayClassName={overlayClassNames}
9394
onRequestClose={() => onClose(null)}
95+
contentLabel={t('menuOpen')}
9496
>
9597
<div className="container">
9698
<section id="close">
9799
<button
98100
className="close-button"
99-
role="button"
100101
aria-label={t('menuClose')}
101102
onClick={onClose}
102103
>

‎src/ui/CheckBox.tsx‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,18 @@ import { useToggleState } from '@react-stately/toggle';
44
import { useFocusRing } from '@react-aria/focus';
55
import Icon from './Icon';
66

7-
function Checkbox(props) {
7+
interface IProps {
8+
name?: string;
9+
isSelected?: boolean;
10+
onChange?: () => void;
11+
'aria-label'?: string;
12+
color?: string;
13+
width?: number;
14+
height?: number;
15+
children?: React.ReactNode;
16+
}
17+
18+
function Checkbox(props: IProps) {
819
const state = useToggleState(props);
920
const ref = React.useRef();
1021
const { inputProps } = useCheckbox(props, state, ref);

‎src/ui/DeleteModal.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ const DeleteModal: FC<IProps> = ({
3636
<button
3737
disabled={loading}
3838
className="monitor-button blue"
39+
aria-label={t('delete-display', { id: name })}
3940
onClick={onDeleteCallBack}
4041
>
4142
{loading ? <Loading small primary /> : <>{t('delete')}</>}

‎src/ui/DisplaySettings.tsx‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -49,8 +49,7 @@ const DisplaySettings: FC<IProps> = ({
4949
})}
5050
onClick={() => handleOrientation('horizontal')}
5151
aria-label={t('displayDirection') + ' ' + t('horizontal')}
52-
role="button"
53-
disabled={orientation === 'horizontal'}
52+
aria-pressed={orientation === 'horizontal'}
5453
>
5554
<Icon
5655
img={
@@ -68,8 +67,7 @@ const DisplaySettings: FC<IProps> = ({
6867
})}
6968
onClick={() => handleOrientation('vertical')}
7069
aria-label={t('displayDirection') + ' ' + t('vertical')}
71-
role="button"
72-
disabled={orientation === 'vertical'}
70+
aria-pressed={orientation === 'vertical'}
7371
>
7472
<Icon
7573
img={
@@ -96,7 +94,7 @@ const DisplaySettings: FC<IProps> = ({
9694
</div>
9795
</div>
9896
{languages.length === 0 && (
99-
<div className="language-alert" aria-hidden="true">
97+
<div className="language-alert" role="alert">
10098
{t('chooseOne')}
10199
</div>
102100
)}
@@ -120,7 +118,10 @@ const DisplaySettings: FC<IProps> = ({
120118
</div>
121119
</section>
122120
{config.map.inUse && (
123-
<section className="display-language-container">
121+
<section
122+
className="display-language-container"
123+
aria-label={t('displayMap')}
124+
>
124125
<div className="headers">
125126
<div
126127
className={cx('map-header ' + lang, {
@@ -141,8 +142,8 @@ const DisplaySettings: FC<IProps> = ({
141142
onToggle={setShowMap}
142143
disabled={disableToggle}
143144
/>
145+
<div className="txt">{t('showMap')}</div>
144146
</label>
145-
<div className="txt">{t('showMap')}</div>
146147
</div>
147148
)}
148149
</section>

0 commit comments

Comments
 (0)