Components like CHeader should render using proper HTML elements

[niksajanjic]

CHeader, CFooter and CSidebar components render as <div> by default, but rendering them as <header>, <footer> and <aside> respectively would be semantically more correct. Furthermore, there should be an optional property as to change the component element when needed. We could just add the property to make it backward compatible, but I do believe these components should use correct HTML elements by default.

Also CSidebarNav and CNav should be rendered as nav HTML elements. Adding optional as property would also be beneficial.

Possibly a separate issue

Similar issue exists with CModal component, we should consider refactoring it to be using dialog element, although that has some constraints in a sense that the dialog is positioned at the "Top Layer" and has it's own ordering, meaning we can't position any other element above it. On top of that, we should render modals (or at least consider) through React portals, as they shouldn't be embedded into the existing content. That is neither semantically correct and it can cause issues (for instance modal has a form and is rendered in another form). Here's just one example. But this can be considered a separate issue.

[jasperfirecai2]

modals do use react portals in the latest version. Dialogs have similar APIs to portals but have implications to the custom styles in coreUI modals.

[niksajanjic]

@jasperfirecai2 Thanks for the feedback. I think we should reopen this issue until CHeader and CFooter are rewritten in future versions, just to track it properly.

[jasperfirecai2]

I think we should reopen this issue until CHeader and CFooter are rewritten in future versions, just to track it properly.

If you look at the PR, it seems there are plans to rewrite the components. I think for the purpose of scoping, making a new issue or just letting it be would be better. But I don't run this project, that's up to the devs and maintainers.