Should apply level hierarchy

[ecureuill]

Expected Behavior

Programmatic heading levels should match their visual appearance (like size and boldness).

Current Behavior

Text contents of type Title, create by teacher, are not rendered using the correct heading tags. Big, Medium and Normal title are all coded as h2

Steps to Reproduce

1. As a teacher, create a course with text contents
   1. Add a Title content of size Big
   2. Add a Title content of size Medium
   3. Add a Title content of size Normal
2. As a student, navigate to the course and access it content
   1. Check the html of each of title contents

How to fix

Structure multiple headings on a page hierarchically. (best practice)
For example, try to follow nested content under an h2 heading with h3 before you use h4.
Exception: For fixed content that repeats across pages (like a footer or a sidebar), the heading level should not change.

Follow #62 and #63 specification

Related issues

#65

[github-actions]

This Feature is ready to be implemented.

[github-actions]

This feature have been implemented and is ready for Funcional Test.
Please, test the feature.

[juantenesaca]

Thank you for the information. So, we have twelve items:

So, could you specify which hierarchy should have each component (then no more changes will be done). And we can close intermediately this issue, due the short time for developing.

[ecureuill]

@juantenesaca it's not the case of a hierarchy for each component. The hierarchy will de determined by the presence of the BIG[MEDIUM|NORMAL title (Texto Component configured to be titles) as parent of a content.

First, lets make some definition

Target Components are the authoring tool components that are builded (html) using headers tag

<div><-- Some hypothetical component
  This component  is a TARGET COMPONENT
  Because there is one or more header tag in it -->
   <h4>
       <button>...</button>
   </h4>
   <div>
      <h5>...</h5> 
       <p>...</p>
    </div>  
</div>

<div>
  <-- Another hypothetical component
  This component is not a TARGET COMPONENT
  Because there is no header tag in it -->
  <button>...</button>
   <div>
      <p>...</p>
    </div>  
</div>

Now, rewriting the scenarios I've stated in previous commentary
When teacher add a Target Component in the work area, system must fix the headers tag

• If teacher add a Target Component as child of a BIG Title, thus system must adjust the Target Component's headers to start in h3
  Using the above hypothetical TARGET component, the final result will be

<div>
   <h3><-- changed h4 by h3-->
       <button>...</button>
    </h4>
   <div>
      <h5>...</h5> <-- changed h5 by h4-->
      <p>...</p>
    </div>  
</div>

• If teacher add a Target Component as child of a MEDIUM Title, thus system must adjust the Target Component's headers to start in h4
  Using the above hypothetical TARGET component, no change is necessary

<div><-- Some hypothetical component
  This component  is a TARGET COMPONENT
  Because there is one or more header tag in it -->
   <h4>
       <button>...</button>
   </h4>
   <div>
      <h5>...</h5> 
       <p>...</p>
    </div>  
</div>

• If teacher add a Target Component as child of a NORMAL Title, thus system must adjust the Target Component's headers to start in h5
  Using the above hypothetical TARGET component, the final result will be

<div>
   <h5><-- changed h4 by h5-->
       <button>...</button>
    </h5>
   <div>
      <h6>...</h6> <-- changed h5 by h6-->
      <p>...</p>
    </div>  
</div>

• If teacher add a Target Component as NOT a child of any Title, thus system must adjust the Target Component's headers to start in h2
  Using the above hypothetical TARGET component, the final result will be

<div>
   <h2><-- changed h4 by h2-->
       <button>...</button>
    </h2>
   <div>
      <h3>...</h3> <-- changed h5 by h3-->
      <p>...</p>
    </div>  
</div>

• So, you need to create an algorithm that will validate the Title hierarchy ( h2 > h3 > h4 > h5 > h6) of the contents added to the work area. This algorithm will just run for TARGET COMPONENTS.
• You need to determine which authoring tools are target components by looking for headers
  in theirs code
• As I said in the previous commentary, this i not an exhaustive list of scenarios. I listed the scenarios triggered by the "adding a target component in work area", but the validation need to considere other triggers event, like:
  • Create a BIG | MEDIUM | NORMAL Title as a parent of components already added in work area
  • Move a BIG | MEDIUM | NORMAL Title in work area
  • Delete a BIG | MEDIUM | NORMAL Title from work area
  • Move a target component

---

Example of adding a hypothetical target component in work area, with no title as parent

Example of adding a hypothetical target component in work area with a BIG TITLE as parent

Example of adding a hypothetical target component in work area with a MEDIUM TITLE as parent

Example of adding a hypothetical target component in work area with a NORMAL TITLE as parent

Example of MOVING a Title that will cause the need to adust header of an existent Target Content

• Inital state
  
• moving Title
  
• final state
  

Example of DELETING a Title that will cause the need to adust header of an existent Target Content

• Inital state
  
• Deleting
  
• final state
  

[juantenesaca]

I see. For it then, we need to first implement code to detect children and parents, in order to configure on which hierarchy they have to start.

@gavixo we need to implement more code for this requirement. What do you think?

[ecureuill]

@juantenesaca @gavixo have a look in branch feature/64

I've done a header validation for my text Editor (a11yEditor) component that find the headers with wrong level and adjust existent headers new headers are added or when a existent header is deleted or had level changed.

I commited a simple version of that algorithm with a Demo component for test purpose

---

What you think I create a new feature about the headers validation, because this is bigger scope then this bug ?

And for this bug issue you just need to correct the header tags for:
Big Title -- h2
Medium -- h3
Normal -- h4

Note: I'm suggesting start in h2 supposing that only h1 will be reserved fot the Topic/Unit page in Student View. You need to heck this with Instructional Developer

[github-actions]

This Feature Request was accepted, but are not going to be implemented in next release.

---

This will be work on #60 release

[github-actions]

This Feature is ready to be implemented.

[ecureuill]

@juantenesaca, as I commented before, it's necessary a header validation and that the headers used in components be settled dynamically in Course's Page take in account the Title structured created by teacher.

💡 My suggestion for now is that you can avoid a lot of work by removing unnecessarily headers from components

• Activity and Quiz: is coded using accordion (hilde/show panel) and for that header is required, thus I suggest that you render the activity and quiz without accordion

• Audio, Image and Video: follow their respective specifications in Instructional Design milestone that you will avoid the use of unnecessarily headers

Let's talk better when you start this.

[github-actions]

Functional Test passed!
Please, make a PULL REQUEST or, if already merged, close the issue.