We introduced a new accessible combobox component. This component is based on headless ui and made compatible with our components and forms. Also we replaced the outdated `Autocomplete` component with the new combobox.
Co-authored-by: Konstantin Schaper <konstantin.schaper@cloudogu.com>
Reviewed-by: Florian Scholdei <florian.scholdei@cloudogu.com>
Extends existing functionality, provides new fallbacks for translations and adds capabilities to manage array properties in configurations.
Committed-by: Florian Scholdei <florian.scholdei@cloudogu.com>
Co-authored-by: Florian Scholdei <florian.scholdei@cloudogu.com>
When set programmatically, browsers don't always consistently show a focus indicator which is required for list navigation via keyboard to function properly. We already implemented a custom focus indicator for buttons which has now been expanded with slight tweaks to anchor tags as well. This is by no means a complete solution and will be revisited at a later date.
In .card-tables there was an action area that had a darker background. Now this area only contains the delete action. Also, users mistakenly assumed that the hovered area could be clicked. It has therefore been removed and the icons themselves have received a hover effect.
The focus state of buttons should be clearly visible in all modes to help find the focused element. Buttons are especially important and therefore receive a special outline in a unique color. The colored outline can be set with CSS-variables.
* The scss variable $popover-border-color is now also used throughout the internal styles
* Derived css variable is exported only once
* Scss definitions are now organized and structured with descriptive comments
* Fix incorrect styling due to a too dark and at the same time very thick border in the CreateButton component
* Darken $border-light a little, so that it is not brighter than the border in dark mode
This commit introduces a new more relaxed theme, the dark theme!
In addition, the theme can now be selected according to the system defaults.
And the other themes, as well as the general structure were unified/simplified.
Co-authored-by: Philipp Ahrendt <philipp.ahrendt@cloudogu.com>
Co-authored-by: Eduard Heimbuch <eduard.heimbuch@cloudogu.com>
Co-authored-by: René Pfeuffer <rene.pfeuffer@cloudogu.com>
Co-authored-by: Matthias Thieroff <matthias.thieroff@cloudogu.com>
Enable breaking of content to be fully available on small screens or highly zoomed displays. This should help improve accessibility.
Co-authored-by: Florian Scholdei <florian.scholdei@cloudogu.com>
Co-authored-by: Konstantin Schaper <konstantin.schaper@cloudogu.com>
Fixes several accessibility issues:
- Provide a style for empty table column headers
- Add aria references and aria-labels
- Remove aria references if the referenced element is not rendered
If the plugin center authentication fails,
the plugins are fetched without authentication
and a warning is displayed on the plugin page.
Co-authored-by: Konstantin Schaper <konstantin.schaper@cloudogu.com>
Implement initial focus for modals. Change all modals including forms to put initial focus on the first input. When Enter is pressed on any input (CTRL + Enter for Textareas), the form is submitted if it is valid.
Co-authored-by: Sebastian Sdorra <sebastian.sdorra@cloudogu.com>
Co-authored-by: Eduard Heimbuch <eduard.heimbuch@cloudogu.com>
Further fixes for the high contrast mode, modly regarded to the autocomplete component.
This is a fixup for #1892
Co-authored-by: Sebastian Sdorra <sebastian.sdorra@cloudogu.com>
Allows scm-manager instances to authenticate with the configured plugin center. If the default plugin center is used, a myCloudogu account is used for authentication which in turn enables downloading special myCloudogu plugins directly through the plugin administration page.
Co-authored-by: Konstantin Schaper <konstantin.schaper@cloudogu.com>
Co-authored-by: Matthias Thieroff <93515444+mthieroff@users.noreply.github.com>
Co-authored-by: Philipp Ahrendt <philipp.ahrendt@cloudogu.com>
Add an experimental high contrast color theme to SCM-Manager. The high contrast mode uses a dark background and color with a high contrast for a better accessibility.
The change adds the theme to ui-styles and theme switcher to the storybook of ui-components.
