feat: Breadcrumb accessibility improvements

Author: tangjinzhou

components/breadcrumb/Breadcrumb.tsx

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

components/breadcrumb/BreadcrumbItem.tsx

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

components/breadcrumb/style/index.less

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