Milestone 2e Accessibility & implementation of profile editor #233
Description
Profile Pane has an edit Pane which at the moment is created from a Form. We would like to move away from RDF forms for the profile edit which means the profile edit has to be redone.
Part of the reimplementation should be:
- extracting all inline CSS in dedicated CSS files (example in profile-pane). Very important is to create dedicated CSS pane names. Example: if you use the .warning, its CSS will be coming from mash.css so create a dedicated .warning-contact for it if the one in mash.css does not fit.
- making sure the CSS is part of release (example of location mention in webpack) and according entry file (example index.ts)
- using already available CSS variables from mashlib light theme and documenting in the PR what other CSS variables could be moved to the main mashlib theme
- implementing the needed input fields for editing profile
- adding HTML5 and ARIA labels
- making sure it also work when resizing screen
- add accessibility tests based on 'axe-core' (example here)
- making sure other accessibility features are inline with the WCAG standard (the tests will show). As example: text sizes, button sizes, keyboard focus and so on.