Browse Source

fix: modal aria error

main
tangjinzhou 2 weeks ago
parent
commit
888457238d
  1. 15
      components/vc-dialog/Content.tsx

15
components/vc-dialog/Content.tsx

@ -5,7 +5,7 @@ import { getTransitionProps } from '../_util/transition';
import dialogPropTypes from './IDialogPropTypes';
import { offset } from './util';
const sentinelStyle = { width: 0, height: 0, overflow: 'hidden', outline: 'none' };
const entityStyle = { outline: 'none' };
export type ContentRef = {
focus: () => void;
changeActive: (next: boolean) => void;
@ -28,14 +28,14 @@ export default defineComponent({
const dialogRef = ref<HTMLDivElement>();
expose({
focus: () => {
sentinelStartRef.value?.focus();
sentinelStartRef.value?.focus({ preventScroll: true });
},
changeActive: next => {
const { activeElement } = document;
if (next && activeElement === sentinelEndRef.value) {
sentinelStartRef.value.focus();
sentinelStartRef.value.focus({ preventScroll: true });
} else if (!next && activeElement === sentinelStartRef.value) {
sentinelEndRef.value.focus();
sentinelEndRef.value.focus({ preventScroll: true });
}
},
});
@ -143,9 +143,10 @@ export default defineComponent({
onMousedown={onMousedown}
onMouseup={onMouseup}
>
<div tabindex={0} ref={sentinelStartRef} style={sentinelStyle} inert/>
{modalRender ? modalRender({ originVNode: content }) : content}
<div tabindex={0} ref={sentinelEndRef} style={sentinelStyle} inert/>
<div tabindex={0} ref={sentinelStartRef} style={entityStyle}>
{modalRender ? modalRender({ originVNode: content }) : content}
</div>
<div tabindex={0} ref={sentinelEndRef} style={sentinelStyle} />
</div>
) : null}
</Transition>

Loading…
Cancel
Save