Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

🛹 Feature: Erweiterung der Modal-Komponente durch Kombination von dialog und Card #5844

Closed
deleonio opened this issue Jan 2, 2024 · 4 comments · Fixed by #7234
Closed
Assignees
Labels
feature New feature or request v3 Here are issues that need to be resolved for version 3.

Comments

@deleonio
Copy link
Contributor

deleonio commented Jan 2, 2024

Die aktuelle Modal-Komponente sollte mittels dialog umgesetzt werden und kann wie eine Card mit Schließenschalter aussehen. Wichtig hierbei ist eine deutliche Außenlinie.

image

  • Label: string optional (Title)
  • Slot: HTML
  • onClose: (event) => void (wenn gesetzt, wird Schließen-Button angezeigt)

Akzeptanzkriterien

  • Neue Property _variant mit den Werten blank (default) und card
  • Neue Sample mit card
  • E2E Tests
  • Dokumentation anpassen.
@deleonio deleonio added feature New feature or request unclear It is unclear what should be the next steps or who is responsible. labels Jan 2, 2024
@deleonio deleonio added this to the New components '24 milestone Jan 5, 2024
@laske185 laske185 moved this to 📄 Ready in KoliBri Board Jan 16, 2024
@deleonio deleonio removed the status in KoliBri Board Feb 13, 2024
@deleonio deleonio self-assigned this Feb 13, 2024
@sdvg sdvg removed the unclear It is unclear what should be the next steps or who is responsible. label Mar 14, 2024
@sdvg sdvg moved this to 📄 Ready in KoliBri Board Mar 14, 2024
@laske185 laske185 added the v3 Here are issues that need to be resolved for version 3. label Aug 13, 2024
@laske185 laske185 moved this from 📄 Ready to Backlog in KoliBri Board Aug 26, 2024
@deleonio deleonio removed the status in KoliBri Board Sep 23, 2024
@laske185 laske185 moved this to Backlog in KoliBri Board Oct 17, 2024
@laske185 laske185 removed the v3 Here are issues that need to be resolved for version 3. label Oct 17, 2024
@laske185 laske185 added the v3 Here are issues that need to be resolved for version 3. label Nov 4, 2024
@laske185 laske185 moved this from Backlog to 📄 Ready in KoliBri Board Nov 4, 2024
@anicyne anicyne self-assigned this Jan 7, 2025
@anicyne anicyne moved this from 📄 Ready to 🏗 In progress in KoliBri Board Jan 7, 2025
anicyne added a commit that referenced this issue Jan 7, 2025
anicyne added a commit that referenced this issue Jan 8, 2025
Refs: #5844
@anicyne anicyne linked a pull request Jan 8, 2025 that will close this issue
5 tasks
anicyne added a commit that referenced this issue Jan 8, 2025
Refs: #5844
anicyne added a commit that referenced this issue Jan 8, 2025
Refs: #5844
publicuibot bot pushed a commit that referenced this issue Jan 8, 2025
$
Refs: #5844
@anicyne anicyne moved this from 🏗 In progress to 🔍 Review in KoliBri Board Jan 8, 2025
@anicyne anicyne moved this from 🔍 Review to 🏗 In progress in KoliBri Board Jan 9, 2025
anicyne added a commit that referenced this issue Jan 9, 2025
Refs: #5844
publicuibot bot pushed a commit that referenced this issue Jan 9, 2025
$
Refs: #5844
anicyne added a commit that referenced this issue Jan 9, 2025
Refs: #5844
anicyne added a commit that referenced this issue Jan 9, 2025
Refs: #5844
publicuibot bot pushed a commit that referenced this issue Jan 9, 2025
$
Refs: #5844
anicyne added a commit that referenced this issue Jan 9, 2025
@anicyne anicyne moved this from 🏗 In progress to 🔍 Review in KoliBri Board Jan 9, 2025
@laske185 laske185 moved this from 🔍 Review to 🚹 A11y in KoliBri Board Jan 9, 2025
@laske185
Copy link
Contributor

laske185 commented Jan 10, 2025

Offen ist die Frage, wie mit dem Schließen-Button bei der Tastaturnavigation umgegangen wird. In welcher Reihenfolge soll dieser fokussiert werden? Möglich wären:

  1. Als Erstes direkt beim Öffnen des Dialogs
  2. Als Letztes, wodurch man zuerst den gesamten Dialog durch tabben muss.
  3. An -1. Stelle. Initialer Fokus ist im Content, mit Shift-Tab wechselt man direkt zum Schließen.

@Roman-Use
Copy link

Roman-Use commented Jan 31, 2025

Offen ist die Frage, wie mit dem Schließen-Button bei der Tastaturnavigation umgegangen wird. In welcher Reihenfolge soll dieser fokussiert werden? Möglich wären:

  1. Als Erstes direkt beim Öffnen des Dialogs
  2. Als Letztes, wodurch man zuerst den gesamten Dialog durch tabben muss.
  3. An -1. Stelle. Initialer Fokus ist im Content, mit Shift-Tab wechselt man direkt zum Schließen.

Dies ist eher eine Usability-Frage, als eine Barrierefreiheitsfrage. Grundsätzlich sollte der Fokus mit einer sinnvollen Reihenfolge durch die Inhalte navigieren bzw. der logischen Lesereihenfolge entsprechen. Wir (Christian Brähmig, Dirk Barkhorn und ich) haben diesen Punkt zusammen diskutiert und würden die Variante 2 bevorzugen.

@laske185
Copy link
Contributor

laske185 commented Feb 3, 2025

Variante 2 wurde umgesetzt.

@laske185 laske185 moved this from 🚹 A11y to 🏗 In progress in KoliBri Board Feb 3, 2025
@laske185
Copy link
Contributor

laske185 commented Feb 3, 2025

Todo: Merge-Konflikte beheben

publicuibot bot pushed a commit that referenced this issue Feb 4, 2025
$
Refs: #5844
publicuibot bot pushed a commit that referenced this issue Feb 4, 2025
$
Refs: #5844
@anicyne anicyne moved this from 🏗 In progress to 🔍 Review in KoliBri Board Feb 4, 2025
@github-project-automation github-project-automation bot moved this from 🔍 Review to ✅ Done in KoliBri Board Feb 4, 2025
sdvg added a commit that referenced this issue Feb 4, 2025
…ecate-themes-v3

* 'develop' of github.com:public-ui/kolibri:
  Update all snapshots$ $ Refs: #5844
  chore: release 3.0.0-rc.3
  Fix concurrency group syntax in dod-checker workflow
  Remove auto file generator workflow
  remove some prepack scripts
  Update all snapshots$ $ Refs: #7310
  Fix duplicate import of 'h' in shadow.tsx component
  Fix formRef initialization to handle null value in FormErrorList component
  Enhance error list functionality: improve scrolling and focus behavior for error links
  Enhance error list rendering: add smooth scroll and focus behavior for alert component
  Fix test
  Update all snapshots$ $ Refs: #5844
  set initial focus to slot area
  Refactor modal and add snapshots tests
  Update all snapshots$ $ Refs: #5844
  Fix lint error
  Fix imports
  Add styles, e2e tests and update sample app
  Add close button for modal
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature New feature or request v3 Here are issues that need to be resolved for version 3.
Projects
Archived in project
Development

Successfully merging a pull request may close this issue.

5 participants