fix(NcRichText): start heading from h4

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>

Author: ShGKme

cypress/component/richtext.cy.ts

@@ -62,11 +62,11 @@ describe('NcRichText', () => {
 		describe('headings', () => {
 			it('heading (with hash (#) syntax divided with space from text)', () => {
 				const testCases = [
-					{ tag: 'h1', input: '# heading 1', output: 'heading 1' },
-					{ tag: 'h2', input: '## heading 2', output: 'heading 2' },
-					{ tag: 'h3', input: '### heading 3', output: 'heading 3' },
-					{ tag: 'h4', input: '#### heading 4', output: 'heading 4' },
-					{ tag: 'h5', input: '##### heading 5', output: 'heading 5' },
+					{ tag: 'h4', input: '# heading 1', output: 'heading 1' },
+					{ tag: 'h5', input: '## heading 2', output: 'heading 2' },
+					{ tag: 'h6', input: '### heading 3', output: 'heading 3' },
+					{ tag: 'h6', input: '#### heading 4', output: 'heading 4' },
+					{ tag: 'h6', input: '##### heading 5', output: 'heading 5' },
 					{ tag: 'h6', input: '###### heading 6', output: 'heading 6' },
 				]
 
@@ -101,7 +101,7 @@ describe('NcRichText', () => {
 					},
 				})
 
-				cy.get('h1').should('have.text', 'heading 1')
+				cy.get('h4').should('have.text', 'heading 1')
 			})
 
 			it('heading 2 (with dash (-) syntax on the next line)', () => {
@@ -112,7 +112,7 @@ describe('NcRichText', () => {
 					},
 				})
 
-				cy.get('h2').should('have.text', 'heading 2')
+				cy.get('h5').should('have.text', 'heading 2')
 			})
 		})
 

src/components/NcRichText/NcRichText.vue

@@ -482,11 +482,19 @@ export default {
 				.use(rehype2react, {
 					createElement: (tag, attrs, children) => {
 						if (!tag.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(tag)) {
+								tag = `h${Math.min(+String(tag)[1] + 3, 6)}`
+							}
+
 							if (this.useExtendedMarkdown) {
 								if (tag === 'code' && !rehypeHighlight.value
 									&& attrs?.attrs?.class?.includes('language')) {
 									importRehypeHighlightLibrary()
 								}
+
 								let nestedNode = null
 								if (tag === 'li' && Array.isArray(children)
 									&& children[0].tag === 'input'

src/components/NcRichText/richtext.scss

@@ -52,8 +52,16 @@
 		font-weight: bold;
 	}
 
-	h1 {
-		font-size: 30px;
+	h4 {
+		font-size: 20px;
+	}
+
+	h5 {
+		font-size: 18px;
+	}
+
+	h6 {
+		font-size: 15px;
 	}
 
 	ul, ol {