diff --git a/react/assets/forus-platform/scss/_common/dashboard.scss b/react/assets/forus-platform/scss/_common/dashboard.scss index d525cb619..ca8ebf181 100644 --- a/react/assets/forus-platform/scss/_common/dashboard.scss +++ b/react/assets/forus-platform/scss/_common/dashboard.scss @@ -3897,6 +3897,7 @@ body { padding: 10px 25px; cursor: pointer; transition: background 0.4s; + outline-offset: -2px; .preference-option-details { flex-grow: 1; diff --git a/react/assets/forus-webshop/scss/includes/blocks/block-empty.scss b/react/assets/forus-webshop/scss/includes/blocks/block-empty.scss index 72aba81ad..04ac81e6f 100644 --- a/react/assets/forus-webshop/scss/includes/blocks/block-empty.scss +++ b/react/assets/forus-webshop/scss/includes/blocks/block-empty.scss @@ -38,7 +38,7 @@ } .block-description { - font: 700 14px/20px var(--base-font); + font: 700 14px/24px var(--base-font); color: #646f79; margin: 0 0 35px; diff --git a/react/assets/forus-webshop/scss/includes/blocks/block-fund.scss b/react/assets/forus-webshop/scss/includes/blocks/block-fund.scss index c33adf0ef..e2848d89a 100644 --- a/react/assets/forus-webshop/scss/includes/blocks/block-fund.scss +++ b/react/assets/forus-webshop/scss/includes/blocks/block-fund.scss @@ -56,23 +56,23 @@ } .fund-details-items { - display: flex; - flex-direction: row; - - .fund-details-item { - flex-direction: column; - width: 100%; - - .fund-details-item-label { - font: 600 14px var(--base-font); - color: #646f79; - margin-bottom: 5px; - } + display: grid; + grid-auto-flow: column; + grid-auto-rows: auto auto; + gap: 5px 10px; + align-items: start; + + .fund-details-item-label { + font: 600 14px var(--base-font); + color: #646f79; + grid-row: 1; + } - .fund-details-item-value { - font: 600 16px var(--base-font); - color: #303030; - } + .fund-details-item-value { + font: 600 16px var(--base-font); + color: #303030; + grid-row: 2; + margin: 0; } } } @@ -90,8 +90,19 @@ } .fund-details-items { - gap: 20px; - flex-direction: column; + display: block; + + .fund-details-item-label { + margin-bottom: 5px; + } + + .fund-details-item-value { + margin-bottom: 20px; + + &:last-child { + margin-bottom: 0; + } + } } } } diff --git a/react/assets/forus-webshop/scss/includes/blocks/block-preferences.scss b/react/assets/forus-webshop/scss/includes/blocks/block-preferences.scss index e4a624158..91451317b 100644 --- a/react/assets/forus-webshop/scss/includes/blocks/block-preferences.scss +++ b/react/assets/forus-webshop/scss/includes/blocks/block-preferences.scss @@ -8,6 +8,7 @@ padding: 10px 25px; cursor: pointer; transition: background .4s; + outline-offset: -2px !important; .preference-option-details { flex-grow: 1; diff --git a/react/assets/forus-webshop/scss/includes/components/card.scss b/react/assets/forus-webshop/scss/includes/components/card.scss index fc4decc11..7558e17b0 100644 --- a/react/assets/forus-webshop/scss/includes/components/card.scss +++ b/react/assets/forus-webshop/scss/includes/components/card.scss @@ -172,6 +172,11 @@ padding: 15px; } + &.card-section-md-vertical { + padding-top: 15px; + padding-bottom: 15px; + } + &.card-section-sm { padding: 10px; } diff --git a/react/src/dashboard/components/elements/select-control/templates/SelectControlOptionsFD.tsx b/react/src/dashboard/components/elements/select-control/templates/SelectControlOptionsFD.tsx index 4f3be9601..e4eaf9693 100644 --- a/react/src/dashboard/components/elements/select-control/templates/SelectControlOptionsFD.tsx +++ b/react/src/dashboard/components/elements/select-control/templates/SelectControlOptionsFD.tsx @@ -62,8 +62,8 @@ export default function SelectControlOptionsFD({ aria-haspopup="listbox" aria-expanded={showOptions} aria-labelledby={ariaLabelledby || controlId} - aria-controls={`${controlId}_options`} - aria-activedescendant={modelValue ? `option_${modelValue.id}` : null} + aria-controls={showOptions ? `${controlId}_options` : null} + aria-activedescendant={showOptions && modelValue ? `option_${modelValue.id}` : null} ref={selectorRef} onKeyDown={(e) => (disabled ? null : onKeyDown(e))} onBlur={onBlur}> @@ -125,7 +125,7 @@ export default function SelectControlOptionsFD({ className="select-control-search form-control" onClick={searchOption} style={{ display: showOptions && allowSearch ? 'none' : 'block' }} - title={placeholderValue || placeholder}> + aria-label={placeholderValue || placeholder}> {placeholderValue || placeholder} @@ -142,6 +142,7 @@ export default function SelectControlOptionsFD({ value={query} tabIndex={0} onClick={onInputClick} + aria-controls={`${controlId}_options`} onChange={(e) => setQuery(e.target.value)} className="select-control-search form-control" /> diff --git a/react/src/dashboard/components/elements/select-control/templates/SelectControlOptionsLang.tsx b/react/src/dashboard/components/elements/select-control/templates/SelectControlOptionsLang.tsx index e27345233..f36911b49 100644 --- a/react/src/dashboard/components/elements/select-control/templates/SelectControlOptionsLang.tsx +++ b/react/src/dashboard/components/elements/select-control/templates/SelectControlOptionsLang.tsx @@ -50,7 +50,7 @@ export default function SelectControlOptionsLang({ data-dusk={dusk} aria-haspopup="listbox" aria-expanded={showOptions} - aria-labelledby={controlId} + aria-labelledby={allowSearch ? controlId : null} aria-controls={`${controlId}_options`} ref={selectorRef} onKeyDown={onKeyDown} @@ -59,7 +59,6 @@ export default function SelectControlOptionsLang({ {/* Placeholder */}