@oslokommune/punkt-elements 16.17.2 → 16.18.0

package/src/components/header/header-service.ts

@@ -455,7 +455,7 @@ export class PktHeaderService extends PktElementWithSlot<IPktHeader> implements
     // If serviceLink is a non-empty string, render as link (but still dispatch event on click)
     if (this.serviceLink && typeof this.serviceLink === 'string') {
       return html`
-        <span class="pkt-header-service__service-name">
+        <span class="pkt-header-service__service-name" translate="no">
           <pkt-link
             href=${this.serviceLink}
             class="pkt-header-service__service-link"
@@ -470,7 +470,7 @@ export class PktHeaderService extends PktElementWithSlot<IPktHeader> implements
     // If service-link attribute is present but empty, render as clickable button
     if (this.hasAttribute('service-link')) {
       return html`
-        <span class="pkt-header-service__service-name">
+        <span class="pkt-header-service__service-name" translate="no">
           <button
             class="pkt-link-button pkt-link pkt-header-service__service-link"
             @click=${this.handleServiceClick}
@@ -483,7 +483,7 @@ export class PktHeaderService extends PktElementWithSlot<IPktHeader> implements
 
     // No link - just render the text
     return html`
-      <span class="pkt-header-service__service-name" @click=${this.handleServiceClick}>
+      <span class="pkt-header-service__service-name" translate="no" @click=${this.handleServiceClick}>
         <span class="pkt-header-service__service-link">${this.serviceName}</span>
       </span>
     `
@@ -642,7 +642,7 @@ export class PktHeaderService extends PktElementWithSlot<IPktHeader> implements
           @click=${() => this.handleMenuToggle('user')}
         >
           <span class="pkt-sr-only">Brukermeny: </span>
-          <span>${this.representing?.name || this.user.name}</span>
+          <span translate="no">${this.representing?.name || this.user.name}</span>
         </pkt-button>
         ${this.openMenu === 'user' && this.user
           ? html`

package/src/components/header/types.ts

@@ -1,5 +1,6 @@
 import { PktIconName } from '@oslokommune/punkt-assets/dist/icons/icon'
-import { booleanishConverter } from 'shared-types'
+import { booleanishConverter, convertUserMenuItem as sharedConvertUserMenuItem } from 'shared-types'
+/* eslint-disable no-duplicate-imports */
 import type {
   Booleanish,
   User as SharedUser,
@@ -12,7 +13,6 @@ import type {
   THeaderPosition,
   THeaderScrollBehavior,
 } from 'shared-types'
-import { convertUserMenuItem as sharedConvertUserMenuItem } from 'shared-types'
 
 export type {
   Booleanish,

package/src/components/icon/icon.test.ts

@@ -16,6 +16,8 @@ expect.extend(toHaveNoViolations)
 export interface IconTestConfig extends BaseTestConfig {
   name?: string
   path?: string
+  'aria-hidden'?: string
+  'aria-label'?: string
 }
 
 // Use shared framework
@@ -326,6 +328,105 @@ describe('PktIcon', () => {
       const results = await axe(container)
       expect(results).toHaveNoViolations()
     })
+
+    describe('aria-hidden', () => {
+      test('defaults to true on the SVG', async () => {
+        const { icon } = await createIconTest({ name: 'arrow-right' })
+        await icon.updateComplete
+        await new Promise((resolve) => setTimeout(resolve, 0))
+        await icon.updateComplete
+
+        const svg = icon.querySelector('svg')
+        expect(svg?.getAttribute('aria-hidden')).toBe('true')
+        expect(svg?.getAttribute('aria-label')).toBeNull()
+      })
+
+      test('aria-hidden="false" attribute renders aria-hidden="false" on the SVG with name fallback as aria-label', async () => {
+        const { icon } = await createIconTest({
+          name: 'arrow-right',
+          'aria-hidden': 'false',
+        })
+        await icon.updateComplete
+        await new Promise((resolve) => setTimeout(resolve, 0))
+        await icon.updateComplete
+
+        const svg = icon.querySelector('svg')
+        expect(svg?.getAttribute('aria-hidden')).toBe('false')
+        expect(svg?.getAttribute('aria-label')).toBe('arrow-right')
+      })
+
+      test('aria-hidden="true" attribute renders aria-hidden="true" on the SVG', async () => {
+        const { icon } = await createIconTest({
+          name: 'arrow-right',
+          'aria-hidden': 'true',
+        })
+        await icon.updateComplete
+        await new Promise((resolve) => setTimeout(resolve, 0))
+        await icon.updateComplete
+
+        const svg = icon.querySelector('svg')
+        expect(svg?.getAttribute('aria-hidden')).toBe('true')
+        expect(svg?.getAttribute('aria-label')).toBeNull()
+      })
+
+      test('updates the SVG when the ariaHidden property changes', async () => {
+        const { icon } = await createIconTest({ name: 'arrow-right' })
+        await icon.updateComplete
+        await new Promise((resolve) => setTimeout(resolve, 0))
+        await icon.updateComplete
+
+        icon.ariaHidden = 'false'
+        await icon.updateComplete
+
+        const svg = icon.querySelector('svg')
+        expect(svg?.getAttribute('aria-hidden')).toBe('false')
+      })
+    })
+
+    describe('aria-label', () => {
+      test('aria-label alone makes aria-hidden default to false on the SVG', async () => {
+        const { icon } = await createIconTest({
+          name: 'arrow-right',
+          'aria-label': 'Gå til forsiden',
+        })
+        await icon.updateComplete
+        await new Promise((resolve) => setTimeout(resolve, 0))
+        await icon.updateComplete
+
+        const svg = icon.querySelector('svg')
+        expect(svg?.getAttribute('aria-hidden')).toBe('false')
+        expect(svg?.getAttribute('aria-label')).toBe('Gå til forsiden')
+      })
+
+      test('aria-label plus explicit aria-hidden="true" keeps the icon hidden and omits the label', async () => {
+        const { icon } = await createIconTest({
+          name: 'arrow-right',
+          'aria-label': 'Lukk',
+          'aria-hidden': 'true',
+        })
+        await icon.updateComplete
+        await new Promise((resolve) => setTimeout(resolve, 0))
+        await icon.updateComplete
+
+        const svg = icon.querySelector('svg')
+        expect(svg?.getAttribute('aria-hidden')).toBe('true')
+        expect(svg?.getAttribute('aria-label')).toBeNull()
+      })
+
+      test('setting ariaLabel via JS flips aria-hidden to false on the SVG', async () => {
+        const { icon } = await createIconTest({ name: 'arrow-right' })
+        await icon.updateComplete
+        await new Promise((resolve) => setTimeout(resolve, 0))
+        await icon.updateComplete
+
+        icon.ariaLabel = 'Lukk'
+        await icon.updateComplete
+
+        const svg = icon.querySelector('svg')
+        expect(svg?.getAttribute('aria-hidden')).toBe('false')
+        expect(svg?.getAttribute('aria-label')).toBe('Lukk')
+      })
+    })
   })
 
   describe('Integration scenarios', () => {

package/src/components/icon/icon.ts

@@ -73,7 +73,7 @@ const downloadIconOrGetFromCache = async (
   return errorSvg
 }
 
-type Props = ElementProps<PktIcon, 'path' | 'name'>
+type Props = ElementProps<PktIcon, 'path' | 'name' | 'ariaHidden' | 'ariaLabel'>
 
 export class PktIcon extends PktElement<Props> {
   @property({ type: String, reflect: false })
@@ -82,12 +82,38 @@ export class PktIcon extends PktElement<Props> {
   @property({ type: String, reflect: true })
   name: PktIconName = ''
 
+  @property({
+    type: String,
+    attribute: 'aria-hidden',
+    reflect: true,
+  })
+  override ariaHidden: string | null = null
+
+  @property({
+    type: String,
+    attribute: 'aria-label',
+    reflect: true,
+  })
+  override ariaLabel: string | null = null
+
   @property({ type: SVGElement })
   private icon: ReturnType<typeof unsafeSVG> = unsafeSVG(errorSvg)
 
   @property({ type: Array, noAccessor: true })
   private _updatedProps: string[] = []
 
+  private get effectiveAriaHidden(): boolean {
+    if (this.ariaHidden !== null && this.ariaHidden !== undefined) {
+      return this.ariaHidden === '' || this.ariaHidden === 'true'
+    }
+    return !this.ariaLabel
+  }
+
+  private get effectiveAriaLabel(): string | null {
+    if (this.effectiveAriaHidden) return null
+    return this.ariaLabel || this.name || null
+  }
+
   connectedCallback(): void {
     super.connectedCallback()
     this.classList.add('pkt-icon')
@@ -102,6 +128,19 @@ export class PktIcon extends PktElement<Props> {
     if (_changedProperties.has('name') || _changedProperties.has('path')) {
       this.getIcon(this.name)
     }
+    this.applyAriaToSvg()
+  }
+
+  private applyAriaToSvg() {
+    const svg = this.querySelector('svg')
+    if (!svg) return
+    svg.setAttribute('aria-hidden', String(this.effectiveAriaHidden))
+    const label = this.effectiveAriaLabel
+    if (label) {
+      svg.setAttribute('aria-label', label)
+    } else {
+      svg.removeAttribute('aria-label')
+    }
   }
 
   protected async getIcon(name: PktIconName = '') {

package/src/components/modal/modal.ts

@@ -6,6 +6,12 @@ import { slotContent } from '@/directives/slot-content'
 import { ref } from 'lit/directives/ref.js'
 import { Ref, createRef } from 'lit/directives/ref.js'
 import { TPktSize } from '@/types/size'
+import {
+  acquireModalScrollLock,
+  createModalScrollLockToken,
+  releaseModalScrollLock,
+  type ModalScrollLockToken,
+} from 'shared-utils/modal-scroll-lock'
 import specs from 'componentSpecs/modal.json'
 import '@/components/icon'
 
@@ -40,6 +46,8 @@ export class PktModal extends PktElementWithSlot implements IPktModal {
 
   dialogRef: Ref<HTMLDialogElement> = createRef()
 
+  private _scrollLockToken: ModalScrollLockToken = createModalScrollLockToken()
+
   @state() _isOpen: boolean = false
 
   constructor() {
@@ -57,6 +65,8 @@ export class PktModal extends PktElementWithSlot implements IPktModal {
     super.disconnectedCallback()
     document.removeEventListener('keydown', this.handleKeyDown)
     document.removeEventListener('click', this.handleBackdropClick)
+    // Rydd opp scroll-lock hvis elementet fjernes fra DOM mens det er åpent
+    releaseModalScrollLock(this._scrollLockToken)
   }
 
   protected updated(changedProperties: PropertyValues): void {
@@ -112,7 +122,7 @@ export class PktModal extends PktElementWithSlot implements IPktModal {
     this._isOpen = false
     this.open = false
 
-    document.body.classList.remove('pkt-modal--open')
+    releaseModalScrollLock(this._scrollLockToken)
 
     // Scroll to the opener element if it's not in the viewport
     const openerElement = document.activeElement as HTMLElement
@@ -133,7 +143,7 @@ export class PktModal extends PktElementWithSlot implements IPktModal {
     this.open = true
     this.dialogRef.value?.showModal()
 
-    document.body.classList.add('pkt-modal--open')
+    acquireModalScrollLock(this._scrollLockToken)
     this.dispatchEvent(
       new CustomEvent('showModal', { detail: { origin: event }, bubbles: true, composed: true }),
     )

package/dist/icon-Dr8sfT2X.cjs

@@ -1 +0,0 @@
-const e=require(`./element-DjtxO-1r.cjs`),t=require(`./directive-CJ2giQBZ.cjs`);var n=class extends t.n{constructor(n){if(super(n),this.it=e.l,n.type!==t.r.CHILD)throw Error(this.constructor.directiveName+`() can only be used in child bindings`)}render(t){if(t===e.l||t==null)return this._t=void 0,this.it=t;if(t===e.u)return t;if(typeof t!=`string`)throw Error(this.constructor.directiveName+`() called with a non-string value`);if(t===this.it)return this._t;this.it=t;let n=[t];return n.raw=n,this._t={_$litType$:this.constructor.resultType,strings:n,values:[]}}};n.directiveName=`unsafeHTML`,n.resultType=1;var r=t.t(n),i=class extends n{};i.directiveName=`unsafeSVG`,i.resultType=2;var a=t.t(i),o=`https://punkt-cdn.oslo.kommune.no/latest/icons/`;typeof window<`u`&&(window.pktFetch=window.pktFetch===void 0?fetch:window.pktFetch,window.pktIconPath=window.pktIconPath||o);var s=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"></svg>`,c={},l=2,u=1500,d=typeof Storage<`u`&&typeof sessionStorage<`u`,f=e=>window.pktFetch(e).then(t=>{if(!t.ok)throw Error(`Missing icon: `+e);return t.text()}),p=async(e,t=l)=>{try{return await f(e)}catch{return t>0?(await new Promise(e=>setTimeout(e,u)),p(e,t-1)):(console.error(`Failed to fetch icon: `+e),s)}},m=async(e,t)=>{let n=t+e+`.svg`;return d&&sessionStorage.getItem(n)?sessionStorage.getItem(n):n in c?c[n]:typeof window<`u`&&typeof window.pktFetch==`function`?(c[n]=p(n).then(e=>(e!==s&&d&&sessionStorage.setItem(n,e),delete c[n],e)),c[n]):s},h=class extends e.t{constructor(...e){super(...e),this.path=typeof window<`u`?window.pktIconPath:o,this.name=``,this.icon=a(s),this._updatedProps=[]}connectedCallback(){super.connectedCallback(),this.classList.add(`pkt-icon`)}async attributeChangedCallback(e,t,n){super.attributeChangedCallback(e,t,n),(e===`name`||e===`path`)&&this.getIcon(this.name)}async updated(e){super.updated(e),(e.has(`name`)||e.has(`path`))&&this.getIcon(this.name)}async getIcon(e=``){if(this._updatedProps.length>0){this.path||=typeof window<`u`?window.pktIconPath:o;try{this.icon=a(await m(this.name||``,this.path))}catch{this.icon=a(s)}this._updatedProps=[]}else this._updatedProps.includes(e)||this._updatedProps.push(e)}render(){return e.d`${this.name&&this.icon}`}};e.r([e.s({type:String,reflect:!1})],h.prototype,`path`,void 0),e.r([e.s({type:String,reflect:!0})],h.prototype,`name`,void 0),e.r([e.s({type:SVGElement})],h.prototype,`icon`,void 0),e.r([e.s({type:Array,noAccessor:!0})],h.prototype,`_updatedProps`,void 0);try{e.c(`pkt-icon`)(h)}catch{console.warn(`Forsøker å definere <pkt-icon>, men den er allerede definert`)}var g=h;Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return h}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return r}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return g}});

package/dist/modal-C_LxgxzC.cjs

@@ -1,35 +0,0 @@
-const e=require(`./element-DjtxO-1r.cjs`),t=require(`./class-map-CJ-msbHs.cjs`),n=require(`./element-with-slot-CWoTGA1B.cjs`);require(`./icon-Dr8sfT2X.cjs`);const r=require(`./ref-BaJ0mBT_.cjs`);var i={name:`pkt-modal`,react:`PktModal`,"css-class":`pkt-modal`,isElement:!0,isPureReact:!0,events:{"background-click":{description:`Event som trigges når bakgrunnen trykkes på`},close:{description:`Event som trigges når meldingsboksen lukkes`}},props:{open:{name:`Åpen`,description:`Deklarativ styring av modalens åpen/lukket-tilstand. Kan brukes i stedet for showModal()/close()-metodene.`,type:`boolean`,category:`tech`,default:!1},headingText:{name:`Heading text`,description:`Heading tekst på modalen`,type:`string`,category:`contents`},hideCloseButton:{name:`Gjem 'Lukk'-knapp`,description:`Gjemmer lukkeknappen. Dersom denne er satt til true, vil ikke lukkeknappen vises, og dermed er det viktig at man tilbyr en annen måte som f.eks. en knapp for å lukke modalen på.`,type:`boolean`,category:`ui`,default:!1},closeOnBackdropClick:{name:`Lukk modalen når bakgrunnen trykkes på`,description:`Lukk modalen når bakgrunnen trykkes på`,type:`boolean`,category:`tech`,default:!1},closeButtonSkin:{name:`Stil på lukkeknappen`,description:`Stil på lukkeknappen`,type:[`blue`,`yellow-filled`],category:`ui`,default:`blue`},size:{name:`Størrelse`,description:`Størrelsen på modalen`,type:[`small`,`medium`,`large`,`fit-content`],category:`ui`,default:`medium`},variant:{name:`Variant`,description:`Standard dialog eller skuff`,type:[`dialog`,`drawer`],category:`ui`,default:`dialog`},drawerPosition:{name:`Skuffposisjon`,description:`Posisjonen til skuffen`,type:[`left`,`right`],category:`ui`,default:`right`},transparentBackdrop:{name:`Gjennomsiktig bakgrunn`,description:`Bakgrunnen er gjennomsiktig`,type:`boolean`,category:`ui`,default:!1},removePadding:{name:`Fjern padding`,description:`Fjerner paddingen rundt innholdet i modalen`,type:`boolean`,category:`ui`,default:!1}},slots:{default:{description:`Innholdet i meldingen. Her tilbyr vi støtteklasser for å style 1-3 knapper i modalen.`}}},a=class extends n.t{constructor(){super(),this.open=!1,this.headingText=``,this.removePadding=!1,this.hideCloseButton=i.props.hideCloseButton.default,this.closeOnBackdropClick=i.props.closeOnBackdropClick.default,this.closeButtonSkin=`blue`,this.size=i.props.size.default,this.variant=`dialog`,this.drawerPosition=`right`,this.transparentBackdrop=!1,this.dialogRef=r.t(),this._isOpen=!1,this.close=(e,t=!1)=>{if(!this._isOpen)return;this._isOpen=!1,this.open=!1,document.body.classList.remove(`pkt-modal--open`);let n=document.activeElement;n&&!this.isElementInViewport(n)&&n.scrollIntoView({behavior:`smooth`,block:`nearest`}),this.dispatchEvent(new CustomEvent(`close`,{detail:{origin:e},bubbles:!0,composed:!0})),t||this.dialogRef.value?.close(),this.requestUpdate()},this.showModal=(e=null)=>{this._isOpen=!0,this.open=!0,this.dialogRef.value?.showModal(),document.body.classList.add(`pkt-modal--open`),this.dispatchEvent(new CustomEvent(`showModal`,{detail:{origin:e},bubbles:!0,composed:!0})),this.requestUpdate()},this._isOpen=!1}async connectedCallback(){super.connectedCallback(),document.addEventListener(`keydown`,this.handleKeyDown.bind(this)),document.addEventListener(`click`,this.handleBackdropClick.bind(this))}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener(`keydown`,this.handleKeyDown),document.removeEventListener(`click`,this.handleBackdropClick)}updated(e){super.updated(e),e.has(`open`)&&(this.open&&!this._isOpen?this.showModal():!this.open&&this._isOpen&&this.close(new Event(`close`),!1))}async firstUpdated(e){super.firstUpdated(e),this.dialogRef.value&&!window.HTMLDialogElement&&!this.dialogRef.value.showModal&&(`document`in window&&`createElement`in document&&(await Promise.resolve().then(()=>require(`./dialog-polyfill.esm-BnAQvMQO.cjs`)).then(e=>e.default)).registerDialog(this.dialogRef.value),this.dialogRef.value.addEventListener(`close`,()=>{this.close(new Event(`close`),!0)}))}handleKeyDown(e){e.key===`Escape`&&this.close(e)}handleBackdropClick(e){this.closeOnBackdropClick&&e.target===this.dialogRef?.value&&this.close(e)}isElementInViewport(e){let t=e.getBoundingClientRect();return t.top>=0&&t.left>=0&&t.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&t.right<=(window.innerWidth||document.documentElement.clientWidth)}render(){let i={"pkt-modal":!0,"pkt-modal--removePadding":this.removePadding??!1,"pkt-modal--noHeadingText":this.headingText===``||this.headingText===void 0,"pkt-modal--noShadow":this.closeButtonSkin===`yellow-filled`,"pkt-modal--transparentBackdrop":this.transparentBackdrop??!1,[`pkt-modal--${this.size}`]:this.size!==void 0,[`pkt-modal__${this.variant}`]:this.variant!==void 0,[`pkt-modal__drawer--${this.drawerPosition}`]:this.variant===`drawer`},a={"pkt-modal__headingText":!0,"pkt-txt-24":!0},o={"pkt-modal__content":!0,"pkt-txt-18-light":!0},s=this.closeButtonSkin===`blue`,c={"pkt-modal__closeButton":!0,[`pkt-modal__closeButton--${this.closeButtonSkin}`]:!0};return e.d`
-      <dialog
-        class=${t.t(i)}
-        ${r.n(this.dialogRef)}
-        aria-labelledby=${this.headingText?`pkt-modal__headingText`:e.l}
-        aria-describedby="pkt-modal__content"
-        @close=${e=>this.close(e,!0)}
-      >
-        <div class="pkt-modal__wrapper">
-          ${this.headingText||!this.hideCloseButton?e.d`<div class="pkt-modal__header">
-                <div class="pkt-modal__header-background"></div>
-                ${this.headingText?e.d`<h1 id="pkt-modal__headingText" class=${t.t(a)}>
-                      ${this.headingText}
-                    </h1>`:e.d`<div class="pkt-modal__headingText"></div>`}
-                ${this.hideCloseButton?e.d`<div class="pkt-modal__noCloseButton"></div>`:e.d`<div class="${t.t(c)}">
-                      <pkt-button
-                        @click=${e=>this.close(e)}
-                        aria-label="close"
-                        iconname="close"
-                        variant="icon-only"
-                        size="medium"
-                        skin=${s?`tertiary`:`primary`}
-                      >
-                        Lukk
-                      </pkt-button>
-                    </div>`}
-              </div>`:e.l}
-          <div class="pkt-modal__container">
-            <div id="pkt-modal__content" class=${t.t(o)}>
-              ${n.n(this)}
-            </div>
-          </div>
-        </div>
-      </dialog>
-    `}};e.r([e.s({type:Boolean,reflect:!0})],a.prototype,`open`,void 0),e.r([e.s({type:String})],a.prototype,`headingText`,void 0),e.r([e.s({type:Boolean})],a.prototype,`removePadding`,void 0),e.r([e.s({type:Boolean})],a.prototype,`hideCloseButton`,void 0),e.r([e.s({type:Boolean})],a.prototype,`closeOnBackdropClick`,void 0),e.r([e.s({type:String})],a.prototype,`closeButtonSkin`,void 0),e.r([e.s({type:String})],a.prototype,`size`,void 0),e.r([e.s({type:String})],a.prototype,`variant`,void 0),e.r([e.s({type:String})],a.prototype,`drawerPosition`,void 0),e.r([e.s({type:Boolean})],a.prototype,`transparentBackdrop`,void 0),e.r([e.o()],a.prototype,`_isOpen`,void 0);try{e.c(`pkt-modal`)(a)}catch{console.warn(`Forsøker å definere <pkt-modal>, men den er allerede definert`)}var o=a;Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return a}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return o}});