github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix: modal aria error

pull/7937/head
tangjinzhou 2024-11-11 14:40:49 +08:00
parent b0d9309471
commit 888457238d
1 changed files with 8 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
components/vc-dialog/Content.tsx
View File

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