fix(journey-maps): display focused controls #1839
Conversation
Refs: ROKAS-1364
Refs: ROKAS-1364
Refs: ROKAS-1364
| @@ -52,7 +52,8 @@ | |||
| } | |||
| } | |||
|
|
|||
| &:not([data-disabled='true']):active { | |||
| &:not([data-disabled='true']):active, | |||
| &:not([data-disabled='true']):has(:focus-visible) { | |||
There was a problem hiding this comment.
:has() wird leider von Firefox noch nicht unterstützt, aber laut w3c/csswg-drafts#3080 (comment) wird es auch Firefox sehr bald unterstützen.
There was a problem hiding this comment.
ist aber schon ein bisschen heikel, da die keyboard navigation auf firefox zurzeit nicht accessible wäre. Hast du eine Info, ab welcher Firefox Browser Version, :has() aktiviert sein wird?
Zudem sollten sich eigentlich gemäss design Richtlinien active und focus state unterscheiden. Ich würde empfehlen, eine focus outline zu verwenden, wie wir das im Lyne design system machen. Siehe https://lyne-storybook.app.sbb.ch und teste z.b. mit Buttons.
There was a problem hiding this comment.
ist aber schon ein bisschen heikel, da die keyboard navigation auf firefox zurzeit nicht accessible wäre. Hast du eine Info, ab welcher Firefox Browser Version, :has() aktiviert sein wird?
Zudem sollten sich eigentlich gemäss design Richtlinien active und focus state unterscheiden. Ich würde empfehlen, eine focus outline zu verwenden, wie wir das im Lyne design system machen. Siehe https://lyne-storybook.app.sbb.ch und teste z.b. mit Buttons.
Ich habe leider nicht mehr gefunden als das hier https://hacks.mozilla.org/2023/02/announcing-interop-2023/ vom 1. Februar "As well as older features, Interop 2023 also contains some new additions to CSS. Based on feedback from web developers we know that two of these in particular are widely anticipated: Container Queries and parent selectors via :has(). Both of these features are currently being implemented in Gecko; Container Queries are already available to try in prerelease versions of Firefox, and is expected to be released in Firefox 110 later this month, whilst :has() is under active development."
There was a problem hiding this comment.
@jeripeierSBB Unser PO bittet darum, dass wir diesen change erst mal so releasen können, im Rahmen eines Bugfixes https://flow.sbb.ch/browse/ROKAS-1364 (soll ich meinen PR als "fix" bezeichnen?). Wir würden beide Punkte aber in kommenden Stories angehen.
- Wir würden wahrscheinlich die Buttons umbauen, und
<button>als Container stylen und darin ein<span>anstatt wie heute den container div zu stylen und den<button>im<div>drin. - Es gibt noch gar keine neuen Designs für unsere Buttons mit dem Outline, weder in https://lyne-storybook.app.sbb.ch/ noch anderswo. Das wird aber noch nachgeliefert und wir bauen das dann ein.
There was a problem hiding this comment.
Hallo @swiss-chris
Danke für die ausführliche Antwort. Natürlich könnt ihr das erstmal so mergen, ich bin einfach nicht sicher ob die accessbility prüfung stand halten wird (und aus diesem Grund müsst ihr diese Änderung ja überhaupt erst machen ;-) Bei sbb.ch / Lyne haben wir relative strenge Anforderungen und sowohl Chrome, Safari und Firefox müssen auf Desktop unterstützt werden, wobei mit diesem PR eben nur 2/3 unterstützt werden würden. Die andere Richtlinie mit dem unterschiedlichen Fokus und Active style ist glaube ich kein Killerkriterium.
Zu 1) das würde wahrscheinlich funktionieren, zu 2) ich weiss gar nicht wo eure designs herkommen. Ansprechspartner zum Thema Focus wäre sicher @mcilurzo .
There was a problem hiding this comment.
Super, danke. Den Manuel hatte unsere UX Designerin heute diesbezüglich schon angeschrieben.
There was a problem hiding this comment.
Um auch noch kurz etwas dazu zu sagen; Aussage von Firefox ist erstes Halbjahr: https://bugzilla.mozilla.org/show_bug.cgi?id=418039
Damit wäre wahrscheinlich der Zeitplan von sbb.ch nicht gewährleistet, falls der Release davon eher in Q2 fällt.
Aber wie Jeri bereits gesagt hat, wir können das schon mal mergen.
|
Preview ready from 08292d7 at 14.3.2023, 11:06:22: |
swiss-chris
changed the title
Refs: ROKAS-1364
Refs: ROKAS-1364