Verified Commit 6fac2a1a authored by Sandro Lutz's avatar Sandro Lutz
Browse files

Increase accessibility

parent f4c1729d
......@@ -28,6 +28,7 @@ export default class EventCard {
if (item.img_poster) {
cardContent = m('img', {
src: `${apiUrl}${item.img_poster.file}`,
alt: item.getTitle(),
});
} else {
cardContent = m('div', [m('h2', item.getTitle()), m('span', item.getCatchphrase())]);
......
......@@ -24,6 +24,7 @@ export default {
email: 'Email',
search: 'Suchen',
reset: 'Zurücksetzen',
externalLink: 'Externer Link',
button: {
cancel: 'abbrechen',
confirm: 'bestätigen',
......
......@@ -24,6 +24,7 @@ export default {
email: 'Email',
search: 'Search',
reset: 'Reset',
externalLink: 'External link',
button: {
cancel: 'cancel',
confirm: 'confirm',
......
......@@ -4,6 +4,10 @@ import LngDetector from 'i18next-browser-languagedetector';
import german from '../languages/de';
import english from '../languages/en';
function setLanguageAttribute() {
document.documentElement.setAttribute('lang', i18next.language);
}
/**
* Check if a given language code is valid.
*
......@@ -21,26 +25,31 @@ function isLanguageValid(language) {
* This function sets the current language accordingly.
*/
function loadLanguage() {
i18next.use(LngDetector).init({
fallbackLng: 'en',
whitelist: ['en', 'de'],
nsSeparator: false,
initImmediate: false,
detection: {
order: ['path', 'cookie', 'localStorage', 'navigator', 'htmlTag'],
lookupCookie: 'language',
lookupLocalStorage: 'language',
lookupFromPathIndex: 0,
},
resources: {
en: {
translation: english,
i18next
.use(LngDetector)
.init({
fallbackLng: 'en',
whitelist: ['en', 'de'],
nsSeparator: false,
initImmediate: false,
detection: {
order: ['path', 'cookie', 'localStorage', 'navigator', 'htmlTag'],
lookupCookie: 'language',
lookupLocalStorage: 'language',
lookupFromPathIndex: 0,
},
de: {
translation: german,
resources: {
en: {
translation: english,
},
de: {
translation: german,
},
},
},
});
})
.then(() => {
setLanguageAttribute();
});
}
/**
......@@ -73,6 +82,7 @@ function currentLocale() {
*/
function changeLanguage(language) {
i18next.changeLanguage(language);
document.documentElement.setAttribute('lang', currentLanguage);
m.route.set(`/${currentLanguage()}${m.route.get().substring(3)}`);
}
......
......@@ -2,7 +2,6 @@
.infobox {
position: relative;
width: calc(100% - 3em);
text-align: left;
padding: .5em .5em .5em 2.5em;
background-color: @color-grey;
......
......@@ -18,6 +18,7 @@ class ImageGroup {
this._portraitViews.push(this.constructor._getPortraitView(portrait));
});
}
static _parseMarkdownText(text) {
// replace leading spaces when using multi-line strings
return marked(escape(text.trim().replace(/\n[^\S\n]+/g, '\n')));
......@@ -30,7 +31,10 @@ class ImageGroup {
let image;
if (group.image) {
image = m('div.image.ratio-3to2', m('img', { src: `/${group.image}` }));
image = m(
'div.image.ratio-3to2',
m('img', { src: `/${group.image}`, alt: this._portraitNames.join(' & ') })
);
} else {
image = m('div.no-image', i18n('no image'));
}
......@@ -112,7 +116,10 @@ export default class Board {
let image;
if (boardImage) {
image = m('div.image.ratio-3to2', m('img', { src: `/${boardImage}` }));
image = m(
'div.image.ratio-3to2',
m('img', { src: `/${boardImage}`, alt: i18n('board.title') })
);
} else {
image = m('');
}
......
......@@ -50,9 +50,9 @@ class Team {
const additionalContent = [];
if (team.image) {
image = m('img', { src: `/${team.image}` });
image = m('img', { src: `/${team.image}`, alt: team.name });
} else {
image = m('img', { src: logos.amivWheel });
image = m('img', { src: logos.amivWheel, alt: team.name });
}
if (team.description && Object.keys(team.description).length > 0) {
......
......@@ -59,7 +59,7 @@ export class TranslationUnavailable {
},
[
m(Icon, { svg: { content: m.trust(icons.translate) } }),
m('span', i18n('errors.translation_unavailable')),
m('span', i18n('error.translationUnavailable')),
' ',
m(
'span',
......
......@@ -194,7 +194,7 @@ export default class EventList extends FilteredListPage {
},
header: () =>
m('div.event-header', [
m('div.image.ratio-1to1', m('img', { src: imageurl })),
m('div.image.ratio-1to1', m('img', { src: imageurl, alt: event.getTitle() })),
m('div.content', [
m('h2.title', event.getTitle()),
m('div.catchphrase', event.getCatchphrase()),
......
......@@ -18,7 +18,7 @@ const renderVseth = coord => {
href: `https://vseth.ethz.ch/`,
style,
},
m('img', { src: logos.vseth })
m('img', { src: logos.vseth, alt: 'VSETH' })
);
};
......@@ -54,21 +54,25 @@ export default class Footer {
m(
'a',
{ href: `https://www.facebook.com/AMIV.ETHZ/` },
m(Icon, { size: 'medium', svg: { content: m.trust(icons.facebook) } })
m(Icon, { size: 'medium', svg: { content: m.trust(icons.facebook) }, alt: 'Facebook' })
),
m(
'a',
{ href: `https://www.instagram.com/amiv_eth/` },
m(Icon, { size: 'medium', svg: { content: m.trust(icons.instagram) } })
m(Icon, {
size: 'medium',
svg: { content: m.trust(icons.instagram) },
alt: 'Instagram',
})
),
m(
'a',
{ href: `https://twitter.com/amiv_ethz` },
m(Icon, { size: 'medium', svg: { content: m.trust(icons.twitter) } })
m(Icon, { size: 'medium', svg: { content: m.trust(icons.twitter) }, alt: 'Twitter' })
)
),
m('div.institution-logos', [
m('a', { href: `https://www.ethz.ch/` }, m('img', { src: logos.eth })),
m('a', { href: `https://www.ethz.ch/` }, m('img', { src: logos.eth, alt: 'ETH Zürich' })),
m(
'div',
{
......
......@@ -103,6 +103,7 @@ export default class Frontpage {
ratio: 'landscape',
content: m('img', {
src: item.imageurl ? item.imageurl : icons.logoWheel,
alt: item.getTitle(),
}),
overlay: {
sheet: true,
......@@ -120,6 +121,34 @@ export default class Frontpage {
});
}
static _renderEventCard(item, loading = false) {
let url;
let cardContent;
if (item && !loading) {
url = {
href: `${m.route.get()}events/${item._id}`,
oncreate: m.route.link,
};
if (item.img_poster) {
cardContent = m('img', {
src: `${apiUrl}${item.img_poster.file}`,
alt: item.getTitle(),
});
} else {
cardContent = m('div', [m('h2', item.getTitle()), m('span', item.getCatchphrase())]);
}
} else {
cardContent = m(Spinner, { show: true });
}
return m(Card, {
url,
content: m('div.image.ratio-paper-a-vertical', cardContent),
});
}
static _renderJobCard(item, loading = false) {
let url;
let cardContent;
......@@ -132,7 +161,7 @@ export default class Frontpage {
let logo;
if (item.logo) {
logo = m('img', { src: `${apiUrl}${item.logo.file}` });
logo = m('img', { src: `${apiUrl}${item.logo.file}`, alt: item.company });
}
cardContent = m('div', [m('h3', item.getTitle()), m('div.image.ratio-4to1', logo)]);
......
......@@ -32,7 +32,7 @@ export default class Header {
m(
'a.logo',
{ href: `/${currentLanguage()}/`, onupdate: m.route.link },
m('img', { src: logos.amiv })
m('img', { src: logos.amiv, alt: 'AMIV an der ETH' })
),
this.constructor._mainMenu,
this.constructor._profileMenu,
......@@ -119,6 +119,7 @@ export default class Header {
class: 'external-link',
svg: { content: m.trust(icons.link) },
size: 'small',
alt: i18n('externalLink'),
})
: m(''),
]
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment