Home -> NewProblemsForm: Ineffective Heading Hierarchy

[johnhbenetech]

Note: as per the “Problematic Custom Rendering of Tabular Data” section of this document, the level 5 headings which act as column headers should have been removed. Therefore they are not mentioned here.

There are some problems with the headings used in this modal which prohibit effective navigation and comprehension of the content.

• The dialog’s title heading (“Add problem(s) to Problem Set”) is marked up at level 2.
• The text which begins, “Type or edit the equation using your keyboard …”, acts as instructional text but has incorrectly been marked up as a heading.
• The “Math editor”, “Describe your work” and “math input buttons” headings are marked up at level 3, meaning that levels would be skipped if the title heading was corrected and the instructional text heading mark-up removed.
• The individual math button groups (“Edit”, “Operators”, “Notations” and “Geometry”) are not marked up as headings.
• The tab selector buttons to switch between “Symbols” and “Sketch” are not preceded by a heading, meaning that there is nothing to accessibly separate them from the “math input buttons” section.
• Similarly, there is no heading to separate the tab selector buttons from the “Undo”, “Add Problem” and “Done” controls.

Suggested Solution

There is some overlap between components here:

• The instructional text heading mark-up is rendered by the Editor -> MyWork -> MyWorkEditorArea component, as are the “Math editor” and “Describe your work” headings which have the incorrect level.
• The incorrect level of the “math input buttons” heading is caused by mark-up in the Editor -> MyWork -> MathPalette component.
• The missing heading mark-up before the tab selector buttons is caused by the Editor -> MyWork -> MyWorkEditorButtons -> InputContainerSelectors component.
• The lack of heading between the tab selector and footer buttons should be addressed in the Editor -> MyWork -> MyWorkEditorButtons -> MyWorkFooter component.

That only leaves the incorrect level of the dialog title to be addressed inside this component directly. Update the mark-up to a level 1 heading.

Aha! Link: https://diagramlabs.aha.io/features/B-127

[jscholes]

I will circle back to this ticket following further discussion on #767.