Skip to content

Commit

Permalink
Merge branch 'main' into test-guidepup-popover
Browse files Browse the repository at this point in the history
  • Loading branch information
@nmerget
nmerget authored Aug 15, 2024
2 parents 40ec3e0 + 82aa64b commit 3b071b4
Show file tree
Hide file tree
Showing 22 changed files with 239 additions and 46 deletions.
Binary file modified __snapshots__/divider/patternhub/divider-properties-should-match-screenshot.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
20 changes: 10 additions & 10 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

22 changes: 21 additions & 1 deletion packages/components/src/components/checkbox/checkbox.lite.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import {
useStore
} from '@builder.io/mitosis';
import { DBCheckboxProps, DBCheckboxState } from './model';
import { cls, uuid } from '../../utils';
import { cls, delay, hasVoiceOver, uuid } from '../../utils';
import {
DEFAULT_INVALID_MESSAGE,
DEFAULT_INVALID_MESSAGE_ID_SUFFIX,
Expand All @@ -33,6 +33,7 @@ export default function DBCheckbox(props: DBCheckboxProps) {
_validMessageId: this._id + DEFAULT_VALID_MESSAGE_ID_SUFFIX,
_invalidMessageId: this._id + DEFAULT_INVALID_MESSAGE_ID_SUFFIX,
_descByIds: '',
_voiceOverFallback: '',
handleChange: (event: ChangeEvent<HTMLInputElement>) => {
if (props.onChange) {
props.onChange(event);
Expand All @@ -46,11 +47,23 @@ export default function DBCheckbox(props: DBCheckboxProps) {
/* For a11y reasons we need to map the correct message with the checkbox */
if (!ref?.validity.valid || props.customValidity === 'invalid') {
state._descByIds = state._invalidMessageId;
if (hasVoiceOver()) {
state._voiceOverFallback =
props.invalidMessage ??
ref?.validationMessage ??
DEFAULT_INVALID_MESSAGE;
delay(() => (state._voiceOverFallback = ''), 1000);
}
} else if (
props.customValidity === 'valid' ||
(ref?.validity.valid && props.required)
) {
state._descByIds = state._validMessageId;
if (hasVoiceOver()) {
state._voiceOverFallback =
props.validMessage ?? DEFAULT_VALID_MESSAGE;
delay(() => (state._voiceOverFallback = ''), 1000);
}
} else if (props.message) {
state._descByIds = state._messageId;
} else {
Expand Down Expand Up @@ -179,6 +192,13 @@ export default function DBCheckbox(props: DBCheckboxProps) {
ref?.validationMessage ??
DEFAULT_INVALID_MESSAGE}
</DBInfotext>

{/* * https://www.davidmacd.com/blog/test-aria-describedby-errormessage-aria-live.html
* Currently VoiceOver isn't supporting changes from aria-describedby.
* This is an internal Fallback */}
<span data-visually-hidden="true" role="status">
{state._voiceOverFallback}
</span>
</div>
);
}
28 changes: 26 additions & 2 deletions packages/components/src/components/divider/divider.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,22 @@
@use "@db-ui/foundations/build/scss/helpers";

.db-divider {
&:not([data-margin="none"]) {
&:is(:not([data-margin]), [data-margin="small"]) {
margin: variables.$db-spacing-fixed-sm 0;
}

&[data-margin="medium"] {
margin: variables.$db-spacing-fixed-md 0;
}

&[data-margin="large"] {
margin: variables.$db-spacing-fixed-lg 0;
}

&[data-margin="none"] {
margin: 0;
}

&:not([data-variant="vertical"]) {
@include helpers.divider();

Expand All @@ -21,10 +33,22 @@

inline-size: variables.$db-border-height-3xs;

&:not([data-margin="none"]) {
&:is(:not([data-margin]), [data-margin="small"]) {
margin: 0 variables.$db-spacing-fixed-sm;
}

&[data-margin="medium"] {
margin: 0 variables.$db-spacing-fixed-md;
}

&[data-margin="large"] {
margin: 0 variables.$db-spacing-fixed-lg;
}

&[data-margin="none"] {
margin: 0;
}

&[data-width="full"] {
block-size: 100%;
}
Expand Down
4 changes: 3 additions & 1 deletion packages/components/src/components/divider/model.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@ import {
EmphasisProps,
GlobalProps,
GlobalState,
WidthProps
WidthProps,
MarginProps
} from '../../shared/model';

export const DividerMarginList = ['none', '_'] as const;
Expand All @@ -19,6 +20,7 @@ export type DBDividerDefaultProps = {
export type DBDividerProps = DBDividerDefaultProps &
GlobalProps &
EmphasisProps &
MarginProps &
WidthProps;

export type DBDividerDefaultState = {};
Expand Down
4 changes: 2 additions & 2 deletions packages/components/src/components/drawer/drawer.lite.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import {
import { DBDrawerProps, DBDrawerState } from './model';
import { DBButton } from '../button';
import { DEFAULT_CLOSE_BUTTON } from '../../shared/constants';
import { cls } from '../../utils';
import { cls, delay } from '../../utils';

useMetadata({
isAttachedToShadowDom: true
Expand Down Expand Up @@ -54,7 +54,7 @@ export default function DBDrawer(props: DBDrawerProps) {
if (dialogContainerRef) {
dialogContainerRef.hidden = true;
}
setTimeout(() => {
delay(() => {
if (dialogContainerRef) {
dialogContainerRef.hidden = false;
}
Expand Down
22 changes: 21 additions & 1 deletion packages/components/src/components/input/input.lite.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import {
useRef,
useStore
} from '@builder.io/mitosis';
import { cls, isArrayOfStrings, uuid } from '../../utils';
import { cls, delay, hasVoiceOver, isArrayOfStrings, uuid } from '../../utils';
import { DBInputProps, DBInputState } from './model';
import {
DEFAULT_DATALIST_ID_SUFFIX,
Expand Down Expand Up @@ -42,6 +42,7 @@ export default function DBInput(props: DBInputProps) {
_dataListId: this._id + DEFAULT_DATALIST_ID_SUFFIX,
_descByIds: '',
_value: '',
_voiceOverFallback: '',
defaultValues: {
label: DEFAULT_LABEL,
placeholder: ' '
Expand Down Expand Up @@ -69,6 +70,13 @@ export default function DBInput(props: DBInputProps) {
/* For a11y reasons we need to map the correct message with the input */
if (!ref?.validity.valid || props.customValidity === 'invalid') {
state._descByIds = state._invalidMessageId;
if (hasVoiceOver()) {
state._voiceOverFallback =
props.invalidMessage ??
ref?.validationMessage ??
DEFAULT_INVALID_MESSAGE;
delay(() => (state._voiceOverFallback = ''), 1000);
}
} else if (
props.customValidity === 'valid' ||
(ref?.validity.valid &&
Expand All @@ -78,6 +86,11 @@ export default function DBInput(props: DBInputProps) {
props.pattern))
) {
state._descByIds = state._validMessageId;
if (hasVoiceOver()) {
state._voiceOverFallback =
props.validMessage ?? DEFAULT_VALID_MESSAGE;
delay(() => (state._voiceOverFallback = ''), 1000);
}
} else if (props.message) {
state._descByIds = state._messageId;
} else {
Expand Down Expand Up @@ -230,6 +243,13 @@ export default function DBInput(props: DBInputProps) {
ref?.validationMessage ??
DEFAULT_INVALID_MESSAGE}
</DBInfotext>

{/* * https://www.davidmacd.com/blog/test-aria-describedby-errormessage-aria-live.html
* Currently VoiceOver isn't supporting changes from aria-describedby.
* This is an internal Fallback */}
<span data-visually-hidden="true" role="status">
{state._voiceOverFallback}
</span>
</div>
);
// jscpd:ignore-end
Expand Down
24 changes: 22 additions & 2 deletions packages/components/src/components/select/select.lite.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import {
useStore
} from '@builder.io/mitosis';
import { DBSelectOptionType, DBSelectProps, DBSelectState } from './model';
import { cls, uuid } from '../../utils';
import { cls, delay, hasVoiceOver, uuid } from '../../utils';
import {
DEFAULT_INVALID_MESSAGE,
DEFAULT_INVALID_MESSAGE_ID_SUFFIX,
Expand Down Expand Up @@ -47,6 +47,7 @@ export default function DBSelect(props: DBSelectProps) {
_descByIds: '',
_value: '',
initialized: false,
_voiceOverFallback: '',
handleClick: (event: ClickEvent<HTMLSelectElement>) => {
if (props.onClick) {
props.onClick(event);
Expand Down Expand Up @@ -75,11 +76,23 @@ export default function DBSelect(props: DBSelectProps) {
/* For a11y reasons we need to map the correct message with the select */
if (!ref?.validity.valid || props.customValidity === 'invalid') {
state._descByIds = state._invalidMessageId;
if (hasVoiceOver()) {
state._voiceOverFallback =
props.invalidMessage ??
ref?.validationMessage ??
DEFAULT_INVALID_MESSAGE;
delay(() => (state._voiceOverFallback = ''), 1000);
}
} else if (
props.customValidity === 'valid' ||
(ref?.validity.valid && props.required)
) {
state._descByIds = state._validMessageId;
if (hasVoiceOver()) {
state._voiceOverFallback =
props.validMessage ?? DEFAULT_VALID_MESSAGE;
delay(() => (state._voiceOverFallback = ''), 1000);
}
} else if (props.message) {
state._descByIds = state._messageId;
} else {
Expand Down Expand Up @@ -156,7 +169,7 @@ export default function DBSelect(props: DBSelectProps) {
name={props.name}
value={props.value ?? state._value}
autocomplete={props.autocomplete}
onInput={(event: ChangeEvent<HTMLInputElement>) =>
onInput={(event: ChangeEvent<HTMLSelectElement>) =>
state.handleInput(event)
}
onClick={(event: ClickEvent<HTMLSelectElement>) =>
Expand Down Expand Up @@ -243,6 +256,13 @@ export default function DBSelect(props: DBSelectProps) {
ref?.validationMessage ??
DEFAULT_INVALID_MESSAGE}
</DBInfotext>

{/* * https://www.davidmacd.com/blog/test-aria-describedby-errormessage-aria-live.html
* Currently VoiceOver isn't supporting changes from aria-describedby.
* This is an internal Fallback */}
<span data-visually-hidden="true" role="status">
{state._voiceOverFallback}
</span>
</div>
);
// jscpd:ignore-end
Expand Down
24 changes: 22 additions & 2 deletions packages/components/src/components/textarea/textarea.lite.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import {
} from '@builder.io/mitosis';
import { DBTextareaProps, DBTextareaState } from './model';
import { DBInfotext } from '../infotext';
import { cls, uuid } from '../../utils';
import { cls, delay, hasVoiceOver, uuid } from '../../utils';
import {
DEFAULT_INVALID_MESSAGE,
DEFAULT_INVALID_MESSAGE_ID_SUFFIX,
Expand Down Expand Up @@ -40,6 +40,7 @@ export default function DBTextarea(props: DBTextareaProps) {
placeholder: ' ',
rows: '4'
},
_voiceOverFallback: '',
handleInput: (event: InputEvent<HTMLTextAreaElement>) => {
if (props.onInput) {
props.onInput(event);
Expand All @@ -63,12 +64,24 @@ export default function DBTextarea(props: DBTextareaProps) {
/* For a11y reasons we need to map the correct message with the textarea */
if (!ref?.validity.valid || props.customValidity === 'invalid') {
state._descByIds = state._invalidMessageId;
if (hasVoiceOver()) {
state._voiceOverFallback =
props.invalidMessage ??
ref?.validationMessage ??
DEFAULT_INVALID_MESSAGE;
delay(() => (state._voiceOverFallback = ''), 1000);
}
} else if (
props.customValidity === 'valid' ||
(ref?.validity.valid &&
(props.required || props.minLength || props.maxLength))
) {
state._descByIds = state._validMessageId;
if (hasVoiceOver()) {
state._voiceOverFallback =
props.validMessage ?? DEFAULT_VALID_MESSAGE;
delay(() => (state._voiceOverFallback = ''), 1000);
}
} else if (props.message) {
state._descByIds = state._messageId;
} else {
Expand Down Expand Up @@ -143,7 +156,7 @@ export default function DBTextarea(props: DBTextareaProps) {
wrap={props.wrap}
spellcheck={props.spellCheck}
autocomplete={props.autocomplete}
onInput={(event: ChangeEvent<HTMLInputElement>) =>
onInput={(event: ChangeEvent<HTMLTextAreaElement>) =>
state.handleInput(event)
}
onChange={(event: ChangeEvent<HTMLTextAreaElement>) =>
Expand Down Expand Up @@ -188,6 +201,13 @@ export default function DBTextarea(props: DBTextareaProps) {
ref?.validationMessage ??
DEFAULT_INVALID_MESSAGE}
</DBInfotext>

{/* * https://www.davidmacd.com/blog/test-aria-describedby-errormessage-aria-live.html
* Currently VoiceOver isn't supporting changes from aria-describedby.
* This is an internal Fallback */}
<span data-visually-hidden="true" role="status">
{state._voiceOverFallback}
</span>
</div>
);
// jscpd:ignore-end
Expand Down
Loading

0 comments on commit 3b071b4

Please sign in to comment.