From ebca17d91c3a09f2c4a38b2e1930ab4bf33be018 Mon Sep 17 00:00:00 2001 From: Per Olav Mariussen <35491554+PerOlavM@users.noreply.github.com> Date: Thu, 4 Jan 2024 11:19:05 +0100 Subject: [PATCH] UU-gjennomgang (#157) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Logo - lenke mangler tekstrepresentasjon - Fiks ikoner (bl.a. språkvelger og skjermdeling) - Søkefeltet (autocomplete) - Skjermleser ved Alerts - Hopp til hovedinnhold --- .../client/src/styles/skiplink.module.css | 28 ++++++++++++++ packages/server/.env.sample | 1 + packages/server/src/texts.ts | 6 +-- .../src/views/footer/screenshare-button.ts | 1 + .../server/src/views/header/complex-header.ts | 11 ++++-- .../server/src/views/header/simple-header.ts | 9 +++-- packages/server/src/views/search-form.ts | 1 + packages/shared/types.ts | 2 +- packages/shared/views/alert.ts | 19 +++++++--- packages/shared/views/icons/badge.ts | 1 + packages/shared/views/icons/briefcase.ts | 1 + packages/shared/views/icons/burger.ts | 2 +- packages/shared/views/icons/close.ts | 1 + packages/shared/views/icons/down-chevron.ts | 1 + packages/shared/views/icons/error.ts | 1 + .../shared/views/icons/forward-chevron.ts | 2 +- packages/shared/views/icons/globe.ts | 1 + packages/shared/views/icons/home.ts | 37 +++++++++---------- packages/shared/views/icons/info-square.ts | 1 + packages/shared/views/icons/info.ts | 2 + packages/shared/views/icons/lock.ts | 9 +---- packages/shared/views/icons/login.ts | 3 +- packages/shared/views/icons/logout.ts | 1 + packages/shared/views/icons/next.ts | 4 +- packages/shared/views/icons/notifications.ts | 1 + packages/shared/views/icons/padlock.ts | 1 + .../views/icons/person-circle-notification.ts | 3 ++ packages/shared/views/icons/person-circle.ts | 1 + packages/shared/views/icons/profile.ts | 2 +- packages/shared/views/icons/search.ts | 2 +- packages/shared/views/icons/share-screen.ts | 1 + packages/shared/views/icons/warning.ts | 3 +- .../shared/views/illustrations/veileder.ts | 3 +- packages/shared/views/nav-logo.ts | 7 ++-- packages/shared/views/screensharing-modal.ts | 1 + packages/shared/views/skiplink.ts | 17 +++++++++ 36 files changed, 131 insertions(+), 56 deletions(-) create mode 100644 packages/client/src/styles/skiplink.module.css create mode 100644 packages/shared/views/skiplink.ts diff --git a/packages/client/src/styles/skiplink.module.css b/packages/client/src/styles/skiplink.module.css new file mode 100644 index 00000000..5c118839 --- /dev/null +++ b/packages/client/src/styles/skiplink.module.css @@ -0,0 +1,28 @@ +.skiplink { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + width: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + z-index: 1001; +} +.skiplink:focus, +.skiplink:active { + clip: auto; + height: 2.625rem; + width: auto; + padding: 0.8rem; + margin: 0; + overflow: visible; + position: absolute; +} +.skiplink:focus { + outline: none; + color: white; + text-decoration: none; + background-color: var(--a-border-focus); + box-shadow: 0 0 0 2px var(--a-border-focus); +} diff --git a/packages/server/.env.sample b/packages/server/.env.sample index c9fbfbad..c2d670c2 100644 --- a/packages/server/.env.sample +++ b/packages/server/.env.sample @@ -2,6 +2,7 @@ ENONICXP_SERVICES=https://www.dev.nav.no/_/service/ XP_BASE_URL=https://www.intern.dev.nav.no PORT=8089 ENV=localhost +NODE_ENV=development CDN_URL=http://localhost:8089/public AUTH_API=http://localhost:8089/api/auth HOST=http://localhost:8089 diff --git a/packages/server/src/texts.ts b/packages/server/src/texts.ts index 2c2666c4..a8da85bd 100644 --- a/packages/server/src/texts.ts +++ b/packages/server/src/texts.ts @@ -12,6 +12,7 @@ import { Texts } from 'decorator-shared/types'; // 'delskjerm-modal-hjelpetekst-2-se': `Det er du som godkjenner skjermdeling. Ingenting blir lagret.`, const nb = { + skip_link: 'Hopp til hovedinnhold', share_screen: 'Del skjerm med veileder', to_top: 'Til toppen', menu: 'Meny', @@ -61,7 +62,6 @@ const nb = { 'Helsepersonell, tiltaksarrangører, fylker og kommuner', loading_notifications: 'Laster varslinger', notifications_error: 'Feil ved lasting av varsler', - til_forsiden: 'Til forsiden', how_can_we_help: 'Hva kan vi hjelpe deg med?', showing: 'Viser', of: 'av', @@ -96,6 +96,7 @@ export type LangBaseKeys = keyof typeof nb; export const texts: Record = { nb, en: { + skip_link: 'Go to main content', share_screen: 'Share screen with your counsellor', to_top: 'To the top', menu: 'Menu', @@ -147,7 +148,6 @@ export const texts: Record = { 'Health personnel, intervention organizers, counties and municipalities', loading_notifications: 'Loading notifications', notifications_error: 'Error loading notifications', - til_forsiden: 'To the frontpage', how_can_we_help: 'What can we help you with?', showing: 'Showing', of: 'of', @@ -177,6 +177,7 @@ export const texts: Record = { go_to_my_page: 'Go to my page', }, se: { + skip_link: 'Hopp til hovedinnhold', share_screen: 'Del skjerm med veileder', to_top: 'Til toppen', menu: 'Meny', @@ -226,7 +227,6 @@ export const texts: Record = { 'Helsepersonell, tiltaksarrangører, fylker og kommuner', loading_notifications: 'Laster varslinger', notifications_error: 'Feil ved lasting av varsler', - til_forsiden: 'Til forsiden', how_can_we_help: 'Hva kan vi hjelpe deg med?', showing: 'Viser', of: 'av', diff --git a/packages/server/src/views/footer/screenshare-button.ts b/packages/server/src/views/footer/screenshare-button.ts index d7243c6b..c963b729 100644 --- a/packages/server/src/views/footer/screenshare-button.ts +++ b/packages/server/src/views/footer/screenshare-button.ts @@ -13,6 +13,7 @@ export const ScreenshareButton = (text: string) => fill="none" xmlns="http://www.w3.org/2000/svg" focusable="false" + aria-hidden="true" role="img" >
-
+ ${SkipLink(texts.skip_link)} +
- +
${opsMessages.length > 0 && OpsMessages({ opsMessages })} html`
-
+ ${SkipLink(texts.skip_link)} +
+
${decoratorUtils} diff --git a/packages/server/src/views/search-form.ts b/packages/server/src/views/search-form.ts index 782d9878..81e1af1e 100644 --- a/packages/server/src/views/search-form.ts +++ b/packages/server/src/views/search-form.ts @@ -20,6 +20,7 @@ export const SearchForm = ({ texts }: SearchFormProps) => { type="text" name="search" id="${id}" + autocomplete="off" /> diff --git a/packages/shared/types.ts b/packages/shared/types.ts index 0c409d2b..9f935196 100644 --- a/packages/shared/types.ts +++ b/packages/shared/types.ts @@ -52,6 +52,7 @@ export type ClientTexts = { }; export type Texts = ClientTexts & { + skip_link: string; share_screen: string; to_top: string; menu: string; @@ -85,7 +86,6 @@ export type Texts = ClientTexts & { meny_bunnlenke_samarbeidspartner_stikkord: string; loading_notifications: string; notifications_error: string; - til_forsiden: string; how_can_we_help: string; showing: string; of: string; diff --git a/packages/shared/views/alert.ts b/packages/shared/views/alert.ts index 286ca095..9f27a525 100644 --- a/packages/shared/views/alert.ts +++ b/packages/shared/views/alert.ts @@ -19,13 +19,22 @@ type AlertProps = { export type AlertVariant = AlertProps['variant']; -export const Alert = (props: AlertProps) => { - const icon = alertIcons[props.variant]; +const role = { + info: undefined, + success: 'status', + warning: 'status', + error: 'alert', +}; +export const Alert = (props: AlertProps) => { + const { variant, content, className } = props; return html` -
- ${icon} -
${props.content}
+
+ ${alertIcons[variant]} + ${content}
`; }; diff --git a/packages/shared/views/icons/badge.ts b/packages/shared/views/icons/badge.ts index b437c0f1..280f24c3 100644 --- a/packages/shared/views/icons/badge.ts +++ b/packages/shared/views/icons/badge.ts @@ -8,6 +8,7 @@ export const BadgeIcon = ({ className }: { className?: string } = {}) => fill="none" xmlns="http://www.w3.org/2000/svg" focusable="false" + aria-hidden="true" role="img" ${className && html`class="${className}"`} > diff --git a/packages/shared/views/icons/briefcase.ts b/packages/shared/views/icons/briefcase.ts index ab0fbee8..5758c7f1 100644 --- a/packages/shared/views/icons/briefcase.ts +++ b/packages/shared/views/icons/briefcase.ts @@ -8,6 +8,7 @@ export const BriefcaseIcon = ({ className }: { className?: string } = {}) => fill="none" xmlns="http://www.w3.org/2000/svg" focusable="false" + aria-hidden="true" role="img" ${className && html`class="${className}"`} > diff --git a/packages/shared/views/icons/burger.ts b/packages/shared/views/icons/burger.ts index f0067ee9..9e1293ab 100644 --- a/packages/shared/views/icons/burger.ts +++ b/packages/shared/views/icons/burger.ts @@ -10,8 +10,8 @@ export const BurgerIcon = () => viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" - aria-hidden="true" focusable="false" + aria-hidden="true" role="img" class="${cls.menuBurger}" > diff --git a/packages/shared/views/icons/close.ts b/packages/shared/views/icons/close.ts index 01c0f1b5..53a1fa16 100644 --- a/packages/shared/views/icons/close.ts +++ b/packages/shared/views/icons/close.ts @@ -9,6 +9,7 @@ export function CloseIcon({ className = '' }: { className?: string }) { fill="none" xmlns="http://www.w3.org/2000/svg" focusable="false" + aria-hidden="true" role="img" class="${className}" > diff --git a/packages/shared/views/icons/down-chevron.ts b/packages/shared/views/icons/down-chevron.ts index d054fdac..94831154 100644 --- a/packages/shared/views/icons/down-chevron.ts +++ b/packages/shared/views/icons/down-chevron.ts @@ -10,6 +10,7 @@ export const DownChevronIcon = ({ fill="none" xmlns="http://www.w3.org/2000/svg" focusable="false" + aria-hidden="true" role="img" ${className && html`class="${className}"`} > diff --git a/packages/shared/views/icons/error.ts b/packages/shared/views/icons/error.ts index 6052d410..361a65e0 100644 --- a/packages/shared/views/icons/error.ts +++ b/packages/shared/views/icons/error.ts @@ -9,6 +9,7 @@ export function ErrorIcon({ className }: { className?: string } = {}) { fill="none" xmlns="http://www.w3.org/2000/svg" focusable="false" + aria-hidden="true" role="img" ${className && html`class="${className}"`} > diff --git a/packages/shared/views/icons/forward-chevron.ts b/packages/shared/views/icons/forward-chevron.ts index e36df03d..8843961b 100644 --- a/packages/shared/views/icons/forward-chevron.ts +++ b/packages/shared/views/icons/forward-chevron.ts @@ -9,8 +9,8 @@ export function ForwardChevron(props?: { className?: string }) { fill="none" xmlns="http://www.w3.org/2000/svg" focusable="false" - role="img" aria-hidden="true" + role="img" ${spreadProps({ class: props?.className, })} diff --git a/packages/shared/views/icons/globe.ts b/packages/shared/views/icons/globe.ts index af3140f3..aa55cc0e 100644 --- a/packages/shared/views/icons/globe.ts +++ b/packages/shared/views/icons/globe.ts @@ -8,6 +8,7 @@ export const GlobeIcon = ({ className }: { className?: string } = {}) => fill="none" xmlns="http://www.w3.org/2000/svg" focusable="false" + aria-hidden="true" role="img" ${className && html`class="${className}"`} > diff --git a/packages/shared/views/icons/home.ts b/packages/shared/views/icons/home.ts index bed672cb..8facdcb6 100644 --- a/packages/shared/views/icons/home.ts +++ b/packages/shared/views/icons/home.ts @@ -1,23 +1,20 @@ import html from '../../html'; -export function HomeIcon({ className }: { className?: string }) { - return html` - + html` - `; -} + + `; diff --git a/packages/shared/views/icons/info-square.ts b/packages/shared/views/icons/info-square.ts index e6f56930..be913a75 100644 --- a/packages/shared/views/icons/info-square.ts +++ b/packages/shared/views/icons/info-square.ts @@ -8,6 +8,7 @@ export const InfoSquareIcon = ({ className }: { className: string }) => fill="none" xmlns="http://www.w3.org/2000/svg" focusable="false" + aria-hidden="true" role="img" ${className && html`class="${className}"`} > diff --git a/packages/shared/views/icons/info.ts b/packages/shared/views/icons/info.ts index 0c82272c..3509cfa9 100644 --- a/packages/shared/views/icons/info.ts +++ b/packages/shared/views/icons/info.ts @@ -6,7 +6,9 @@ export const InfoIcon = ({ className }: { className?: string } = {}) => width="24" height="24" viewBox="0 0 24 24" + focusable="false" aria-hidden="true" + role="img" ${className && html`class="${className}"`} > { - //@TODO: UU better impl - const id = Math.random().toString(36).substring(7); - return html`
  • ${texts.delskjerm_modal_feilmelding}
  • diff --git a/packages/shared/views/skiplink.ts b/packages/shared/views/skiplink.ts new file mode 100644 index 00000000..eda8526e --- /dev/null +++ b/packages/shared/views/skiplink.ts @@ -0,0 +1,17 @@ +import html from 'decorator-shared/html'; +import cls from 'decorator-client/src/styles/skiplink.module.css'; + +export const SkipLink = (text: string) => html` + + ${text} + +`;