@oslokommune/punkt-elements 16.17.3 → 16.19.0

package/src/components/heading/heading.test.ts

@@ -22,6 +22,9 @@ const createHeading = async (headingProps = '', content = 'Test Heading') => {
   return container
 }
 
+const innerHeading = (host: PktHeading): HTMLHeadingElement | null =>
+  host.querySelector('h1, h2, h3, h4, h5, h6')
+
 // Cleanup after each test
 afterEach(() => {
   document.body.innerHTML = ''
@@ -34,7 +37,7 @@ describe('PktHeading', () => {
       const heading = container.querySelector('pkt-heading') as PktHeading
 
       expect(heading).toBeInTheDocument()
-      expect(heading.shadowRoot).toBeTruthy()
+      expect(heading.shadowRoot).toBeNull()
     })
 
     test('renders with default properties', async () => {
@@ -47,19 +50,33 @@ describe('PktHeading', () => {
       expect(heading.align).toBe(undefined)
     })
 
-    test('renders content in shadow DOM slot', async () => {
+    test('renders content inside a semantic heading element', async () => {
       const container = await createHeading('', 'Custom Heading Text')
       const heading = container.querySelector('pkt-heading') as PktHeading
       await heading.updateComplete
 
-      const slot = heading.shadowRoot?.querySelector('slot')
-      expect(slot).toBeInTheDocument()
-      expect(heading.textContent).toContain('Custom Heading Text')
+      const inner = innerHeading(heading)
+      expect(inner).toBeInTheDocument()
+      expect(inner?.tagName).toBe('H2')
+      expect(inner?.textContent).toContain('Custom Heading Text')
+    })
+
+    test('uses the matching h-tag for the given level', async () => {
+      const levels: TPktHeadingLevel[] = [1, 2, 3, 4, 5, 6]
+
+      for (const level of levels) {
+        const container = await createHeading(`level="${level}"`)
+        const heading = container.querySelector('pkt-heading') as PktHeading
+        await heading.updateComplete
+
+        expect(innerHeading(heading)?.tagName).toBe(`H${level}`)
+        document.body.innerHTML = ''
+      }
     })
   })
 
   describe('Properties and attributes', () => {
-    test('applies default properties correctly', async () => {
+    test('applies default reflected attributes correctly', async () => {
       const container = await createHeading()
       const heading = container.querySelector('pkt-heading') as PktHeading
       await heading.updateComplete
@@ -104,7 +121,7 @@ describe('PktHeading', () => {
       await heading.updateComplete
 
       expect(heading.visuallyHidden).toBe(true)
-      expect(heading.hasAttribute('visuallyHidden')).toBe(true)
+      expect(heading.hasAttribute('visuallyhidden')).toBe(true)
     })
 
     test('sets align property correctly', async () => {
@@ -123,17 +140,16 @@ describe('PktHeading', () => {
   })
 
   describe('CSS classes and styling', () => {
-    test('applies default CSS classes', async () => {
+    test('applies pkt-heading class to the inner heading element, not the host', async () => {
       const container = await createHeading()
       const heading = container.querySelector('pkt-heading') as PktHeading
       await heading.updateComplete
 
-      expect(heading.classList.contains('pkt-heading')).toBe(true)
-      expect(heading.classList.contains('pkt-heading--medium')).toBe(false)
-      expect(heading.classList.contains('pkt-heading--start')).toBe(false)
+      expect(heading.classList.contains('pkt-heading')).toBe(false)
+      expect(innerHeading(heading)?.classList.contains('pkt-heading')).toBe(true)
     })
 
-    test('applies size-specific CSS classes', async () => {
+    test('applies size-specific class to the inner heading', async () => {
       const sizes: TPktHeadingSize[] = ['xsmall', 'small', 'medium', 'large', 'xlarge']
 
       for (const size of sizes) {
@@ -141,20 +157,20 @@ describe('PktHeading', () => {
         const heading = container.querySelector('pkt-heading') as PktHeading
         await heading.updateComplete
 
-        expect(heading.classList.contains(`pkt-heading--${size}`)).toBe(true)
+        expect(innerHeading(heading)?.classList.contains(`pkt-heading--${size}`)).toBe(true)
         document.body.innerHTML = ''
       }
     })
 
-    test('applies visually hidden class when enabled', async () => {
+    test('applies visually hidden class to the inner heading when enabled', async () => {
       const container = await createHeading('visuallyHidden="true"')
       const heading = container.querySelector('pkt-heading') as PktHeading
       await heading.updateComplete
 
-      expect(heading.classList.contains('pkt-sr-only')).toBe(true)
+      expect(innerHeading(heading)?.classList.contains('pkt-sr-only')).toBe(true)
     })
 
-    test('applies alignment-specific CSS classes', async () => {
+    test('applies alignment-specific class to the inner heading', async () => {
       const alignments = ['start', 'center', 'end'] as const
 
       for (const align of alignments) {
@@ -162,7 +178,7 @@ describe('PktHeading', () => {
         const heading = container.querySelector('pkt-heading') as PktHeading
         await heading.updateComplete
 
-        expect(heading.classList.contains(`pkt-heading--${align}`)).toBe(true)
+        expect(innerHeading(heading)?.classList.contains(`pkt-heading--${align}`)).toBe(true)
         document.body.innerHTML = ''
       }
     })
@@ -172,55 +188,47 @@ describe('PktHeading', () => {
       const heading = container.querySelector('pkt-heading') as PktHeading
       await heading.updateComplete
 
-      expect(heading.classList.contains('pkt-heading--small')).toBe(true)
-      expect(heading.classList.contains('pkt-heading--center')).toBe(true)
+      expect(innerHeading(heading)?.classList.contains('pkt-heading--small')).toBe(true)
+      expect(innerHeading(heading)?.classList.contains('pkt-heading--center')).toBe(true)
 
-      // Change properties
       heading.size = 'large'
       heading.align = 'end'
       await heading.updateComplete
 
-      expect(heading.classList.contains('pkt-heading--small')).toBe(false)
-      expect(heading.classList.contains('pkt-heading--center')).toBe(false)
-      expect(heading.classList.contains('pkt-heading--large')).toBe(true)
-      expect(heading.classList.contains('pkt-heading--end')).toBe(true)
+      expect(innerHeading(heading)?.classList.contains('pkt-heading--small')).toBe(false)
+      expect(innerHeading(heading)?.classList.contains('pkt-heading--center')).toBe(false)
+      expect(innerHeading(heading)?.classList.contains('pkt-heading--large')).toBe(true)
+      expect(innerHeading(heading)?.classList.contains('pkt-heading--end')).toBe(true)
     })
   })
 
-  describe('ARIA and accessibility attributes', () => {
-    test('sets role and aria-level attributes on connection', async () => {
-      const container = await createHeading('level="3"')
-      const heading = container.querySelector('pkt-heading') as PktHeading
-      await heading.updateComplete
-
-      expect(heading.getAttribute('role')).toBe('heading')
-      expect(heading.getAttribute('aria-level')).toBe('3')
-    })
-
-    test('updates aria-level when level property changes', async () => {
-      const container = await createHeading('level="2"')
+  describe('Dynamic level changes', () => {
+    test('swaps the inner heading tag when the level changes via property', async () => {
+      const container = await createHeading('level="2"', 'Dynamic')
       const heading = container.querySelector('pkt-heading') as PktHeading
       await heading.updateComplete
 
-      expect(heading.getAttribute('aria-level')).toBe('2')
+      expect(innerHeading(heading)?.tagName).toBe('H2')
+      expect(innerHeading(heading)?.textContent).toContain('Dynamic')
 
       heading.level = 4
       await heading.updateComplete
 
-      expect(heading.getAttribute('aria-level')).toBe('4')
+      expect(innerHeading(heading)?.tagName).toBe('H4')
+      expect(innerHeading(heading)?.textContent).toContain('Dynamic')
     })
 
-    test('updates aria-level when level attribute changes', async () => {
+    test('swaps the inner heading tag when the level attribute changes', async () => {
       const container = await createHeading('level="1"')
       const heading = container.querySelector('pkt-heading') as PktHeading
       await heading.updateComplete
 
-      expect(heading.getAttribute('aria-level')).toBe('1')
+      expect(innerHeading(heading)?.tagName).toBe('H1')
 
       heading.setAttribute('level', '5')
       await heading.updateComplete
 
-      expect(heading.getAttribute('aria-level')).toBe('5')
+      expect(innerHeading(heading)?.tagName).toBe('H5')
       expect(heading.level).toBe(5)
     })
   })
@@ -235,28 +243,27 @@ describe('PktHeading', () => {
         await heading.updateComplete
 
         expect(heading.level).toBe(level)
-        expect(heading.getAttribute('aria-level')).toBe(String(level))
+        expect(innerHeading(heading)?.tagName).toBe(`H${level}`)
         document.body.innerHTML = ''
       }
     })
 
-    test('handles invalid levels gracefully', async () => {
+    test('warns and falls back to h2 for invalid levels', async () => {
       const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
 
       const container = await createHeading()
       const heading = container.querySelector('pkt-heading') as PktHeading
       await heading.updateComplete
 
-      // Test invalid level via property
       heading.level = 0 as TPktHeadingLevel
       await heading.updateComplete
-
       expect(consoleSpy).toHaveBeenCalledWith('Invalid heading level: 0. Must be between 1 and 6.')
+      expect(innerHeading(heading)?.tagName).toBe('H2')
 
       heading.level = 7 as TPktHeadingLevel
       await heading.updateComplete
-
       expect(consoleSpy).toHaveBeenCalledWith('Invalid heading level: 7. Must be between 1 and 6.')
+      expect(innerHeading(heading)?.tagName).toBe('H2')
 
       consoleSpy.mockRestore()
     })
@@ -268,13 +275,13 @@ describe('PktHeading', () => {
       const heading = container.querySelector('pkt-heading') as PktHeading
       await heading.updateComplete
 
-      expect(heading.classList.contains('pkt-heading--small')).toBe(true)
+      expect(innerHeading(heading)?.classList.contains('pkt-heading--small')).toBe(true)
 
       heading.size = 'xlarge'
       await heading.updateComplete
 
-      expect(heading.classList.contains('pkt-heading--small')).toBe(false)
-      expect(heading.classList.contains('pkt-heading--xlarge')).toBe(true)
+      expect(innerHeading(heading)?.classList.contains('pkt-heading--small')).toBe(false)
+      expect(innerHeading(heading)?.classList.contains('pkt-heading--xlarge')).toBe(true)
     })
 
     test('updates classes when visuallyHidden property changes', async () => {
@@ -282,12 +289,12 @@ describe('PktHeading', () => {
       const heading = container.querySelector('pkt-heading') as PktHeading
       await heading.updateComplete
 
-      expect(heading.classList.contains('pkt-sr-only')).toBe(false)
+      expect(innerHeading(heading)?.classList.contains('pkt-sr-only')).toBe(false)
 
       heading.visuallyHidden = true
       await heading.updateComplete
 
-      expect(heading.classList.contains('pkt-sr-only')).toBe(true)
+      expect(innerHeading(heading)?.classList.contains('pkt-sr-only')).toBe(true)
     })
 
     test('updates classes when align property changes', async () => {
@@ -295,34 +302,37 @@ describe('PktHeading', () => {
       const heading = container.querySelector('pkt-heading') as PktHeading
       await heading.updateComplete
 
-      expect(heading.classList.contains('pkt-heading--start')).toBe(true)
+      expect(innerHeading(heading)?.classList.contains('pkt-heading--start')).toBe(true)
 
       heading.align = 'center'
       await heading.updateComplete
 
-      expect(heading.classList.contains('pkt-heading--start')).toBe(false)
-      expect(heading.classList.contains('pkt-heading--center')).toBe(true)
+      expect(innerHeading(heading)?.classList.contains('pkt-heading--start')).toBe(false)
+      expect(innerHeading(heading)?.classList.contains('pkt-heading--center')).toBe(true)
     })
   })
 
   describe('Content rendering', () => {
-    test('renders simple text content', async () => {
+    test('renders simple text content inside the h-tag', async () => {
       const container = await createHeading('', 'Simple Heading')
       const heading = container.querySelector('pkt-heading') as PktHeading
+      await heading.updateComplete
 
-      expect(heading.textContent).toContain('Simple Heading')
+      expect(innerHeading(heading)?.textContent).toContain('Simple Heading')
     })
 
-    test('renders HTML content safely', async () => {
+    test('renders nested HTML content inside the h-tag', async () => {
       const container = await createHeading('', '<strong>Bold</strong> heading')
       const heading = container.querySelector('pkt-heading') as PktHeading
+      await heading.updateComplete
 
-      expect(heading.innerHTML).toContain('<strong>Bold</strong>')
-      expect(heading.innerHTML).toContain('heading')
-      expect(heading.querySelector('strong')).toBeInTheDocument()
+      const inner = innerHeading(heading)
+      expect(inner?.querySelector('strong')).toBeInTheDocument()
+      expect(inner?.textContent).toContain('Bold')
+      expect(inner?.textContent).toContain('heading')
     })
 
-    test('renders multiple child elements', async () => {
+    test('renders multiple child elements inside the h-tag', async () => {
       const container = document.createElement('div')
       container.innerHTML = `
         <pkt-heading>
@@ -336,10 +346,11 @@ describe('PktHeading', () => {
       const heading = container.querySelector('pkt-heading') as PktHeading
       await heading.updateComplete
 
-      expect(heading.querySelector('span')).toBeInTheDocument()
-      expect(heading.querySelector('em')).toBeInTheDocument()
-      expect(heading.textContent).toContain('Part 1')
-      expect(heading.textContent).toContain('Part 2')
+      const inner = innerHeading(heading)
+      expect(inner?.querySelector('span')).toBeInTheDocument()
+      expect(inner?.querySelector('em')).toBeInTheDocument()
+      expect(inner?.textContent).toContain('Part 1')
+      expect(inner?.textContent).toContain('Part 2')
     })
   })
 
@@ -423,11 +434,11 @@ describe('PktHeading', () => {
       await Promise.all([...headings].map((h) => h.updateComplete))
 
       expect(headings[0].level).toBe(1)
-      expect(headings[0].size).toBe('xlarge')
+      expect(innerHeading(headings[0])?.tagName).toBe('H1')
       expect(headings[1].level).toBe(2)
-      expect(headings[1].size).toBe('large')
+      expect(innerHeading(headings[1])?.tagName).toBe('H2')
       expect(headings[2].level).toBe(3)
-      expect(headings[2].size).toBe('medium')
+      expect(innerHeading(headings[2])?.tagName).toBe('H3')
     })
 
     test('maintains independence between multiple instances', async () => {
@@ -443,12 +454,10 @@ describe('PktHeading', () => {
       const heading2 = container.querySelector('#h2') as PktHeading
       await Promise.all([heading1.updateComplete, heading2.updateComplete])
 
-      // Change properties on first heading
       heading1.size = 'xlarge'
       heading1.align = 'center'
       await heading1.updateComplete
 
-      // Verify second heading is unaffected
       expect(heading2.size).toBe('small')
       expect(heading2.align).toBe(undefined)
       expect(heading1.size).toBe('xlarge')

package/src/components/heading/heading.ts

@@ -1,5 +1,6 @@
-import { PktShadowElement } from '@/base-elements/element'
-import { html, PropertyValues } from 'lit'
+import { PktElementWithSlot } from '@/base-elements/element-with-slot'
+import { slotContent } from '@/directives/slot-content'
+import { html, PropertyValues, TemplateResult } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 import type { THeadingLevel, THeadingSize, THeadingWeight } from 'shared-types'
 
@@ -15,7 +16,7 @@ export interface IPktHeading {
   align?: 'start' | 'center' | 'end'
 }
 
-export class PktHeading extends PktShadowElement<IPktHeading> implements IPktHeading {
+export class PktHeading extends PktElementWithSlot<IPktHeading> implements IPktHeading {
   @property({ type: String, reflect: true }) size: TPktHeadingSize | undefined = undefined
   @property({ type: Number, reflect: true }) level: TPktHeadingLevel = 2
   @property({ type: String, reflect: true }) weight: TPktHeadingWeight | undefined = undefined
@@ -23,32 +24,13 @@ export class PktHeading extends PktShadowElement<IPktHeading> implements IPktHea
   @property({ type: String, reflect: true }) align: 'start' | 'center' | 'end' | undefined =
     undefined
 
-  connectedCallback(): void {
-    super.connectedCallback()
-    this.setAttribute('role', 'heading')
-    this.setAttribute('aria-level', String(this.level))
-
-    this.updateHostClasses()
-  }
-
-  attributeChangedCallback(name: string, _old: string | null, value: string | null): void {
-    super.attributeChangedCallback(name, _old, value)
-    if (name === 'level' && value) {
-      this.setLevel(Number(value) as TPktHeadingLevel)
-    }
-    if (name === 'visuallyHidden') {
-      this.visuallyHidden = value !== null && value !== 'false'
-    }
-    if (name === 'size' || name === 'visuallyHidden' || name === 'align' || name === 'weight') {
-      this.updateHostClasses()
-    }
-  }
-
   protected updated(_changedProperties: PropertyValues): void {
     super.updated(_changedProperties)
-    if (_changedProperties.has('level')) {
-      this.setLevel(this.level)
 
+    if (_changedProperties.has('level')) {
+      if (this.level < 1 || this.level > 6) {
+        console.warn(`Invalid heading level: ${this.level}. Must be between 1 and 6.`)
+      }
       if (!this.hasAttribute('size')) {
         this.size = this.defaultSizeForLevel
       }
@@ -56,29 +38,9 @@ export class PktHeading extends PktShadowElement<IPktHeading> implements IPktHea
         this.weight = this.defaultWeightForLevel
       }
     }
-    if (
-      !this.hasAttribute('size') &&
-      (_changedProperties.has('level') || this.size === undefined)
-    ) {
-      this.size = this.defaultSizeForLevel
-    }
-
-    if (
-      _changedProperties.has('size') ||
-      _changedProperties.has('visuallyHidden') ||
-      _changedProperties.has('align') ||
-      _changedProperties.has('weight')
-    ) {
-      this.updateHostClasses()
-    }
-  }
 
-  private setLevel(level: TPktHeadingLevel): void {
-    if (level >= 1 && level <= 6) {
-      this.level = level
-      this.setAttribute('aria-level', String(level))
-    } else {
-      console.warn(`Invalid heading level: ${level}. Must be between 1 and 6.`)
+    if (!this.hasAttribute('size') && this.size === undefined) {
+      this.size = this.defaultSizeForLevel
     }
   }
 
@@ -93,7 +55,6 @@ export class PktHeading extends PktShadowElement<IPktHeading> implements IPktHea
       case 4:
         return 'small'
       case 5:
-        return 'xsmall'
       case 6:
         return 'xsmall'
       default:
@@ -104,15 +65,11 @@ export class PktHeading extends PktShadowElement<IPktHeading> implements IPktHea
   private get defaultWeightForLevel(): TPktHeadingWeight {
     switch (this.level) {
       case 1:
-        return 'regular'
       case 2:
         return 'regular'
       case 3:
-        return 'medium'
       case 4:
-        return 'medium'
       case 5:
-        return 'medium'
       case 6:
         return 'medium'
       default:
@@ -120,34 +77,39 @@ export class PktHeading extends PktShadowElement<IPktHeading> implements IPktHea
     }
   }
 
-  private updateHostClasses() {
-    // Remove all possible classes first
-    this.classList.remove(
+  private get headingClasses(): string {
+    return [
       'pkt-heading',
-      'pkt-heading--xsmall',
-      'pkt-heading--small',
-      'pkt-heading--medium',
-      'pkt-heading--large',
-      'pkt-heading--xlarge',
-      'pkt-sr-only',
-      'pkt-heading--start',
-      'pkt-heading--center',
-      'pkt-heading--end',
-      'pkt-heading--light',
-      'pkt-heading--regular',
-      'pkt-heading--medium',
-      'pkt-heading--bold',
-    )
-    // Add current classes
-    this.classList.add('pkt-heading')
-    if (this.size) this.classList.add(`pkt-heading--${this.size}`)
-    if (this.weight) this.classList.add(`pkt-heading--fw-${this.weight}`)
-    if (this.visuallyHidden) this.classList.add('pkt-sr-only')
-    if (this.align) this.classList.add(`pkt-heading--${this.align}`)
+      this.size && `pkt-heading--${this.size}`,
+      this.weight && `pkt-heading--fw-${this.weight}`,
+      this.visuallyHidden && 'pkt-sr-only',
+      this.align && `pkt-heading--${this.align}`,
+    ]
+      .filter(Boolean)
+      .join(' ')
   }
 
-  render() {
-    return html`<slot></slot>`
+  render(): TemplateResult {
+    const classes = this.headingClasses
+    const content = slotContent(this)
+    const safeLevel = this.level >= 1 && this.level <= 6 ? this.level : 2
+
+    switch (safeLevel) {
+      case 1:
+        return html`<h1 class=${classes}>${content}</h1>`
+      case 2:
+        return html`<h2 class=${classes}>${content}</h2>`
+      case 3:
+        return html`<h3 class=${classes}>${content}</h3>`
+      case 4:
+        return html`<h4 class=${classes}>${content}</h4>`
+      case 5:
+        return html`<h5 class=${classes}>${content}</h5>`
+      case 6:
+        return html`<h6 class=${classes}>${content}</h6>`
+      default:
+        return html`<h2 class=${classes}>${content}</h2>`
+    }
   }
 }
 

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', () => {