perf: improve accessibility with ARIA (#1323)

docs/less/index.less

@@ -6,7 +6,6 @@
 @import '~@rsuite/document-nav/lib/less/index.less';
 @import '~@rsuite/timezone-picker/lib/styles/index.less';
 
-
 /** Components **/
 @import '../components/SearchDrawer/styles';
 @import '../components/TopLevelNav/styles';
@@ -81,7 +80,7 @@ pre {
   background: rgb(0, 43, 54) !important;
   margin-bottom: 20px !important;
 
-  .rs-panel-heading {
+  .rs-panel-header {
     background: #06232c;
     border-radius: 6px;
     color: #fff;

docs/less/markdown.less

@@ -56,4 +56,17 @@
     border-left: 5px solid @code-view-blockquote-color;
     opacity: 0.8;
   }
+  kbd {
+    box-sizing: border-box;
+    font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',
+      Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+    border-radius: 0.25em;
+    background-color: rgb(235, 235, 235);
+    padding: 0.2em 0.3em;
+    border-style: solid;
+    border-color: rgb(200, 200, 200);
+    border-image: initial;
+    border-width: 1px 1px 2px;
+    font-size: 0.875em;
+  }
 }

docs/locales/en-US/index.ts

@@ -41,25 +41,7 @@ export default {
     copyFailed: "Copy the failure, the browser doesn't support this feature",
     shareTwitter: 'Share on Twitter'
   },
-  table: {
-    'tab.resizable': 'Resizable',
-    'tab.fluid-column': 'Fluid',
-    'tab.word-wrap': 'Word Wrap',
-    'tab.custom-cell': 'Custom Cell',
-    'tab.sort': 'Sort',
-    'tab.pagination': 'Pagination',
-    'tab.tree': 'Tree',
-    'tab.expanded': 'Expandable',
-    'tab.edit': 'Editable',
-    'tab.loading': 'Loading',
-    'tab.colspan': 'Colspan',
-    'tab.summary': 'Summary',
-    'tab.fixed': 'Fixed Column',
-    'tab.auto-height': 'Auto Height',
-    'tab.affix-header': 'Affix Header',
-    'tab.affix-horizontal-scrollbar': 'Affix Horizontal Scrollbar',
-    'tab.draggable': 'Draggable(with react-dnd)'
-  },
+
   palette: {
     title: 'Get the product color',
     step1: 'Upload the Logo of the product',

docs/locales/zh-CN/index.ts

@@ -40,25 +40,6 @@ export default {
     copyFailed: '复制失败，浏览器不支持此功能',
     shareTwitter: '分享到 Twitter'
   },
-  table: {
-    'tab.resizable': '可调整列宽',
-    'tab.fluid-column': '流体列宽',
-    'tab.word-wrap': '自动换行',
-    'tab.custom-cell': '自定义列',
-    'tab.sort': '排序',
-    'tab.pagination': '分页',
-    'tab.tree': '树形展示',
-    'tab.expanded': '可展开',
-    'tab.edit': '可编辑',
-    'tab.loading': '加载中',
-    'tab.colspan': '合并单元格',
-    'tab.summary': '汇总',
-    'tab.fixed': '锁定列',
-    'tab.auto-height': '自动高度',
-    'tab.affix-header': '固定表头在页首',
-    'tab.affix-horizontal-scrollbar': '固定横向滚动条在页尾',
-    'tab.draggable': '可拖拽(与 react-dnd 组合)'
-  },
   palette: {
     title: '分析产品商标颜色',
     step1: '上传产品的 Logo',

docs/package.json

@@ -31,8 +31,6 @@
     "react-code-view": "^1.2.5",
     "react-color": "^2.18.0",
     "react-device-detect": "^1.11.14",
-    "react-dnd": "^10.0.2",
-    "react-dnd-html5-backend": "^10.0.2",
     "react-dom": "^16.13.1",
     "react-json-tree": "^0.11.2",
     "react-loadable": "^5.5.0",

docs/pages/components/css-reset/en-US/index.md

@@ -4,6 +4,42 @@ With regard to typography, after using the React Suite style, you can use the HT
 
 > If you don't need these styles , you can [disable import it][config-reset-import].
 
-<!--{demo}-->
+### `<a>`: The Anchor element
+
+The HTML `<a>` element (or anchor element), along with its href attribute, creates a hyperlink to other web pages, files, locations within the same page, email addresses, or any other URL.
+
+You can also implement a Link through the Button component.
+
+<!--{include:`anchor.md`}-->
+
+### `<h1>`–`<h6>`: The HTML Section Heading elements
+
+The following code shows all the heading levels, in use.
+
+<!--{include:`heading.md`}-->
+
+### `<p>`: The Paragraph element
+
+The HTML `<p>` element represents a paragraph. Paragraphs are usually represented in visual media as blocks of text separated from adjacent blocks by blank lines and/or first-line indentation, but HTML paragraphs can be any structural grouping of related content, such as images or form fields.
+
+<!--{include:`paragraph.md`}-->
+
+### `<ul>`: The Unordered List element
+
+The HTML `<ul>` element represents an unordered list of items, typically rendered as a bulleted list.
+
+<!--{include:`list-ul.md`}-->
+
+### `<ol>`: The Ordered List element
+
+The HTML `<ol>` element represents an ordered list of items, typically rendered as a numbered list.
+
+<!--{include:`list-ol.md`}-->
+
+### `<dl>`：The Description List element
+
+The HTML `<dl>` element represents a description list. The element encloses a list of groups of terms (specified using the `<dt>` element) and descriptions (provided by `<dd>` elements). Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs).
+
+<!--{include:`list-dl.md`}-->
 
 [config-reset-import]: /en/guide/themes#Disable%20styles%20reset

docs/pages/components/css-reset/en-US/anchor.md → docs/pages/components/css-reset/fragments/anchor.md

@@ -1,8 +1,3 @@
-### `<a>`: The Anchor element
-
-The HTML `<a>` element (or anchor element), along with its href attribute, creates a hyperlink to other web pages, files, locations within the same page, email addresses, or any other URL.
-
-You can also implement a Link through the Button component.
 
 <!--start-code-->
 

docs/pages/components/css-reset/en-US/heading.md → docs/pages/components/css-reset/fragments/heading.md

@@ -1,7 +1,3 @@
-### `<h1>`–`<h6>`: The HTML Section Heading elements
-
-The following code shows all the heading levels, in use.
-
 <!--start-code-->
 
 ```js

docs/pages/components/css-reset/fragments/list-dl.md

@@ -0,0 +1,19 @@
+<!--start-code-->
+
+```js
+const instance = (
+  <dl>
+    <dt>Name:</dt>
+    <dd>React Suite</dd>
+    <dt>Born:</dt>
+    <dd>2016</dd>
+    <dt>Birthplace:</dt>
+    <dd>China</dd>
+    <dt>Color:</dt>
+    <dd>Blue</dd>
+  </dl>
+);
+ReactDOM.render(instance);
+```
+
+<!--end-code-->

docs/pages/components/css-reset/en-US/list-ol.md → docs/pages/components/css-reset/fragments/list-ol.md

@@ -1,7 +1,3 @@
-### `<ol>`: The Ordered List element
-
-The HTML `<ol>` element represents an ordered list of items, typically rendered as a numbered list.
-
 <!--start-code-->
 
 ```js

docs/pages/components/css-reset/en-US/list-ul.md → docs/pages/components/css-reset/fragments/list-ul.md

@@ -1,7 +1,3 @@
-### `<ul>`: The Unordered List element
-
-The HTML `<ul>` element represents an unordered list of items, typically rendered as a bulleted list.
-
 <!--start-code-->
 
 ```js

docs/pages/components/css-reset/en-US/paragraph.md → docs/pages/components/css-reset/fragments/paragraph.md

@@ -1,7 +1,3 @@
-### `<p>`: The Paragraph element
-
-The HTML `<p>` element represents a paragraph. Paragraphs are usually represented in visual media as blocks of text separated from adjacent blocks by blank lines and/or first-line indentation, but HTML paragraphs can be any structural grouping of related content, such as images or form fields.
-
 <!--start-code-->
 
 ```js

docs/pages/components/css-reset/index.tsx

@@ -2,10 +2,5 @@ import * as React from 'react';
 import DefaultPage from '@/components/Page';
 
 export default function Page() {
-  return (
-    <DefaultPage
-      examples={['anchor', 'heading', 'paragraph', 'list-ul', 'list-ol', 'list-dl']}
-      dependencies={{}}
-    />
-  );
+  return <DefaultPage dependencies={{}} />;
 }