Our current tooltip component has been causing ui glitches for over a year now because it did not use react portal to render the tooltip content outside the react render tree which interfered with html/css. The new component is based on a fully accessible component by radix-ui. The styling, for now, has been kept from the original tooltip.
Committed-by: Eduard Heimbuch <eduard.heimbuch@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
There has been the requirement to improve accessibility for our tooltips by allowing tooltips to be closed via the escape key as well as allowing users to hover over the tooltip text. These combined requirements were not possible with the previous implementation that used a bulma-tooltip extension. That meant we had to implement the full tooltip html and css from scratch. A declared goal was to keep the new implementation as close to the previous look-and-feel as possible. The redundant dependency has been removed in the process.
This is the fixed re-commit of #1938 (Commit 67bd96ea81)
Co-authored-by: Konstantin Schaper <konstantin.schaper@cloudogu.com>
Co-authored-by: René Pfeuffer <rene.pfeuffer@cloudogu.com>
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>
There has been the requirement to improve accessibility for our tooltips by allowing tooltips to be closed via the escape key as well as allowing users to hover over the tooltip text. These combined requirements were not possible with the previous implementation that used a bulma-tooltip extension. That meant we had to implement the full tooltip html and css from scratch. A declared goal was to keep the new implementation as close to the previous look-and-feel as possible. The redundant dependency has been removed in the process.
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.
