⚡ Use semantic tag names in Layout (#14806)

close #14801

components/config-provider/__tests__/__snapshots__/components.test.js.snap

@@ -7525,87 +7525,87 @@ exports[`ConfigProvider components InputNumber prefixCls 1`] = `
 `;
 
 exports[`ConfigProvider components Layout configProvider 1`] = `
-<div
+<section
   class="config-layout"
 >
-  <div
+  <aside
     class="config-layout-sider config-layout-sider-dark"
     style="flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
   >
     <div
       class="config-layout-sider-children"
     />
-  </div>
-  <div
+  </aside>
+  <section
     class="config-layout"
   >
-    <div
+    <header
       class="config-layout-header"
     />
-    <div
+    <main
       class="config-layout-content"
     />
-    <div
+    <footer
       class="config-layout-footer"
     />
-  </div>
-</div>
+  </section>
+</section>
 `;
 
 exports[`ConfigProvider components Layout normal 1`] = `
-<div
+<section
   class="ant-layout"
 >
-  <div
+  <aside
     class="ant-layout-sider ant-layout-sider-dark"
     style="flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
   >
     <div
       class="ant-layout-sider-children"
     />
-  </div>
-  <div
+  </aside>
+  <section
     class="ant-layout"
   >
-    <div
+    <header
       class="ant-layout-header"
     />
-    <div
+    <main
       class="ant-layout-content"
     />
-    <div
+    <footer
       class="ant-layout-footer"
     />
-  </div>
-</div>
+  </section>
+</section>
 `;
 
 exports[`ConfigProvider components Layout prefixCls 1`] = `
-<div
+<section
   class="prefix-Layout"
 >
-  <div
+  <aside
     class="prefix-sider prefix-sider-dark"
     style="flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
   >
     <div
       class="prefix-sider-children"
     />
-  </div>
-  <div
+  </aside>
+  <section
     class="prefix-Layout"
   >
-    <div
+    <header
       class="prefix-header"
     />
-    <div
+    <main
       class="prefix-content"
     />
-    <div
+    <footer
       class="prefix-footer"
     />
-  </div>
-</div>
+  </section>
+</section>
 `;
 
 exports[`ConfigProvider components List configProvider 1`] = `

components/layout/Sider.tsx

@@ -249,10 +249,10 @@ class Sider extends React.Component<SiderProps, SiderState> {
       [`${prefixCls}-zero-width`]: parseFloat(siderWidth) === 0,
     });
     return (
-      <div className={siderCls} {...divProps} style={divStyle}>
+      <aside className={siderCls} {...divProps} style={divStyle}>
         <div className={`${prefixCls}-children`}>{this.props.children}</div>
         {collapsible || (this.state.below && zeroWidthTrigger) ? triggerDom : null}
-      </div>
+      </aside>
     );
   };
 

components/layout/__tests__/__snapshots__/demo.test.js.snap

@@ -2,37 +2,37 @@
 
 exports[`renders ./components/layout/demo/basic.md correctly 1`] = `
 <div>
-  <div
+  <section
     class="ant-layout"
   >
-    <div
+    <header
       class="ant-layout-header"
     >
       Header
-    </div>
-    <div
+    </header>
+    <main
       class="ant-layout-content"
     >
       Content
-    </div>
-    <div
+    </main>
+    <footer
       class="ant-layout-footer"
     >
       Footer
-    </div>
-  </div>
-  <div
+    </footer>
+  </section>
+  <section
     class="ant-layout"
   >
-    <div
+    <header
       class="ant-layout-header"
     >
       Header
-    </div>
-    <div
+    </header>
+    <section
       class="ant-layout"
     >
-      <div
+      <aside
         class="ant-layout-sider ant-layout-sider-dark"
         style="flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
       >
@@ -41,36 +41,36 @@ exports[`renders ./components/layout/demo/basic.md correctly 1`] = `
         >
           Sider
         </div>
-      </div>
-      <div
+      </aside>
+      <main
         class="ant-layout-content"
       >
         Content
-      </div>
-    </div>
-    <div
+      </main>
+    </section>
+    <footer
       class="ant-layout-footer"
     >
       Footer
-    </div>
-  </div>
-  <div
+    </footer>
+  </section>
+  <section
     class="ant-layout"
   >
-    <div
+    <header
       class="ant-layout-header"
     >
       Header
-    </div>
-    <div
+    </header>
+    <section
       class="ant-layout"
     >
-      <div
+      <main
         class="ant-layout-content"
       >
         Content
-      </div>
-      <div
+      </main>
+      <aside
         class="ant-layout-sider ant-layout-sider-dark"
         style="flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
       >
@@ -79,18 +79,18 @@ exports[`renders ./components/layout/demo/basic.md correctly 1`] = `
         >
           Sider
         </div>
-      </div>
-    </div>
-    <div
+      </aside>
+    </section>
+    <footer
       class="ant-layout-footer"
     >
       Footer
-    </div>
-  </div>
-  <div
+    </footer>
+  </section>
+  <section
     class="ant-layout"
   >
-    <div
+    <aside
       class="ant-layout-sider ant-layout-sider-dark"
       style="flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
     >
@@ -99,35 +99,35 @@ exports[`renders ./components/layout/demo/basic.md correctly 1`] = `
       >
         Sider
       </div>
-    </div>
-    <div
+    </aside>
+    <section
       class="ant-layout"
     >
-      <div
+      <header
         class="ant-layout-header"
       >
         Header
-      </div>
-      <div
+      </header>
+      <main
         class="ant-layout-content"
       >
         Content
-      </div>
-      <div
+      </main>
+      <footer
         class="ant-layout-footer"
       >
         Footer
-      </div>
-    </div>
-  </div>
+      </footer>
+    </section>
+  </section>
 </div>
 `;
 
 exports[`renders ./components/layout/demo/custom-trigger.md correctly 1`] = `
-<div
+<section
   class="ant-layout"
 >
-  <div
+  <aside
     class="ant-layout-sider ant-layout-sider-dark"
     style="flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
   >
@@ -224,11 +224,11 @@ exports[`renders ./components/layout/demo/custom-trigger.md correctly 1`] = `
         </li>
       </ul>
     </div>
-  </div>
-  <div
+  </aside>
+  <section
     class="ant-layout"
   >
-    <div
+    <header
       class="ant-layout-header"
       style="background:#fff;padding:0"
     >
@@ -251,22 +251,22 @@ exports[`renders ./components/layout/demo/custom-trigger.md correctly 1`] = `
           />
         </svg>
       </i>
-    </div>
-    <div
+    </header>
+    <main
       class="ant-layout-content"
       style="margin:24px 16px;padding:24px;background:#fff;min-height:280px"
     >
       Content
-    </div>
-  </div>
-</div>
+    </main>
+  </section>
+</section>
 `;
 
 exports[`renders ./components/layout/demo/fixed.md correctly 1`] = `
-<div
+<section
   class="ant-layout"
 >
-  <div
+  <header
     class="ant-layout-header"
     style="position:fixed;z-index:1;width:100%"
   >
@@ -369,8 +369,8 @@ exports[`renders ./components/layout/demo/fixed.md correctly 1`] = `
         </div>
       </li>
     </ul>
-  </div>
-  <div
+  </header>
+  <main
     class="ant-layout-content"
     style="padding:0 50px;margin-top:64px"
   >
@@ -420,21 +420,21 @@ exports[`renders ./components/layout/demo/fixed.md correctly 1`] = `
     >
       Content
     </div>
-  </div>
-  <div
+  </main>
+  <footer
     class="ant-layout-footer"
     style="text-align:center"
   >
     Ant Design ©2018 Created by Ant UED
-  </div>
-</div>
+  </footer>
+</section>
 `;
 
 exports[`renders ./components/layout/demo/fixed-sider.md correctly 1`] = `
-<div
+<section
   class="ant-layout"
 >
-  <div
+  <aside
     class="ant-layout-sider ant-layout-sider-dark"
     style="overflow:auto;height:100vh;position:fixed;left:0;flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
   >
@@ -682,16 +682,16 @@ exports[`renders ./components/layout/demo/fixed-sider.md correctly 1`] = `
         </li>
       </ul>
     </div>
-  </div>
-  <div
+  </aside>
+  <section
     class="ant-layout"
     style="margin-left:200px"
   >
-    <div
+    <header
       class="ant-layout-header"
       style="background:#fff;padding:0"
     />
-    <div
+    <main
       class="ant-layout-content"
       style="margin:24px 16px 0;overflow:initial"
     >
@@ -794,22 +794,22 @@ exports[`renders ./components/layout/demo/fixed-sider.md correctly 1`] = `
         <br />
         content
       </div>
-    </div>
-    <div
+    </main>
+    <footer
       class="ant-layout-footer"
       style="text-align:center"
     >
       Ant Design ©2018 Created by Ant UED
-    </div>
-  </div>
-</div>
+    </footer>
+  </section>
+</section>
 `;
 
 exports[`renders ./components/layout/demo/responsive.md correctly 1`] = `
-<div
+<section
   class="ant-layout"
 >
-  <div
+  <aside
     class="ant-layout-sider ant-layout-sider-dark"
     style="flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
   >
@@ -941,15 +941,15 @@ exports[`renders ./components/layout/demo/responsive.md correctly 1`] = `
         </li>
       </ul>
     </div>
-  </div>
-  <div
+  </aside>
+  <section
     class="ant-layout"
   >
-    <div
+    <header
       class="ant-layout-header"
       style="background:#fff;padding:0"
     />
-    <div
+    <main
       class="ant-layout-content"
       style="margin:24px 16px 0"
     >
@@ -958,23 +958,23 @@ exports[`renders ./components/layout/demo/responsive.md correctly 1`] = `
       >
         content
       </div>
-    </div>
-    <div
+    </main>
+    <footer
       class="ant-layout-footer"
       style="text-align:center"
     >
       Ant Design ©2018 Created by Ant UED
-    </div>
-  </div>
-</div>
+    </footer>
+  </section>
+</section>
 `;
 
 exports[`renders ./components/layout/demo/side.md correctly 1`] = `
-<div
+<section
   class="ant-layout"
   style="min-height:100vh"
 >
-  <div
+  <aside
     class="ant-layout-sider ant-layout-sider-dark ant-layout-sider-has-trigger"
     style="flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
   >
@@ -1172,15 +1172,15 @@ exports[`renders ./components/layout/demo/side.md correctly 1`] = `
         </svg>
       </i>
     </div>
-  </div>
-  <div
+  </aside>
+  <section
     class="ant-layout"
   >
-    <div
+    <header
       class="ant-layout-header"
       style="background:#fff;padding:0"
     />
-    <div
+    <main
       class="ant-layout-content"
       style="margin:0 16px"
     >
@@ -1218,22 +1218,22 @@ exports[`renders ./components/layout/demo/side.md correctly 1`] = `
       >
         Bill is a cat.
       </div>
-    </div>
-    <div
+    </main>
+    <footer
       class="ant-layout-footer"
       style="text-align:center"
     >
       Ant Design ©2018 Created by Ant UED
-    </div>
-  </div>
-</div>
+    </footer>
+  </section>
+</section>
 `;
 
 exports[`renders ./components/layout/demo/top.md correctly 1`] = `
-<div
+<section
   class="layout ant-layout"
 >
-  <div
+  <header
     class="ant-layout-header"
   >
     <div
@@ -1335,8 +1335,8 @@ exports[`renders ./components/layout/demo/top.md correctly 1`] = `
         </div>
       </li>
     </ul>
-  </div>
-  <div
+  </header>
+  <main
     class="ant-layout-content"
     style="padding:0 50px"
   >
@@ -1386,21 +1386,21 @@ exports[`renders ./components/layout/demo/top.md correctly 1`] = `
     >
       Content
     </div>
-  </div>
-  <div
+  </main>
+  <footer
     class="ant-layout-footer"
     style="text-align:center"
   >
     Ant Design ©2018 Created by Ant UED
-  </div>
-</div>
+  </footer>
+</section>
 `;
 
 exports[`renders ./components/layout/demo/top-side.md correctly 1`] = `
-<div
+<section
   class="ant-layout"
 >
-  <div
+  <header
     class="header ant-layout-header"
   >
     <div
@@ -1502,8 +1502,8 @@ exports[`renders ./components/layout/demo/top-side.md correctly 1`] = `
         </div>
       </li>
     </ul>
-  </div>
-  <div
+  </header>
+  <main
     class="ant-layout-content"
     style="padding:0 50px"
   >
@@ -1548,11 +1548,11 @@ exports[`renders ./components/layout/demo/top-side.md correctly 1`] = `
         </span>
       </span>
     </div>
-    <div
+    <section
       class="ant-layout"
       style="padding:24px 0;background:#fff"
     >
-      <div
+      <aside
         class="ant-layout-sider ant-layout-sider-dark"
         style="background:#fff;flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
       >
@@ -1711,29 +1711,29 @@ exports[`renders ./components/layout/demo/top-side.md correctly 1`] = `
             </li>
           </ul>
         </div>
-      </div>
-      <div
+      </aside>
+      <main
         class="ant-layout-content"
         style="padding:0 24px;min-height:280px"
       >
         Content
-      </div>
-    </div>
-  </div>
-  <div
+      </main>
+    </section>
+  </main>
+  <footer
     class="ant-layout-footer"
     style="text-align:center"
   >
     Ant Design ©2018 Created by Ant UED
-  </div>
-</div>
+  </footer>
+</section>
 `;
 
 exports[`renders ./components/layout/demo/top-side-2.md correctly 1`] = `
-<div
+<section
   class="ant-layout"
 >
-  <div
+  <header
     class="header ant-layout-header"
   >
     <div
@@ -1835,11 +1835,11 @@ exports[`renders ./components/layout/demo/top-side-2.md correctly 1`] = `
         </div>
       </li>
     </ul>
-  </div>
-  <div
+  </header>
+  <section
     class="ant-layout"
   >
-    <div
+    <aside
       class="ant-layout-sider ant-layout-sider-dark"
       style="background:#fff;flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
     >
@@ -1998,8 +1998,8 @@ exports[`renders ./components/layout/demo/top-side-2.md correctly 1`] = `
           </li>
         </ul>
       </div>
-    </div>
-    <div
+    </aside>
+    <section
       class="ant-layout"
       style="padding:0 24px 24px"
     >
@@ -2044,13 +2044,13 @@ exports[`renders ./components/layout/demo/top-side-2.md correctly 1`] = `
           </span>
         </span>
       </div>
-      <div
+      <main
         class="ant-layout-content"
         style="background:#fff;padding:24px;margin:0;min-height:280px"
       >
         Content
-      </div>
-    </div>
-  </div>
-</div>
+      </main>
+    </section>
+  </section>
+</section>
 `;

components/layout/__tests__/__snapshots__/index.test.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Layout renders string width correctly 1`] = `
-<div
+<aside
   class="ant-layout-sider ant-layout-sider-dark"
   style="flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
 >
@@ -10,5 +10,5 @@ exports[`Layout renders string width correctly 1`] = `
   >
     Sider
   </div>
-</div>
+</aside>
 `;

components/layout/layout.tsx

@@ -6,13 +6,15 @@ import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
 
 export interface GeneratorProps {
   suffixCls: string;
+  tagName: 'header' | 'footer' | 'main' | 'section';
 }
 export interface BasicProps extends React.HTMLAttributes<HTMLDivElement> {
   prefixCls?: string;
   hasSider?: boolean;
+  tagName: 'header' | 'footer' | 'main' | 'section';
 }
 
-function generator({ suffixCls }: GeneratorProps) {
+function generator({ suffixCls, tagName }: GeneratorProps) {
   return (BasicComponent: React.ComponentClass<BasicProps>): any => {
     return class Adapter extends React.Component<BasicProps, any> {
       static Header: any;
@@ -24,7 +26,7 @@ function generator({ suffixCls }: GeneratorProps) {
         const { prefixCls: customizePrefixCls } = this.props;
         const prefixCls = getPrefixCls(suffixCls, customizePrefixCls);
 
-        return <BasicComponent prefixCls={prefixCls} {...this.props} />;
+        return <BasicComponent prefixCls={prefixCls} tagName={tagName} {...this.props} />;
       };
 
       render() {
@@ -36,12 +38,12 @@ function generator({ suffixCls }: GeneratorProps) {
 
 class Basic extends React.Component<BasicProps, any> {
   render() {
-    const { prefixCls, className, children, ...others } = this.props;
-    const divCls = classNames(className, prefixCls);
+    const { prefixCls, className, children, tagName: CustomElement, ...others } = this.props;
+    const classString = classNames(className, prefixCls);
     return (
-      <div className={divCls} {...others}>
+      <CustomElement className={classString} {...others}>
         {children}
-      </div>
+      </CustomElement>
     );
   }
 }
@@ -74,14 +76,14 @@ class BasicLayout extends React.Component<BasicProps, BasicLayoutState> {
   }
 
   render() {
-    const { prefixCls, className, children, hasSider, ...others } = this.props;
-    const divCls = classNames(className, prefixCls, {
+    const { prefixCls, className, children, hasSider, tagName: CustomElement, ...others } = this.props;
+    const classString = classNames(className, prefixCls, {
       [`${prefixCls}-has-sider`]: hasSider || this.state.siders.length > 0,
     });
     return (
-      <div className={divCls} {...others}>
+      <CustomElement className={classString} {...others}>
         {children}
-      </div>
+      </CustomElement>
     );
   }
 }
@@ -93,18 +95,22 @@ const Layout: React.ComponentClass<BasicProps> & {
   Sider: React.ComponentClass<SiderProps>;
 } = generator({
   suffixCls: 'layout',
+  tagName: 'section',
 })(BasicLayout);
 
 const Header = generator({
   suffixCls: 'layout-header',
+  tagName: 'header',
 })(Basic);
 
 const Footer = generator({
   suffixCls: 'layout-footer',
+  tagName: 'footer',
 })(Basic);
 
 const Content = generator({
   suffixCls: 'layout-content',
+  tagName: 'main',
 })(Basic);
 
 Layout.Header = Header;