Merge pull request #7748 from nextcloud-libraries/fix/NcRichText--h4

fix(NcRichText): start heading from h4

Author: ShGKme

src/components/NcRichText/NcRichText.vue

@@ -546,6 +546,13 @@ export default {
 			delete props.children
 
 			if (!String(type).startsWith('#')) {
+				// <h1>..<h3> headings are used on the page for semantic structure
+				// Using them for user content leads to accessibility issues
+				// Levelling down headings to start from <h4>
+				if (['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(String(type))) {
+					type = `h${Math.min(+String(type)[1] + 3, 6)}`
+				}
+
 				let nestedNode = null
 				if (this.useExtendedMarkdown) {
 					if (String(type) === 'code' && !rehypeHighlight.value
@@ -681,8 +688,16 @@ export default {
 		font-weight: bold;
 	}
 
-	h1 {
-		font-size: 30px;
+	h4 {
+		font-size: 20px;
+	}
+
+	h5 {
+		font-size: 18px;
+	}
+
+	h6 {
+		font-size: 15px;
 	}
 
 	ul, ol {

tests/component/components/NcRichText/markown-rendering.spec.ts

@@ -110,12 +110,12 @@ test.describe('headings', () => {
 			},
 		})
 
-		await expect(component.getByRole('heading', { level: 1 })).toHaveText('heading 1')
-		await expect(component.getByRole('heading', { level: 2 })).toHaveText('heading 2')
-		await expect(component.getByRole('heading', { level: 3 })).toHaveText('heading 3')
-		await expect(component.getByRole('heading', { level: 4 })).toHaveText('heading 4')
-		await expect(component.getByRole('heading', { level: 5 })).toHaveText('heading 5')
-		await expect(component.getByRole('heading', { level: 6 })).toHaveText('heading 6')
+		await expect(component.getByText('heading 1')).toHaveJSProperty('tagName', 'H4')
+		await expect(component.getByText('heading 2')).toHaveJSProperty('tagName', 'H5')
+		await expect(component.getByText('heading 3')).toHaveJSProperty('tagName', 'H6')
+		await expect(component.getByText('heading 4')).toHaveJSProperty('tagName', 'H6')
+		await expect(component.getByText('heading 5')).toHaveJSProperty('tagName', 'H6')
+		await expect(component.getByText('heading 6')).toHaveJSProperty('tagName', 'H6')
 	})
 
 	test('ignore heading (with hash (#) syntax padded to the text)', async ({ mount }) => {
@@ -138,7 +138,7 @@ test.describe('headings', () => {
 			},
 		})
 
-		await expect(component.getByRole('heading', { level: 1 })).toHaveText('heading 1')
+		await expect(component.getByText('heading 1')).toHaveJSProperty('tagName', 'H4')
 	})
 
 	test('render heading 2 (with dash (-) syntax on the next line)', async ({ mount }) => {
@@ -149,7 +149,7 @@ test.describe('headings', () => {
 			},
 		})
 
-		await expect(component.getByRole('heading', { level: 2 })).toHaveText('heading 2')
+		await expect(component.getByText('heading 2')).toHaveJSProperty('tagName', 'H5')
 	})
 })