Merge pull request #1747 from weseek/support/omit-legend-tag

support/replace legend with header

src/client/js/components/Admin/ExportArchiveData/SelectCollectionsModal.jsx

@@ -192,30 +192,26 @@ class SelectCollectionsModal extends React.Component {
             </div>
             <div className="row mt-4">
               <div className="col-sm-12">
-                {/* FIXME: use something instead of <legend> */}
-                <legend>Page Collections</legend>
+                <h3 className="admin-setting-header">Page Collections</h3>
                 {this.renderGroups(GROUPS_PAGE)}
               </div>
             </div>
             <div className="row mt-4">
               <div className="col-sm-12">
-                {/* FIXME: use something instead of <legend> */}
-                <legend>User Collections</legend>
+                <h3 className="admin-setting-header">User Collections</h3>
                 {this.renderGroups(GROUPS_USER, 'danger')}
                 {this.renderWarnForUser()}
               </div>
             </div>
             <div className="row mt-4">
               <div className="col-sm-12">
-                {/* FIXME: use something instead of <legend> */}
-                <legend>Config Collections</legend>
+                <h3 className="admin-setting-header">Config Collections</h3>
                 {this.renderGroups(GROUPS_CONFIG)}
               </div>
             </div>
             <div className="row mt-4">
               <div className="col-sm-12">
-                {/* FIXME: use something instead of <legend> */}
-                <legend>Other Collections</legend>
+                <h3 className="admin-setting-header">Other Collections</h3>
                 {this.renderOthers()}
               </div>
             </div>

src/client/js/components/Admin/ImportData/GrowiArchive/ImportForm.jsx

@@ -345,8 +345,7 @@ class ImportForm extends React.Component {
     return (
       <div className="mt-4 row">
         <div className="col-12">
-          {/* FIXME: use something instead of <legend> */}
-          <legend>{groupName} Collections</legend>
+          <h3 className="admin-setting-header">{groupName} Collections</h3>
           { wellContent != null && (
             <div className="card well small" role="alert">
               <ul>

src/client/js/components/Admin/ImportDataPage.jsx

@@ -143,8 +143,7 @@ class ImportDataPage extends React.Component {
           role="form"
         >
           <fieldset>
-            {/* FIXME: use something instead of <legend> */}
-            <legend>{t('admin:importer_management.import_from', { from: 'esa.io' })}</legend>
+            <h2 className="admin-setting-header">{t('admin:importer_management.import_from', { from: 'esa.io' })}</h2>
             <table className="table table-bordered table-mapping">
               <thead>
                 <tr>
@@ -234,8 +233,7 @@ class ImportDataPage extends React.Component {
           role="form"
         >
           <fieldset>
-            {/* FIXME: use something instead of <legend> */}
-            <legend>{t('admin:importer_management.import_from', { from: 'Qiita:Team' })}</legend>
+            <h2 className="admin-setting-header">{t('admin:importer_management.import_from', { from: 'Qiita:Team' })}</h2>
             <table className="table table-bordered table-mapping">
               <thead>
                 <tr>

src/client/js/components/Admin/UserGroupDetail/UserGroupDetailPage.jsx

@@ -23,12 +23,10 @@ class UserGroupDetailPage extends React.Component {
         <div className="m-t-20 form-box">
           <UserGroupEditForm />
         </div>
-        {/* FIXME: use something instead of <legend> */}
-        <legend className="m-t-20">{t('admin:user_group_management.user_list')}</legend>
+        <h2 className="admin-setting-header m-t-20">{t('admin:user_group_management.user_list')}</h2>
         <UserGroupUserTable />
         <UserGroupUserModal />
-        {/* FIXME: use something instead of <legend> */}
-        <legend className="m-t-20">{t('Page')}</legend>
+        <h2 className="admin-setting-header m-t-20">{t('Page')}</h2>
         <div className="page-list">
           <UserGroupPageList />
         </div>

src/client/js/components/Admin/UserGroupDetail/UserGroupEditForm.jsx

@@ -63,8 +63,7 @@ class UserGroupEditForm extends React.Component {
     return (
       <form className="form-horizontal" onSubmit={this.handleSubmit}>
         <fieldset>
-          {/* FIXME: use something instead of <legend> */}
-          <legend>{t('admin:user_group_management.basic_info')}</legend>
+          <h2 className="admin-setting-header">{t('admin:user_group_management.basic_info')}</h2>
           <div className="form-group">
             <label htmlFor="name" className="col-sm-2 control-label">{t('Name')}</label>
             <div className="col-sm-4">