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

feat: Breadcrumb accessibility improvements

pull/5820/head
tangjinzhou 2022-05-10 15:48:14 +08:00
parent 78045b4b5b
commit 3aedf48eaf
3 changed files with 21 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/breadcrumb/Breadcrumb.tsx
View File

@ -152,7 +152,11 @@ export default defineComponent({
[prefixCls.value]: true, [prefixCls.value]: true,
[`${prefixCls.value}-rtl`]: direction.value === 'rtl', [`${prefixCls.value}-rtl`]: direction.value === 'rtl',
}; };
return <div class={breadcrumbClassName}>{crumbs}</div>; return (
<nav class={breadcrumbClassName}>
<ol>{crumbs}</ol>
</nav>
);
}; };
}, },
}); });

12
components/breadcrumb/BreadcrumbItem.tsx
View File

@ -2,7 +2,7 @@ import type { ExtractPropTypes, PropType } from 'vue';
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import PropTypes from '../_util/vue-types'; import PropTypes from '../_util/vue-types';
import { getPropsSlot } from '../_util/props-util'; import { getPropsSlot } from '../_util/props-util';
import DropDown from '../dropdown/dropdown'; import Dropdown from '../dropdown/dropdown';
import DownOutlined from '@ant-design/icons-vue/DownOutlined'; import DownOutlined from '@ant-design/icons-vue/DownOutlined';
import useConfigInject from '../_util/hooks/useConfigInject'; import useConfigInject from '../_util/hooks/useConfigInject';
import type { MouseEventHandler } from '../_util/EventInterface'; import type { MouseEventHandler } from '../_util/EventInterface';
@ -27,18 +27,18 @@ export default defineComponent({
const { prefixCls } = useConfigInject('breadcrumb', props); const { prefixCls } = useConfigInject('breadcrumb', props);
/** /**
* if overlay is have * if overlay is have
* Wrap a DropDown * Wrap a Dropdown
*/ */
const renderBreadcrumbNode = (breadcrumbItem: JSX.Element, prefixCls: string) => { const renderBreadcrumbNode = (breadcrumbItem: JSX.Element, prefixCls: string) => {
const overlay = getPropsSlot(slots, props, 'overlay'); const overlay = getPropsSlot(slots, props, 'overlay');
if (overlay) { if (overlay) {
return ( return (
<DropDown overlay={overlay} placement="bottom"> <Dropdown overlay={overlay} placement="bottom">
<span class={`${prefixCls}-overlay-link`}> <span class={`${prefixCls}-overlay-link`}>
{breadcrumbItem} {breadcrumbItem}
<DownOutlined /> <DownOutlined />
</span> </span>
</DropDown> </Dropdown>
); );
} }
return breadcrumbItem; return breadcrumbItem;
@ -66,10 +66,10 @@ export default defineComponent({
link = renderBreadcrumbNode(link, prefixCls.value); link = renderBreadcrumbNode(link, prefixCls.value);
if (children) { if (children) {
return ( return (
<span class={cls} style={style}> <li class={cls} style={style}>
{link} {link}
{separator && <span class={`${prefixCls.value}-separator`}>{separator}</span>} {separator && <span class={`${prefixCls.value}-separator`}>{separator}</span>}
</span> </li>
); );
} }
return null; return null;

12
components/breadcrumb/style/index.less
View File

@ -13,6 +13,14 @@
font-size: @breadcrumb-icon-font-size; font-size: @breadcrumb-icon-font-size;
} }
ol {
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style: none;
}
a { a {
color: @breadcrumb-link-color; color: @breadcrumb-link-color;
transition: color 0.3s; transition: color 0.3s;
@ -22,7 +30,7 @@
} }
} }
& > span:last-child { li:last-child {
color: @breadcrumb-last-item-color; color: @breadcrumb-last-item-color;
a { a {
@ -30,7 +38,7 @@
} }
} }
& > span:last-child &-separator { li:last-child &-separator {
display: none; display: none;
} }