From 1d5ecb204e5679bfb6c1a161053dac06b81e834e Mon Sep 17 00:00:00 2001
From: Dan Leech <dan.leech@defra.gov.uk>
Date: Mon, 1 Jun 2026 14:26:28 +0100
Subject: [PATCH] Strip html tags from viewport aria descrioption

---
 src/App/components/Hints/Hints.jsx      | 3 ++-
 src/App/components/Hints/Hints.test.jsx | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/App/components/Hints/Hints.jsx b/src/App/components/Hints/Hints.jsx
index ffe414f3..dda4c6f8 100644
--- a/src/App/components/Hints/Hints.jsx
+++ b/src/App/components/Hints/Hints.jsx
@@ -3,6 +3,7 @@ import { createPortal } from 'react-dom'
 import { useConfig } from '../../store/configContext.js'
 import { useService } from '../../store/serviceContext.js'
 import { useApp } from '../../store/appContext.js'
+import { htmlToPlainText } from '../../../utils/htmlToPlainText.js'
 
 /**
  * Renders the active keyboard hint as a toast portaled into im-o-app__main.
@@ -44,7 +45,7 @@ export const Hints = () => {
       <div
         id={`${id}-keyboard-desc`}
         className='im-u-visually-hidden'
-        dangerouslySetInnerHTML={{ __html: keyboardHintText }}
+        dangerouslySetInnerHTML={{ __html: htmlToPlainText(keyboardHintText) }}
       />
     </div>,
     layoutRefs.mainRef.current
diff --git a/src/App/components/Hints/Hints.test.jsx b/src/App/components/Hints/Hints.test.jsx
index a0cb0f55..b3ee2bcf 100644
--- a/src/App/components/Hints/Hints.test.jsx
+++ b/src/App/components/Hints/Hints.test.jsx
@@ -49,7 +49,7 @@ describe('Hints — rendering', () => {
     render(<Hints />)
     const desc = mainEl.querySelector('#test-map-keyboard-desc')
     expect(desc).toBeTruthy()
-    expect(desc.innerHTML).toBe('<kbd>Shift</kbd> + <kbd>?</kbd>')
+    expect(desc.innerHTML).toBe('Shift + ?')
   })
 
   it('renders no hint content when there is no active hint', () => {