From 302e776f41e08c80de9e2548f7925f2a6de93e66 Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <asaadmahmood@users.noreply.github.com>
Date: Fri, 12 Jul 2019 04:30:26 +0500
Subject: [PATCH] MM-16044 - Updating radio buttons (a11y) (#3085)

* MM-16044 - Updating radio buttons (a11y)

* Updating test
---
 .../__snapshots__/expand_view.test.jsx.snap   |  22 +-
 .../components/expand_view.jsx                |  20 +-
 .../new_channel_modal.test.jsx.snap           |  69 +--
 .../new_channel_modal/new_channel_modal.jsx   |  11 +-
 .../team_general_tab/team_general_tab.jsx     |   7 +-
 .../join_leave_section.test.jsx.snap          |   9 +-
 .../join_leave_section/join_leave_section.jsx |   7 +-
 .../advanced/user_settings_advanced.jsx       |   7 +-
 ...esktop_notification_settings.test.jsx.snap | 481 +++++++++---------
 .../manage_auto_responder.test.jsx.snap       |  14 +-
 .../desktop_notification_settings.jsx         | 149 +++---
 .../email_notification_setting.test.jsx.snap  |  83 +--
 .../email_notification_setting.jsx            |  15 +-
 .../notifications/manage_auto_responder.jsx   |   6 +-
 .../user_settings_notifications.jsx           |  36 +-
 .../user_settings_sidebar.test.jsx.snap       |   2 +-
 .../sidebar/user_settings_sidebar.jsx         |  49 +-
 sass/layout/_forms.scss                       |   7 +
 18 files changed, 487 insertions(+), 507 deletions(-)

diff --git a/components/channel_notifications_modal/components/__snapshots__/expand_view.test.jsx.snap b/components/channel_notifications_modal/components/__snapshots__/expand_view.test.jsx.snap
index 91b46bb69766..82ac8b1ecb35 100644
--- a/components/channel_notifications_modal/components/__snapshots__/expand_view.test.jsx.snap
+++ b/components/channel_notifications_modal/components/__snapshots__/expand_view.test.jsx.snap
@@ -12,7 +12,7 @@ exports[`components/channel_notifications_modal/ExpandView should match snapshot
   inputs={
     Array [
       <div>
-        <div>
+        <fieldset>
           <div
             className="radio"
           >
@@ -22,6 +22,7 @@ exports[`components/channel_notifications_modal/ExpandView should match snapshot
               <input
                 checked={false}
                 id="channelNotificationGlobalDefault"
+                name="channelDesktopNotifications"
                 onChange={[Function]}
                 type="radio"
                 value="default"
@@ -42,6 +43,7 @@ exports[`components/channel_notifications_modal/ExpandView should match snapshot
               <input
                 checked={true}
                 id="channelNotificationAllActivity"
+                name="channelDesktopNotifications"
                 onChange={[Function]}
                 type="radio"
                 value="all"
@@ -61,6 +63,7 @@ exports[`components/channel_notifications_modal/ExpandView should match snapshot
               <input
                 checked={false}
                 id="channelNotificationMentions"
+                name="channelDesktopNotifications"
                 onChange={[Function]}
                 type="radio"
                 value="mention"
@@ -78,6 +81,7 @@ exports[`components/channel_notifications_modal/ExpandView should match snapshot
               <input
                 checked={false}
                 id="channelNotificationNever"
+                name="channelDesktopNotifications"
                 onChange={[Function]}
                 type="radio"
                 value="none"
@@ -88,7 +92,7 @@ exports[`components/channel_notifications_modal/ExpandView should match snapshot
               />
             </label>
           </div>
-        </div>
+        </fieldset>
       </div>,
     ]
   }
@@ -117,7 +121,7 @@ exports[`components/channel_notifications_modal/ExpandView should match snapshot
   inputs={
     Array [
       <div>
-        <div>
+        <fieldset>
           <div
             className="radio"
           >
@@ -127,6 +131,7 @@ exports[`components/channel_notifications_modal/ExpandView should match snapshot
               <input
                 checked={false}
                 id="channelNotificationUnmute"
+                name="channelNotificationMute"
                 onChange={[Function]}
                 type="radio"
                 value="mention"
@@ -146,6 +151,7 @@ exports[`components/channel_notifications_modal/ExpandView should match snapshot
               <input
                 checked={true}
                 id="channelNotificationMute"
+                name="channelNotificationMute"
                 onChange={[Function]}
                 type="radio"
                 value="all"
@@ -156,7 +162,7 @@ exports[`components/channel_notifications_modal/ExpandView should match snapshot
               />
             </label>
           </div>
-        </div>
+        </fieldset>
       </div>,
     ]
   }
@@ -185,7 +191,7 @@ exports[`components/channel_notifications_modal/ExpandView should match snapshot
   inputs={
     Array [
       <div>
-        <div>
+        <fieldset>
           <div
             className="radio"
           >
@@ -195,6 +201,7 @@ exports[`components/channel_notifications_modal/ExpandView should match snapshot
               <input
                 checked={false}
                 id="channelNotificationGlobalDefault"
+                name="channelDesktopNotifications"
                 onChange={[Function]}
                 type="radio"
                 value="default"
@@ -215,6 +222,7 @@ exports[`components/channel_notifications_modal/ExpandView should match snapshot
               <input
                 checked={true}
                 id="channelNotificationAllActivity"
+                name="channelDesktopNotifications"
                 onChange={[Function]}
                 type="radio"
                 value="all"
@@ -234,6 +242,7 @@ exports[`components/channel_notifications_modal/ExpandView should match snapshot
               <input
                 checked={false}
                 id="channelNotificationMentions"
+                name="channelDesktopNotifications"
                 onChange={[Function]}
                 type="radio"
                 value="mention"
@@ -251,6 +260,7 @@ exports[`components/channel_notifications_modal/ExpandView should match snapshot
               <input
                 checked={false}
                 id="channelNotificationNever"
+                name="channelDesktopNotifications"
                 onChange={[Function]}
                 type="radio"
                 value="none"
@@ -261,7 +271,7 @@ exports[`components/channel_notifications_modal/ExpandView should match snapshot
               />
             </label>
           </div>
-        </div>
+        </fieldset>
       </div>,
     ]
   }
diff --git a/components/channel_notifications_modal/components/expand_view.jsx b/components/channel_notifications_modal/components/expand_view.jsx
index 36683d2873bd..868c105b3e68 100644
--- a/components/channel_notifications_modal/components/expand_view.jsx
+++ b/components/channel_notifications_modal/components/expand_view.jsx
@@ -25,11 +25,12 @@ export default function ExpandView({
     const inputs = [(
         <div key='channel-notification-level-radio'>
             {(section === NotificationSections.DESKTOP || section === NotificationSections.PUSH) &&
-            <div>
+            <fieldset>
                 <div className='radio'>
                     <label className=''>
                         <input
                             id='channelNotificationGlobalDefault'
+                            name='channelDesktopNotifications'
                             type='radio'
                             value={NotificationLevels.DEFAULT}
                             checked={memberNotifyLevel === NotificationLevels.DEFAULT}
@@ -46,6 +47,7 @@ export default function ExpandView({
                     <label className=''>
                         <input
                             id='channelNotificationAllActivity'
+                            name='channelDesktopNotifications'
                             type='radio'
                             value={NotificationLevels.ALL}
                             checked={memberNotifyLevel === NotificationLevels.ALL}
@@ -61,6 +63,7 @@ export default function ExpandView({
                     <label className=''>
                         <input
                             id='channelNotificationMentions'
+                            name='channelDesktopNotifications'
                             type='radio'
                             value={NotificationLevels.MENTION}
                             checked={memberNotifyLevel === NotificationLevels.MENTION}
@@ -76,6 +79,7 @@ export default function ExpandView({
                     <label>
                         <input
                             id='channelNotificationNever'
+                            name='channelDesktopNotifications'
                             type='radio'
                             value={NotificationLevels.NONE}
                             checked={memberNotifyLevel === NotificationLevels.NONE}
@@ -87,14 +91,15 @@ export default function ExpandView({
                         />
                     </label>
                 </div>
-            </div>
+            </fieldset>
             }
             {section === NotificationSections.IGNORE_CHANNEL_MENTIONS &&
-                <div>
+                <fieldset>
                     <div className='radio'>
                         <label>
                             <input
                                 id='ignoreChannelMentionsOn'
+                                name='ignoreChannelMentions'
                                 type='radio'
                                 value={IgnoreChannelMentions.ON}
                                 checked={ignoreChannelMentions === IgnoreChannelMentions.ON}
@@ -112,6 +117,7 @@ export default function ExpandView({
                         <label>
                             <input
                                 id='ignoreChannelMentionsOff'
+                                name='ignoreChannelMentions'
                                 type='radio'
                                 value={IgnoreChannelMentions.OFF}
                                 checked={ignoreChannelMentions === IgnoreChannelMentions.OFF}
@@ -125,14 +131,15 @@ export default function ExpandView({
                             />
                         </label>
                     </div>
-                </div>
+                </fieldset>
             }
             {section === NotificationSections.MARK_UNREAD &&
-            <div>
+            <fieldset>
                 <div className='radio'>
                     <label className=''>
                         <input
                             id='channelNotificationUnmute'
+                            name='channelNotificationMute'
                             type='radio'
                             value={NotificationLevels.MENTION}
                             checked={memberNotifyLevel === NotificationLevels.MENTION}
@@ -148,6 +155,7 @@ export default function ExpandView({
                     <label className=''>
                         <input
                             id='channelNotificationMute'
+                            name='channelNotificationMute'
                             type='radio'
                             value={NotificationLevels.ALL}
                             checked={memberNotifyLevel === NotificationLevels.ALL}
@@ -159,7 +167,7 @@ export default function ExpandView({
                         />
                     </label>
                 </div>
-            </div>
+            </fieldset>
             }
         </div>
     )];
diff --git a/components/new_channel_modal/__snapshots__/new_channel_modal.test.jsx.snap b/components/new_channel_modal/__snapshots__/new_channel_modal.test.jsx.snap
index f3cf130bfaa4..9fc7d28d3708 100644
--- a/components/new_channel_modal/__snapshots__/new_channel_modal.test.jsx.snap
+++ b/components/new_channel_modal/__snapshots__/new_channel_modal.test.jsx.snap
@@ -39,7 +39,6 @@ exports[`components/NewChannelModal should match snapshot, display only private
       <button
         className="close"
         onClick={[MockFunction]}
-        tabIndex="5"
         type="button"
       >
         <span
@@ -143,7 +142,6 @@ exports[`components/NewChannelModal should match snapshot, display only private
                   "id": "channel_modal.nameEx",
                 }
               }
-              tabIndex="1"
               type="text"
               value="testchannel"
             />
@@ -154,7 +152,6 @@ exports[`components/NewChannelModal should match snapshot, display only private
               <button
                 className="color--link style--none"
                 onClick={[Function]}
-                tabIndex="7"
               >
                 <FormattedMessage
                   defaultMessage="Edit"
@@ -201,7 +198,6 @@ exports[`components/NewChannelModal should match snapshot, display only private
               onChange={[Function]}
               placeholder="E.g.: \\"A channel to file bugs and improvements\\""
               rows="4"
-              tabIndex="2"
               value=""
             />
             <p
@@ -250,7 +246,6 @@ exports[`components/NewChannelModal should match snapshot, display only private
               onChange={[Function]}
               placeholder="E.g.: \\"[Link Title](http://example.com)\\""
               rows="4"
-              tabIndex="3"
               value=""
             />
             <p
@@ -274,7 +269,6 @@ exports[`components/NewChannelModal should match snapshot, display only private
           id="cancelNewChannel"
           onBlur={[Function]}
           onClick={[MockFunction]}
-          tabIndex="8"
           type="button"
         >
           <FormattedMessage
@@ -287,7 +281,6 @@ exports[`components/NewChannelModal should match snapshot, display only private
           className="btn btn-primary"
           id="submitNewChannel"
           onClick={[Function]}
-          tabIndex="4"
           type="submit"
         >
           <FormattedMessage
@@ -341,7 +334,6 @@ exports[`components/NewChannelModal should match snapshot, display only public c
       <button
         className="close"
         onClick={[MockFunction]}
-        tabIndex="5"
         type="button"
       >
         <span
@@ -445,7 +437,6 @@ exports[`components/NewChannelModal should match snapshot, display only public c
                   "id": "channel_modal.nameEx",
                 }
               }
-              tabIndex="1"
               type="text"
               value="testchannel"
             />
@@ -456,7 +447,6 @@ exports[`components/NewChannelModal should match snapshot, display only public c
               <button
                 className="color--link style--none"
                 onClick={[Function]}
-                tabIndex="7"
               >
                 <FormattedMessage
                   defaultMessage="Edit"
@@ -503,7 +493,6 @@ exports[`components/NewChannelModal should match snapshot, display only public c
               onChange={[Function]}
               placeholder="E.g.: \\"A channel to file bugs and improvements\\""
               rows="4"
-              tabIndex="2"
               value=""
             />
             <p
@@ -552,7 +541,6 @@ exports[`components/NewChannelModal should match snapshot, display only public c
               onChange={[Function]}
               placeholder="E.g.: \\"[Link Title](http://example.com)\\""
               rows="4"
-              tabIndex="3"
               value=""
             />
             <p
@@ -576,7 +564,6 @@ exports[`components/NewChannelModal should match snapshot, display only public c
           id="cancelNewChannel"
           onBlur={[Function]}
           onClick={[MockFunction]}
-          tabIndex="8"
           type="button"
         >
           <FormattedMessage
@@ -589,7 +576,6 @@ exports[`components/NewChannelModal should match snapshot, display only public c
           className="btn btn-primary"
           id="submitNewChannel"
           onClick={[Function]}
-          tabIndex="4"
           type="submit"
         >
           <FormattedMessage
@@ -643,7 +629,6 @@ exports[`components/NewChannelModal should match snapshot, modal not showing 1`]
       <button
         className="close"
         onClick={[MockFunction]}
-        tabIndex="5"
         type="button"
       >
         <span
@@ -692,7 +677,7 @@ exports[`components/NewChannelModal should match snapshot, modal not showing 1`]
           <div
             className="col-sm-9"
           >
-            <div
+            <fieldset
               className="multi-select__radio"
               key="channelType"
             >
@@ -756,7 +741,7 @@ exports[`components/NewChannelModal should match snapshot, modal not showing 1`]
                   </div>
                 </label>
               </div>
-            </div>
+            </fieldset>
           </div>
         </div>
         <div
@@ -787,7 +772,6 @@ exports[`components/NewChannelModal should match snapshot, modal not showing 1`]
                   "id": "channel_modal.nameEx",
                 }
               }
-              tabIndex="1"
               type="text"
               value="testchannel"
             />
@@ -798,7 +782,6 @@ exports[`components/NewChannelModal should match snapshot, modal not showing 1`]
               <button
                 className="color--link style--none"
                 onClick={[Function]}
-                tabIndex="7"
               >
                 <FormattedMessage
                   defaultMessage="Edit"
@@ -845,7 +828,6 @@ exports[`components/NewChannelModal should match snapshot, modal not showing 1`]
               onChange={[Function]}
               placeholder="E.g.: \\"A channel to file bugs and improvements\\""
               rows="4"
-              tabIndex="2"
               value=""
             />
             <p
@@ -894,7 +876,6 @@ exports[`components/NewChannelModal should match snapshot, modal not showing 1`]
               onChange={[Function]}
               placeholder="E.g.: \\"[Link Title](http://example.com)\\""
               rows="4"
-              tabIndex="3"
               value=""
             />
             <p
@@ -918,7 +899,6 @@ exports[`components/NewChannelModal should match snapshot, modal not showing 1`]
           id="cancelNewChannel"
           onBlur={[Function]}
           onClick={[MockFunction]}
-          tabIndex="8"
           type="button"
         >
           <FormattedMessage
@@ -931,7 +911,6 @@ exports[`components/NewChannelModal should match snapshot, modal not showing 1`]
           className="btn btn-primary"
           id="submitNewChannel"
           onClick={[Function]}
-          tabIndex="4"
           type="submit"
         >
           <FormattedMessage
@@ -985,7 +964,6 @@ exports[`components/NewChannelModal should match snapshot, modal showing 1`] = `
       <button
         className="close"
         onClick={[MockFunction]}
-        tabIndex="5"
         type="button"
       >
         <span
@@ -1034,7 +1012,7 @@ exports[`components/NewChannelModal should match snapshot, modal showing 1`] = `
           <div
             className="col-sm-9"
           >
-            <div
+            <fieldset
               className="multi-select__radio"
               key="channelType"
             >
@@ -1098,7 +1076,7 @@ exports[`components/NewChannelModal should match snapshot, modal showing 1`] = `
                   </div>
                 </label>
               </div>
-            </div>
+            </fieldset>
           </div>
         </div>
         <div
@@ -1129,7 +1107,6 @@ exports[`components/NewChannelModal should match snapshot, modal showing 1`] = `
                   "id": "channel_modal.nameEx",
                 }
               }
-              tabIndex="1"
               type="text"
               value="testchannel"
             />
@@ -1140,7 +1117,6 @@ exports[`components/NewChannelModal should match snapshot, modal showing 1`] = `
               <button
                 className="color--link style--none"
                 onClick={[Function]}
-                tabIndex="7"
               >
                 <FormattedMessage
                   defaultMessage="Edit"
@@ -1187,7 +1163,6 @@ exports[`components/NewChannelModal should match snapshot, modal showing 1`] = `
               onChange={[Function]}
               placeholder="E.g.: \\"A channel to file bugs and improvements\\""
               rows="4"
-              tabIndex="2"
               value=""
             />
             <p
@@ -1236,7 +1211,6 @@ exports[`components/NewChannelModal should match snapshot, modal showing 1`] = `
               onChange={[Function]}
               placeholder="E.g.: \\"[Link Title](http://example.com)\\""
               rows="4"
-              tabIndex="3"
               value=""
             />
             <p
@@ -1260,7 +1234,6 @@ exports[`components/NewChannelModal should match snapshot, modal showing 1`] = `
           id="cancelNewChannel"
           onBlur={[Function]}
           onClick={[MockFunction]}
-          tabIndex="8"
           type="button"
         >
           <FormattedMessage
@@ -1273,7 +1246,6 @@ exports[`components/NewChannelModal should match snapshot, modal showing 1`] = `
           className="btn btn-primary"
           id="submitNewChannel"
           onClick={[Function]}
-          tabIndex="4"
           type="submit"
         >
           <FormattedMessage
@@ -1327,7 +1299,6 @@ exports[`components/NewChannelModal should match snapshot, on displayNameError 1
       <button
         className="close"
         onClick={[MockFunction]}
-        tabIndex="5"
         type="button"
       >
         <span
@@ -1376,7 +1347,7 @@ exports[`components/NewChannelModal should match snapshot, on displayNameError 1
           <div
             className="col-sm-9"
           >
-            <div
+            <fieldset
               className="multi-select__radio"
               key="channelType"
             >
@@ -1440,7 +1411,7 @@ exports[`components/NewChannelModal should match snapshot, on displayNameError 1
                   </div>
                 </label>
               </div>
-            </div>
+            </fieldset>
           </div>
         </div>
         <div
@@ -1471,7 +1442,6 @@ exports[`components/NewChannelModal should match snapshot, on displayNameError 1
                   "id": "channel_modal.nameEx",
                 }
               }
-              tabIndex="1"
               type="text"
               value="testchannel"
             />
@@ -1492,7 +1462,6 @@ exports[`components/NewChannelModal should match snapshot, on displayNameError 1
               <button
                 className="color--link style--none"
                 onClick={[Function]}
-                tabIndex="7"
               >
                 <FormattedMessage
                   defaultMessage="Edit"
@@ -1539,7 +1508,6 @@ exports[`components/NewChannelModal should match snapshot, on displayNameError 1
               onChange={[Function]}
               placeholder="E.g.: \\"A channel to file bugs and improvements\\""
               rows="4"
-              tabIndex="2"
               value=""
             />
             <p
@@ -1588,7 +1556,6 @@ exports[`components/NewChannelModal should match snapshot, on displayNameError 1
               onChange={[Function]}
               placeholder="E.g.: \\"[Link Title](http://example.com)\\""
               rows="4"
-              tabIndex="3"
               value=""
             />
             <p
@@ -1612,7 +1579,6 @@ exports[`components/NewChannelModal should match snapshot, on displayNameError 1
           id="cancelNewChannel"
           onBlur={[Function]}
           onClick={[MockFunction]}
-          tabIndex="8"
           type="button"
         >
           <FormattedMessage
@@ -1625,7 +1591,6 @@ exports[`components/NewChannelModal should match snapshot, on displayNameError 1
           className="btn btn-primary"
           id="submitNewChannel"
           onClick={[Function]}
-          tabIndex="4"
           type="submit"
         >
           <FormattedMessage
@@ -1679,7 +1644,6 @@ exports[`components/NewChannelModal should match snapshot, on serverError 1`] =
       <button
         className="close"
         onClick={[MockFunction]}
-        tabIndex="5"
         type="button"
       >
         <span
@@ -1728,7 +1692,7 @@ exports[`components/NewChannelModal should match snapshot, on serverError 1`] =
           <div
             className="col-sm-9"
           >
-            <div
+            <fieldset
               className="multi-select__radio"
               key="channelType"
             >
@@ -1792,7 +1756,7 @@ exports[`components/NewChannelModal should match snapshot, on serverError 1`] =
                   </div>
                 </label>
               </div>
-            </div>
+            </fieldset>
           </div>
         </div>
         <div
@@ -1823,7 +1787,6 @@ exports[`components/NewChannelModal should match snapshot, on serverError 1`] =
                   "id": "channel_modal.nameEx",
                 }
               }
-              tabIndex="1"
               type="text"
               value="testchannel"
             />
@@ -1834,7 +1797,6 @@ exports[`components/NewChannelModal should match snapshot, on serverError 1`] =
               <button
                 className="color--link style--none"
                 onClick={[Function]}
-                tabIndex="7"
               >
                 <FormattedMessage
                   defaultMessage="Edit"
@@ -1881,7 +1843,6 @@ exports[`components/NewChannelModal should match snapshot, on serverError 1`] =
               onChange={[Function]}
               placeholder="E.g.: \\"A channel to file bugs and improvements\\""
               rows="4"
-              tabIndex="2"
               value=""
             />
             <p
@@ -1930,7 +1891,6 @@ exports[`components/NewChannelModal should match snapshot, on serverError 1`] =
               onChange={[Function]}
               placeholder="E.g.: \\"[Link Title](http://example.com)\\""
               rows="4"
-              tabIndex="3"
               value=""
             />
             <p
@@ -1968,7 +1928,6 @@ exports[`components/NewChannelModal should match snapshot, on serverError 1`] =
           id="cancelNewChannel"
           onBlur={[Function]}
           onClick={[MockFunction]}
-          tabIndex="8"
           type="button"
         >
           <FormattedMessage
@@ -1981,7 +1940,6 @@ exports[`components/NewChannelModal should match snapshot, on serverError 1`] =
           className="btn btn-primary"
           id="submitNewChannel"
           onClick={[Function]}
-          tabIndex="4"
           type="submit"
         >
           <FormattedMessage
@@ -2035,7 +1993,6 @@ exports[`components/NewChannelModal should match snapshot, private channel fille
       <button
         className="close"
         onClick={[MockFunction]}
-        tabIndex="5"
         type="button"
       >
         <span
@@ -2084,7 +2041,7 @@ exports[`components/NewChannelModal should match snapshot, private channel fille
           <div
             className="col-sm-9"
           >
-            <div
+            <fieldset
               className="multi-select__radio"
               key="channelType"
             >
@@ -2148,7 +2105,7 @@ exports[`components/NewChannelModal should match snapshot, private channel fille
                   </div>
                 </label>
               </div>
-            </div>
+            </fieldset>
           </div>
         </div>
         <div
@@ -2179,7 +2136,6 @@ exports[`components/NewChannelModal should match snapshot, private channel fille
                   "id": "channel_modal.nameEx",
                 }
               }
-              tabIndex="1"
               type="text"
               value="testchannel"
             />
@@ -2190,7 +2146,6 @@ exports[`components/NewChannelModal should match snapshot, private channel fille
               <button
                 className="color--link style--none"
                 onClick={[Function]}
-                tabIndex="7"
               >
                 <FormattedMessage
                   defaultMessage="Edit"
@@ -2237,7 +2192,6 @@ exports[`components/NewChannelModal should match snapshot, private channel fille
               onChange={[Function]}
               placeholder="E.g.: \\"A channel to file bugs and improvements\\""
               rows="4"
-              tabIndex="2"
               value="some purpose"
             />
             <p
@@ -2286,7 +2240,6 @@ exports[`components/NewChannelModal should match snapshot, private channel fille
               onChange={[Function]}
               placeholder="E.g.: \\"[Link Title](http://example.com)\\""
               rows="4"
-              tabIndex="3"
               value="some header"
             />
             <p
@@ -2310,7 +2263,6 @@ exports[`components/NewChannelModal should match snapshot, private channel fille
           id="cancelNewChannel"
           onBlur={[Function]}
           onClick={[MockFunction]}
-          tabIndex="8"
           type="button"
         >
           <FormattedMessage
@@ -2323,7 +2275,6 @@ exports[`components/NewChannelModal should match snapshot, private channel fille
           className="btn btn-primary"
           id="submitNewChannel"
           onClick={[Function]}
-          tabIndex="4"
           type="submit"
         >
           <FormattedMessage
diff --git a/components/new_channel_modal/new_channel_modal.jsx b/components/new_channel_modal/new_channel_modal.jsx
index 1cab0f9e56eb..ee9ca1f52e37 100644
--- a/components/new_channel_modal/new_channel_modal.jsx
+++ b/components/new_channel_modal/new_channel_modal.jsx
@@ -229,7 +229,7 @@ export default class NewChannelModal extends React.PureComponent {
         let typeOptions = null;
         if (enableTypeSelection) {
             typeOptions = (
-                <div
+                <fieldset
                     key='channelType'
                     className='multi-select__radio'
                 >
@@ -257,7 +257,7 @@ export default class NewChannelModal extends React.PureComponent {
                             {privateChannelDesc}
                         </label>
                     </div>
-                </div>
+                </fieldset>
             );
         } else {
             typeOptions = (
@@ -290,7 +290,6 @@ export default class NewChannelModal extends React.PureComponent {
                             type='button'
                             className='close'
                             onClick={this.props.onModalDismissed}
-                            tabIndex='5'
                         >
                             <span aria-hidden='true'>{'×'}</span>
                             <span className='sr-only'>{'Close'}</span>
@@ -339,7 +338,6 @@ export default class NewChannelModal extends React.PureComponent {
                                         maxLength={Constants.MAX_CHANNELNAME_LENGTH}
                                         value={this.props.channelData.displayName}
                                         autoFocus={true}
-                                        tabIndex='1'
                                         onKeyDown={this.onEnterKeyDown}
                                     />
                                     {displayNameError}
@@ -348,7 +346,6 @@ export default class NewChannelModal extends React.PureComponent {
                                         <button
                                             className='color--link style--none'
                                             onClick={this.handleOnURLChange}
-                                            tabIndex='7'
                                         >
                                             <FormattedMessage
                                                 id='channel_modal.edit'
@@ -384,7 +381,6 @@ export default class NewChannelModal extends React.PureComponent {
                                         maxLength='250'
                                         value={this.props.channelData.purpose}
                                         onChange={this.handleChange}
-                                        tabIndex='2'
                                     />
                                     <p className='input__help'>
                                         <FormattedMessage
@@ -419,7 +415,6 @@ export default class NewChannelModal extends React.PureComponent {
                                         maxLength='1024'
                                         value={this.props.channelData.header}
                                         onChange={this.handleChange}
-                                        tabIndex='3'
                                     />
                                     <p className='input__help'>
                                         <FormattedMessage
@@ -437,7 +432,6 @@ export default class NewChannelModal extends React.PureComponent {
                                 type='button'
                                 className='btn btn-link'
                                 onClick={this.props.onModalDismissed}
-                                tabIndex='8'
                                 onBlur={() => document.getElementById('newChannelName').focus()}
                             >
                                 <FormattedMessage
@@ -450,7 +444,6 @@ export default class NewChannelModal extends React.PureComponent {
                                 onClick={this.handleSubmit}
                                 type='submit'
                                 className='btn btn-primary'
-                                tabIndex='4'
                             >
                                 <FormattedMessage
                                     id='channel_modal.createNew'
diff --git a/components/team_general_tab/team_general_tab.jsx b/components/team_general_tab/team_general_tab.jsx
index bb1ab9524dfb..48fffbfa8bd5 100644
--- a/components/team_general_tab/team_general_tab.jsx
+++ b/components/team_general_tab/team_general_tab.jsx
@@ -357,7 +357,7 @@ export default class GeneralTab extends React.Component {
                 ];
             } else {
                 inputs = [
-                    <div key='userOpenInviteOptions'>
+                    <fieldset key='userOpenInviteOptions'>
                         <div className='radio'>
                             <label>
                                 <input
@@ -390,14 +390,13 @@ export default class GeneralTab extends React.Component {
                             </label>
                             <br/>
                         </div>
-                        <div>
-                            <br/>
+                        <div className='margin-top x3'>
                             <FormattedMessage
                                 id='general_tab.openInviteDesc'
                                 defaultMessage='When allowed, a link to this team will be included on the landing page allowing anyone with an account to join this team.'
                             />
                         </div>
-                    </div>,
+                    </fieldset>,
                 ];
             }
 
diff --git a/components/user_settings/advanced/join_leave_section/__snapshots__/join_leave_section.test.jsx.snap b/components/user_settings/advanced/join_leave_section/__snapshots__/join_leave_section.test.jsx.snap
index 684c8b235fca..5e06c75a3c80 100644
--- a/components/user_settings/advanced/join_leave_section/__snapshots__/join_leave_section.test.jsx.snap
+++ b/components/user_settings/advanced/join_leave_section/__snapshots__/join_leave_section.test.jsx.snap
@@ -21,7 +21,7 @@ exports[`components/user_settings/advanced/JoinLeaveSection should match snapsho
   infoPosition="bottom"
   inputs={
     Array [
-      <div>
+      <fieldset>
         <div
           className="radio"
         >
@@ -62,15 +62,16 @@ exports[`components/user_settings/advanced/JoinLeaveSection should match snapsho
           </label>
           <br />
         </div>
-        <div>
-          <br />
+        <div
+          className="margin-top x3"
+        >
           <FormattedMessage
             defaultMessage="When \\"On\\", System Messages saying a user has joined or left a channel will be visible. When \\"Off\\", the System Messages about joining or leaving a channel will be hidden. A message will still show up when you are added to a channel, so you can receive a notification."
             id="user.settings.advance.joinLeaveDesc"
             values={Object {}}
           />
         </div>
-      </div>,
+      </fieldset>,
     ]
   }
   saving={false}
diff --git a/components/user_settings/advanced/join_leave_section/join_leave_section.jsx b/components/user_settings/advanced/join_leave_section/join_leave_section.jsx
index 0c8c72bf0b9e..4f07989eb054 100644
--- a/components/user_settings/advanced/join_leave_section/join_leave_section.jsx
+++ b/components/user_settings/advanced/join_leave_section/join_leave_section.jsx
@@ -67,7 +67,7 @@ export default class JoinLeaveSection extends React.PureComponent {
                         />
                     }
                     inputs={[
-                        <div key='joinLeaveSetting'>
+                        <fieldset key='joinLeaveSetting'>
                             <div className='radio'>
                                 <label>
                                     <input
@@ -102,14 +102,13 @@ export default class JoinLeaveSection extends React.PureComponent {
                                 </label>
                                 <br/>
                             </div>
-                            <div>
-                                <br/>
+                            <div className='margin-top x3'>
                                 <FormattedMessage
                                     id='user.settings.advance.joinLeaveDesc'
                                     defaultMessage='When "On", System Messages saying a user has joined or left a channel will be visible. When "Off", the System Messages about joining or leaving a channel will be hidden. A message will still show up when you are added to a channel, so you can receive a notification.'
                                 />
                             </div>
-                        </div>,
+                        </fieldset>,
                     ]}
                     setting={AdvancedSections.JOIN_LEAVE}
                     submit={this.handleSubmit}
diff --git a/components/user_settings/advanced/user_settings_advanced.jsx b/components/user_settings/advanced/user_settings_advanced.jsx
index d31252c500b0..384fe99b86fe 100644
--- a/components/user_settings/advanced/user_settings_advanced.jsx
+++ b/components/user_settings/advanced/user_settings_advanced.jsx
@@ -241,7 +241,7 @@ export default class AdvancedSettingsDisplay extends React.PureComponent {
                         />
                     }
                     inputs={[
-                        <div key='formattingSetting'>
+                        <fieldset key='formattingSetting'>
                             <div className='radio'>
                                 <label>
                                     <input
@@ -274,14 +274,13 @@ export default class AdvancedSettingsDisplay extends React.PureComponent {
                                 </label>
                                 <br/>
                             </div>
-                            <div>
-                                <br/>
+                            <div className='margin-top x3'>
                                 <FormattedMessage
                                     id='user.settings.advance.formattingDesc'
                                     defaultMessage='If enabled, posts will be formatted to create links, show emoji, style the text, and add line breaks. By default, this setting is enabled.'
                                 />
                             </div>
-                        </div>,
+                        </fieldset>,
                     ]}
                     setting={'formatting'}
                     submit={this.handleSubmit}
diff --git a/components/user_settings/notifications/__snapshots__/desktop_notification_settings.test.jsx.snap b/components/user_settings/notifications/__snapshots__/desktop_notification_settings.test.jsx.snap
index 20281311ecf7..d5a0209491ab 100644
--- a/components/user_settings/notifications/__snapshots__/desktop_notification_settings.test.jsx.snap
+++ b/components/user_settings/notifications/__snapshots__/desktop_notification_settings.test.jsx.snap
@@ -7,94 +7,99 @@ exports[`components/user_settings/notifications/DesktopNotificationSettings shou
   inputs={
     Array [
       <div>
-        <label>
-          <FormattedMessage
-            defaultMessage="Send desktop notifications"
-            id="user.settings.notifications.desktop"
-            values={Object {}}
-          />
-        </label>
-        <br />
-        <div
-          className="radio"
-        >
-          <label>
-            <input
-              checked={false}
-              data-key="desktopActivity"
-              data-value="all"
-              id="desktopNotificationAllActivity"
-              name="desktopNotificationLevel"
-              onChange={[Function]}
-              type="radio"
-            />
-            <FormattedMessage
-              defaultMessage="For all activity"
-              id="user.settings.notifications.allActivity"
-              values={Object {}}
-            />
-          </label>
-          <br />
-        </div>
-        <div
-          className="radio"
-        >
-          <label>
-            <input
-              checked={true}
-              data-key="desktopActivity"
-              data-value="mention"
-              id="desktopNotificationMentions"
-              name="desktopNotificationLevel"
-              onChange={[Function]}
-              type="radio"
-            />
+        <fieldset>
+          <legend
+            className="form-legend"
+          >
             <FormattedMessage
-              defaultMessage="Only for mentions and direct messages"
-              id="user.settings.notifications.onlyMentions"
+              defaultMessage="Send desktop notifications"
+              id="user.settings.notifications.desktop"
               values={Object {}}
             />
-          </label>
-          <br />
-        </div>
-        <div
-          className="radio"
-        >
-          <label>
-            <input
-              checked={false}
-              data-key="desktopActivity"
-              data-value="none"
-              id="desktopNotificationNever"
-              name="desktopNotificationLevel"
-              onChange={[Function]}
-              type="radio"
-            />
+          </legend>
+          <div
+            className="radio"
+          >
+            <label>
+              <input
+                checked={false}
+                data-key="desktopActivity"
+                data-value="all"
+                id="desktopNotificationAllActivity"
+                name="desktopNotificationLevel"
+                onChange={[Function]}
+                type="radio"
+              />
+              <FormattedMessage
+                defaultMessage="For all activity"
+                id="user.settings.notifications.allActivity"
+                values={Object {}}
+              />
+            </label>
+            <br />
+          </div>
+          <div
+            className="radio"
+          >
+            <label>
+              <input
+                checked={true}
+                data-key="desktopActivity"
+                data-value="mention"
+                id="desktopNotificationMentions"
+                name="desktopNotificationLevel"
+                onChange={[Function]}
+                type="radio"
+              />
+              <FormattedMessage
+                defaultMessage="Only for mentions and direct messages"
+                id="user.settings.notifications.onlyMentions"
+                values={Object {}}
+              />
+            </label>
+            <br />
+          </div>
+          <div
+            className="radio"
+          >
+            <label>
+              <input
+                checked={false}
+                data-key="desktopActivity"
+                data-value="none"
+                id="desktopNotificationNever"
+                name="desktopNotificationLevel"
+                onChange={[Function]}
+                type="radio"
+              />
+              <FormattedMessage
+                defaultMessage="Never"
+                id="user.settings.notifications.never"
+                values={Object {}}
+              />
+            </label>
+          </div>
+          <div
+            className="margin-top x3"
+          >
             <FormattedMessage
-              defaultMessage="Never"
-              id="user.settings.notifications.never"
+              defaultMessage="Desktop notifications are available on Edge, Firefox, Safari, Chrome and Mattermost Desktop Apps."
+              id="user.settings.notifications.info"
               values={Object {}}
             />
-          </label>
-        </div>
-        <br />
-        <span>
-          <FormattedMessage
-            defaultMessage="Desktop notifications are available on Edge, Firefox, Safari, Chrome and Mattermost Desktop Apps."
-            id="user.settings.notifications.info"
-            values={Object {}}
-          />
-        </span>
-        <div>
-          <hr />
-          <label>
+          </div>
+        </fieldset>
+        <hr />
+        <fieldset>
+          <legend
+            className="form-legend"
+          >
             <FormattedMessage
               defaultMessage="Notification sound"
               id="user.settings.notifications.desktop.sound"
               values={Object {}}
             />
-          </label>
-          <br />
+          </legend>
           <div
             className="radio"
           >
@@ -137,15 +142,16 @@ exports[`components/user_settings/notifications/DesktopNotificationSettings shou
             </label>
             <br />
           </div>
-          <br />
-          <span>
+          <span
+            className="margin-top x3"
+          >
             <FormattedMessage
               defaultMessage="Notification sounds are available on IE11, Safari, Chrome and Mattermost Desktop Apps."
               id="user.settings.notifications.sounds_info"
               values={Object {}}
             />
           </span>
-        </div>
+        </fieldset>
       </div>,
     ]
   }
@@ -165,84 +171,89 @@ exports[`components/user_settings/notifications/DesktopNotificationSettings shou
   inputs={
     Array [
       <div>
-        <label>
-          <FormattedMessage
-            defaultMessage="Send desktop notifications"
-            id="user.settings.notifications.desktop"
-            values={Object {}}
-          />
-        </label>
-        <br />
-        <div
-          className="radio"
-        >
-          <label>
-            <input
-              checked={false}
-              data-key="desktopActivity"
-              data-value="all"
-              id="desktopNotificationAllActivity"
-              name="desktopNotificationLevel"
-              onChange={[Function]}
-              type="radio"
-            />
-            <FormattedMessage
-              defaultMessage="For all activity"
-              id="user.settings.notifications.allActivity"
-              values={Object {}}
-            />
-          </label>
-          <br />
-        </div>
-        <div
-          className="radio"
-        >
-          <label>
-            <input
-              checked={false}
-              data-key="desktopActivity"
-              data-value="mention"
-              id="desktopNotificationMentions"
-              name="desktopNotificationLevel"
-              onChange={[Function]}
-              type="radio"
-            />
+        <fieldset>
+          <legend
+            className="form-legend"
+          >
             <FormattedMessage
-              defaultMessage="Only for mentions and direct messages"
-              id="user.settings.notifications.onlyMentions"
+              defaultMessage="Send desktop notifications"
+              id="user.settings.notifications.desktop"
               values={Object {}}
             />
-          </label>
-          <br />
-        </div>
-        <div
-          className="radio"
-        >
-          <label>
-            <input
-              checked={true}
-              data-key="desktopActivity"
-              data-value="none"
-              id="desktopNotificationNever"
-              name="desktopNotificationLevel"
-              onChange={[Function]}
-              type="radio"
-            />
+          </legend>
+          <div
+            className="radio"
+          >
+            <label>
+              <input
+                checked={false}
+                data-key="desktopActivity"
+                data-value="all"
+                id="desktopNotificationAllActivity"
+                name="desktopNotificationLevel"
+                onChange={[Function]}
+                type="radio"
+              />
+              <FormattedMessage
+                defaultMessage="For all activity"
+                id="user.settings.notifications.allActivity"
+                values={Object {}}
+              />
+            </label>
+            <br />
+          </div>
+          <div
+            className="radio"
+          >
+            <label>
+              <input
+                checked={false}
+                data-key="desktopActivity"
+                data-value="mention"
+                id="desktopNotificationMentions"
+                name="desktopNotificationLevel"
+                onChange={[Function]}
+                type="radio"
+              />
+              <FormattedMessage
+                defaultMessage="Only for mentions and direct messages"
+                id="user.settings.notifications.onlyMentions"
+                values={Object {}}
+              />
+            </label>
+            <br />
+          </div>
+          <div
+            className="radio"
+          >
+            <label>
+              <input
+                checked={true}
+                data-key="desktopActivity"
+                data-value="none"
+                id="desktopNotificationNever"
+                name="desktopNotificationLevel"
+                onChange={[Function]}
+                type="radio"
+              />
+              <FormattedMessage
+                defaultMessage="Never"
+                id="user.settings.notifications.never"
+                values={Object {}}
+              />
+            </label>
+          </div>
+          <div
+            className="margin-top x3"
+          >
             <FormattedMessage
-              defaultMessage="Never"
-              id="user.settings.notifications.never"
+              defaultMessage="Desktop notifications are available on Edge, Firefox, Safari, Chrome and Mattermost Desktop Apps."
+              id="user.settings.notifications.info"
               values={Object {}}
             />
-          </label>
-        </div>
-        <br />
-        <span>
-          <FormattedMessage
-            defaultMessage="Desktop notifications are available on Edge, Firefox, Safari, Chrome and Mattermost Desktop Apps."
-            id="user.settings.notifications.info"
-            values={Object {}}
-          />
-        </span>
+          </div>
+        </fieldset>
+        <hr />
       </div>,
     ]
   }
@@ -294,94 +305,99 @@ exports[`components/user_settings/notifications/DesktopNotificationSettings shou
   inputs={
     Array [
       <div>
-        <label>
-          <FormattedMessage
-            defaultMessage="Send desktop notifications"
-            id="user.settings.notifications.desktop"
-            values={Object {}}
-          />
-        </label>
-        <br />
-        <div
-          className="radio"
-        >
-          <label>
-            <input
-              checked={false}
-              data-key="desktopActivity"
-              data-value="all"
-              id="desktopNotificationAllActivity"
-              name="desktopNotificationLevel"
-              onChange={[Function]}
-              type="radio"
-            />
-            <FormattedMessage
-              defaultMessage="For all activity"
-              id="user.settings.notifications.allActivity"
-              values={Object {}}
-            />
-          </label>
-          <br />
-        </div>
-        <div
-          className="radio"
-        >
-          <label>
-            <input
-              checked={true}
-              data-key="desktopActivity"
-              data-value="mention"
-              id="desktopNotificationMentions"
-              name="desktopNotificationLevel"
-              onChange={[Function]}
-              type="radio"
-            />
+        <fieldset>
+          <legend
+            className="form-legend"
+          >
             <FormattedMessage
-              defaultMessage="Only for mentions and direct messages"
-              id="user.settings.notifications.onlyMentions"
+              defaultMessage="Send desktop notifications"
+              id="user.settings.notifications.desktop"
               values={Object {}}
             />
-          </label>
-          <br />
-        </div>
-        <div
-          className="radio"
-        >
-          <label>
-            <input
-              checked={false}
-              data-key="desktopActivity"
-              data-value="none"
-              id="desktopNotificationNever"
-              name="desktopNotificationLevel"
-              onChange={[Function]}
-              type="radio"
-            />
+          </legend>
+          <div
+            className="radio"
+          >
+            <label>
+              <input
+                checked={false}
+                data-key="desktopActivity"
+                data-value="all"
+                id="desktopNotificationAllActivity"
+                name="desktopNotificationLevel"
+                onChange={[Function]}
+                type="radio"
+              />
+              <FormattedMessage
+                defaultMessage="For all activity"
+                id="user.settings.notifications.allActivity"
+                values={Object {}}
+              />
+            </label>
+            <br />
+          </div>
+          <div
+            className="radio"
+          >
+            <label>
+              <input
+                checked={true}
+                data-key="desktopActivity"
+                data-value="mention"
+                id="desktopNotificationMentions"
+                name="desktopNotificationLevel"
+                onChange={[Function]}
+                type="radio"
+              />
+              <FormattedMessage
+                defaultMessage="Only for mentions and direct messages"
+                id="user.settings.notifications.onlyMentions"
+                values={Object {}}
+              />
+            </label>
+            <br />
+          </div>
+          <div
+            className="radio"
+          >
+            <label>
+              <input
+                checked={false}
+                data-key="desktopActivity"
+                data-value="none"
+                id="desktopNotificationNever"
+                name="desktopNotificationLevel"
+                onChange={[Function]}
+                type="radio"
+              />
+              <FormattedMessage
+                defaultMessage="Never"
+                id="user.settings.notifications.never"
+                values={Object {}}
+              />
+            </label>
+          </div>
+          <div
+            className="margin-top x3"
+          >
             <FormattedMessage
-              defaultMessage="Never"
-              id="user.settings.notifications.never"
+              defaultMessage="Desktop notifications are available on Edge, Firefox, Safari, Chrome and Mattermost Desktop Apps."
+              id="user.settings.notifications.info"
               values={Object {}}
             />
-          </label>
-        </div>
-        <br />
-        <span>
-          <FormattedMessage
-            defaultMessage="Desktop notifications are available on Edge, Firefox, Safari, Chrome and Mattermost Desktop Apps."
-            id="user.settings.notifications.info"
-            values={Object {}}
-          />
-        </span>
-        <div>
-          <hr />
-          <label>
+          </div>
+        </fieldset>
+        <hr />
+        <fieldset>
+          <legend
+            className="form-legend"
+          >
             <FormattedMessage
               defaultMessage="Notification sound"
               id="user.settings.notifications.desktop.sound"
               values={Object {}}
             />
-          </label>
-          <br />
+          </legend>
           <div
             className="radio"
           >
@@ -424,15 +440,16 @@ exports[`components/user_settings/notifications/DesktopNotificationSettings shou
             </label>
             <br />
           </div>
-          <br />
-          <span>
+          <span
+            className="margin-top x3"
+          >
             <FormattedMessage
               defaultMessage="Notification sounds are available on IE11, Safari, Chrome and Mattermost Desktop Apps."
               id="user.settings.notifications.sounds_info"
               values={Object {}}
             />
           </span>
-        </div>
+        </fieldset>
       </div>,
     ]
   }
diff --git a/components/user_settings/notifications/__snapshots__/manage_auto_responder.test.jsx.snap b/components/user_settings/notifications/__snapshots__/manage_auto_responder.test.jsx.snap
index 47ee32ec36c7..b8ead82bdc50 100644
--- a/components/user_settings/notifications/__snapshots__/manage_auto_responder.test.jsx.snap
+++ b/components/user_settings/notifications/__snapshots__/manage_auto_responder.test.jsx.snap
@@ -60,8 +60,9 @@ exports[`components/user_settings/notifications/ManageAutoResponder should match
             />
           </label>
         </div>,
-        <div>
-          <br />
+        <div
+          className="margin-top x3"
+        >
           <FormattedHTMLMessage
             defaultMessage="Set a custom message that will be automatically sent in response to Direct Messages. Mentions in Public and Private Channels will not trigger the automated reply. Enabling Automatic Replies sets your status to Out of Office and disables email and push notifications."
             id="user.settings.notifications.autoResponderHint"
@@ -134,9 +135,9 @@ exports[`components/user_settings/notifications/ManageAutoResponder should match
               </label>
             </div>
             <div
+              className="margin-top x3"
               key="autoResponderHint"
             >
-              <br />
               <FormattedHTMLMessage
                 defaultMessage="Set a custom message that will be automatically sent in response to Direct Messages. Mentions in Public and Private Channels will not trigger the automated reply. Enabling Automatic Replies sets your status to Out of Office and disables email and push notifications."
                 id="user.settings.notifications.autoResponderHint"
@@ -283,8 +284,9 @@ exports[`components/user_settings/notifications/ManageAutoResponder should match
             />
           </div>
         </div>,
-        <div>
-          <br />
+        <div
+          className="margin-top x3"
+        >
           <FormattedHTMLMessage
             defaultMessage="Set a custom message that will be automatically sent in response to Direct Messages. Mentions in Public and Private Channels will not trigger the automated reply. Enabling Automatic Replies sets your status to Out of Office and disables email and push notifications."
             id="user.settings.notifications.autoResponderHint"
@@ -419,9 +421,9 @@ exports[`components/user_settings/notifications/ManageAutoResponder should match
               </div>
             </div>
             <div
+              className="margin-top x3"
               key="autoResponderHint"
             >
-              <br />
               <FormattedHTMLMessage
                 defaultMessage="Set a custom message that will be automatically sent in response to Direct Messages. Mentions in Public and Private Channels will not trigger the automated reply. Enabling Automatic Replies sets your status to Out of Office and disables email and push notifications."
                 id="user.settings.notifications.autoResponderHint"
diff --git a/components/user_settings/notifications/desktop_notification_settings.jsx b/components/user_settings/notifications/desktop_notification_settings.jsx
index e5c640a2b5b2..bb5c83cd9a58 100644
--- a/components/user_settings/notifications/desktop_notification_settings.jsx
+++ b/components/user_settings/notifications/desktop_notification_settings.jsx
@@ -51,15 +51,13 @@ export default class DesktopNotificationSettings extends React.Component {
 
             if (Utils.hasSoundOptions()) {
                 soundSection = (
-                    <div>
-                        <hr/>
-                        <label>
+                    <fieldset>
+                        <legend className='form-legend'>
                             <FormattedMessage
                                 id='user.settings.notifications.desktop.sound'
                                 defaultMessage='Notification sound'
                             />
-                        </label>
-                        <br/>
+                        </legend>
                         <div className='radio'>
                             <label>
                                 <input
@@ -96,104 +94,103 @@ export default class DesktopNotificationSettings extends React.Component {
                             </label>
                             <br/>
                         </div>
-                        <br/>
-                        <span>
+                        <span className='margin-top x3'>
                             <FormattedMessage
                                 id='user.settings.notifications.sounds_info'
                                 defaultMessage='Notification sounds are available on IE11, Safari, Chrome and Mattermost Desktop Apps.'
                             />
                         </span>
-                    </div>
+                    </fieldset>
                 );
             } else {
                 soundSection = (
-                    <div>
-                        <hr/>
-                        <label>
+                    <fieldset>
+                        <legend className='form-legend'>
                             <FormattedMessage
                                 id='user.settings.notifications.desktop.sound'
                                 defaultMessage='Notification sound'
                             />
-                        </label>
+                        </legend>
                         <br/>
                         <FormattedMessage
                             id='user.settings.notifications.soundConfig'
                             defaultMessage='Please configure notification sounds in your browser settings'
                         />
-                    </div>
+                    </fieldset>
                 );
             }
         }
 
         inputs.push(
             <div key='userNotificationLevelOption'>
-                <label>
-                    <FormattedMessage
-                        id='user.settings.notifications.desktop'
-                        defaultMessage='Send desktop notifications'
-                    />
-                </label>
-                <br/>
-                <div className='radio'>
-                    <label>
-                        <input
-                            id='desktopNotificationAllActivity'
-                            type='radio'
-                            name='desktopNotificationLevel'
-                            checked={activityRadio[0]}
-                            data-key={'desktopActivity'}
-                            data-value={NotificationLevels.ALL}
-                            onChange={this.handleOnChange}
-                        />
+                <fieldset>
+                    <legend className='form-legend'>
                         <FormattedMessage
-                            id='user.settings.notifications.allActivity'
-                            defaultMessage='For all activity'
-                        />
-                    </label>
-                    <br/>
-                </div>
-                <div className='radio'>
-                    <label>
-                        <input
-                            id='desktopNotificationMentions'
-                            type='radio'
-                            name='desktopNotificationLevel'
-                            checked={activityRadio[1]}
-                            data-key={'desktopActivity'}
-                            data-value={NotificationLevels.MENTION}
-                            onChange={this.handleOnChange}
-                        />
-                        <FormattedMessage
-                            id='user.settings.notifications.onlyMentions'
-                            defaultMessage='Only for mentions and direct messages'
-                        />
-                    </label>
-                    <br/>
-                </div>
-                <div className='radio'>
-                    <label>
-                        <input
-                            id='desktopNotificationNever'
-                            type='radio'
-                            name='desktopNotificationLevel'
-                            checked={activityRadio[2]}
-                            data-key={'desktopActivity'}
-                            data-value={NotificationLevels.NONE}
-                            onChange={this.handleOnChange}
+                            id='user.settings.notifications.desktop'
+                            defaultMessage='Send desktop notifications'
                         />
+                    </legend>
+                    <div className='radio'>
+                        <label>
+                            <input
+                                id='desktopNotificationAllActivity'
+                                type='radio'
+                                name='desktopNotificationLevel'
+                                checked={activityRadio[0]}
+                                data-key={'desktopActivity'}
+                                data-value={NotificationLevels.ALL}
+                                onChange={this.handleOnChange}
+                            />
+                            <FormattedMessage
+                                id='user.settings.notifications.allActivity'
+                                defaultMessage='For all activity'
+                            />
+                        </label>
+                        <br/>
+                    </div>
+                    <div className='radio'>
+                        <label>
+                            <input
+                                id='desktopNotificationMentions'
+                                type='radio'
+                                name='desktopNotificationLevel'
+                                checked={activityRadio[1]}
+                                data-key={'desktopActivity'}
+                                data-value={NotificationLevels.MENTION}
+                                onChange={this.handleOnChange}
+                            />
+                            <FormattedMessage
+                                id='user.settings.notifications.onlyMentions'
+                                defaultMessage='Only for mentions and direct messages'
+                            />
+                        </label>
+                        <br/>
+                    </div>
+                    <div className='radio'>
+                        <label>
+                            <input
+                                id='desktopNotificationNever'
+                                type='radio'
+                                name='desktopNotificationLevel'
+                                checked={activityRadio[2]}
+                                data-key={'desktopActivity'}
+                                data-value={NotificationLevels.NONE}
+                                onChange={this.handleOnChange}
+                            />
+                            <FormattedMessage
+                                id='user.settings.notifications.never'
+                                defaultMessage='Never'
+                            />
+                        </label>
+                    </div>
+                    <div className='margin-top x3'>
                         <FormattedMessage
-                            id='user.settings.notifications.never'
-                            defaultMessage='Never'
+                            id='user.settings.notifications.info'
+                            defaultMessage='Desktop notifications are available on Edge, Firefox, Safari, Chrome and Mattermost Desktop Apps.'
                         />
-                    </label>
-                </div>
-                <br/>
-                <span>
-                    <FormattedMessage
-                        id='user.settings.notifications.info'
-                        defaultMessage='Desktop notifications are available on Edge, Firefox, Safari, Chrome and Mattermost Desktop Apps.'
-                    />
-                </span>
+                    </div>
+                </fieldset>
+                <hr/>
                 {soundSection}
             </div>
         );
diff --git a/components/user_settings/notifications/email_notification_setting/__snapshots__/email_notification_setting.test.jsx.snap b/components/user_settings/notifications/email_notification_setting/__snapshots__/email_notification_setting.test.jsx.snap
index 2030e5f3101d..b1035d28cab1 100644
--- a/components/user_settings/notifications/email_notification_setting/__snapshots__/email_notification_setting.test.jsx.snap
+++ b/components/user_settings/notifications/email_notification_setting/__snapshots__/email_notification_setting.test.jsx.snap
@@ -53,14 +53,16 @@ exports[`components/user_settings/notifications/EmailNotificationSetting should
     infoPosition="bottom"
     inputs={
       Array [
-        <div>
-          <label>
+        <fieldset>
+          <legend
+            className="form-legend"
+          >
             <FormattedMessage
               defaultMessage="Send email notifications"
               id="user.settings.notifications.email.send"
               values={Object {}}
             />
-          </label>
+          </legend>
           <div
             className="radio"
           >
@@ -101,8 +103,9 @@ exports[`components/user_settings/notifications/EmailNotificationSetting should
               />
             </label>
           </div>
-          <br />
-          <div>
+          <div
+            className="margin-top x2"
+          >
             <FormattedMessage
               defaultMessage="Email notifications are sent for mentions and direct messages when you are offline or away from {siteName} for more than 5 minutes."
               id="user.settings.notifications.emailInfo"
@@ -114,7 +117,7 @@ exports[`components/user_settings/notifications/EmailNotificationSetting should
             />
              
           </div>
-        </div>,
+        </fieldset>,
       ]
     }
     saving={false}
@@ -142,10 +145,12 @@ exports[`components/user_settings/notifications/EmailNotificationSetting should
           <li
             className="setting-list-item"
           >
-            <div
+            <fieldset
               key="userNotificationEmailOptions"
             >
-              <label>
+              <legend
+                className="form-legend"
+              >
                 <FormattedMessage
                   defaultMessage="Send email notifications"
                   id="user.settings.notifications.email.send"
@@ -155,7 +160,7 @@ exports[`components/user_settings/notifications/EmailNotificationSetting should
                     Send email notifications
                   </span>
                 </FormattedMessage>
-              </label>
+              </legend>
               <div
                 className="radio"
               >
@@ -204,8 +209,9 @@ exports[`components/user_settings/notifications/EmailNotificationSetting should
                   </FormattedMessage>
                 </label>
               </div>
-              <br />
-              <div>
+              <div
+                className="margin-top x2"
+              >
                 <FormattedMessage
                   defaultMessage="Email notifications are sent for mentions and direct messages when you are offline or away from {siteName} for more than 5 minutes."
                   id="user.settings.notifications.emailInfo"
@@ -221,7 +227,7 @@ exports[`components/user_settings/notifications/EmailNotificationSetting should
                 </FormattedMessage>
                  
               </div>
-            </div>
+            </fieldset>
           </li>
           <li
             className="setting-list-item"
@@ -373,14 +379,16 @@ exports[`components/user_settings/notifications/EmailNotificationSetting should
     infoPosition="bottom"
     inputs={
       Array [
-        <div>
-          <label>
+        <fieldset>
+          <legend
+            className="form-legend"
+          >
             <FormattedMessage
               defaultMessage="Send email notifications"
               id="user.settings.notifications.email.send"
               values={Object {}}
             />
-          </label>
+          </legend>
           <div
             className="radio"
           >
@@ -401,7 +409,7 @@ exports[`components/user_settings/notifications/EmailNotificationSetting should
               />
             </label>
           </div>
-          <div>
+          <fieldset>
             <div
               className="radio"
             >
@@ -446,7 +454,7 @@ exports[`components/user_settings/notifications/EmailNotificationSetting should
                 />
               </label>
             </div>
-          </div>
+          </fieldset>
           <div
             className="radio"
           >
@@ -467,8 +475,9 @@ exports[`components/user_settings/notifications/EmailNotificationSetting should
               />
             </label>
           </div>
-          <br />
-          <div>
+          <div
+            className="margin-top x2"
+          >
             <FormattedMessage
               defaultMessage="Email notifications are sent for mentions and direct messages when you are offline or away from {siteName} for more than 5 minutes."
               id="user.settings.notifications.emailInfo"
@@ -485,7 +494,7 @@ exports[`components/user_settings/notifications/EmailNotificationSetting should
               values={Object {}}
             />
           </div>
-        </div>,
+        </fieldset>,
       ]
     }
     saving={false}
@@ -513,10 +522,12 @@ exports[`components/user_settings/notifications/EmailNotificationSetting should
           <li
             className="setting-list-item"
           >
-            <div
+            <fieldset
               key="userNotificationEmailOptions"
             >
-              <label>
+              <legend
+                className="form-legend"
+              >
                 <FormattedMessage
                   defaultMessage="Send email notifications"
                   id="user.settings.notifications.email.send"
@@ -526,7 +537,7 @@ exports[`components/user_settings/notifications/EmailNotificationSetting should
                     Send email notifications
                   </span>
                 </FormattedMessage>
-              </label>
+              </legend>
               <div
                 className="radio"
               >
@@ -551,7 +562,7 @@ exports[`components/user_settings/notifications/EmailNotificationSetting should
                   </FormattedMessage>
                 </label>
               </div>
-              <div>
+              <fieldset>
                 <div
                   className="radio"
                 >
@@ -604,7 +615,7 @@ exports[`components/user_settings/notifications/EmailNotificationSetting should
                     </FormattedMessage>
                   </label>
                 </div>
-              </div>
+              </fieldset>
               <div
                 className="radio"
               >
@@ -629,8 +640,9 @@ exports[`components/user_settings/notifications/EmailNotificationSetting should
                   </FormattedMessage>
                 </label>
               </div>
-              <br />
-              <div>
+              <div
+                className="margin-top x2"
+              >
                 <FormattedMessage
                   defaultMessage="Email notifications are sent for mentions and direct messages when you are offline or away from {siteName} for more than 5 minutes."
                   id="user.settings.notifications.emailInfo"
@@ -655,7 +667,7 @@ exports[`components/user_settings/notifications/EmailNotificationSetting should
                   </span>
                 </FormattedMessage>
               </div>
-            </div>
+            </fieldset>
           </li>
           <li
             className="setting-list-item"
@@ -737,14 +749,16 @@ exports[`components/user_settings/notifications/EmailNotificationSetting should
   infoPosition="bottom"
   inputs={
     Array [
-      <div>
-        <label>
+      <fieldset>
+        <legend
+          className="form-legend"
+        >
           <FormattedMessage
             defaultMessage="Send email notifications"
             id="user.settings.notifications.email.send"
             values={Object {}}
           />
-        </label>
+        </legend>
         <div
           className="radio"
         >
@@ -785,8 +799,9 @@ exports[`components/user_settings/notifications/EmailNotificationSetting should
             />
           </label>
         </div>
-        <br />
-        <div>
+        <div
+          className="margin-top x2"
+        >
           <FormattedMessage
             defaultMessage="Email notifications are sent for mentions and direct messages when you are offline or away from {siteName} for more than 5 minutes."
             id="user.settings.notifications.emailInfo"
@@ -798,7 +813,7 @@ exports[`components/user_settings/notifications/EmailNotificationSetting should
           />
            
         </div>
-      </div>,
+      </fieldset>,
     ]
   }
   saving={false}
diff --git a/components/user_settings/notifications/email_notification_setting/email_notification_setting.jsx b/components/user_settings/notifications/email_notification_setting/email_notification_setting.jsx
index 3f24b7044d87..a647ffd61d80 100644
--- a/components/user_settings/notifications/email_notification_setting/email_notification_setting.jsx
+++ b/components/user_settings/notifications/email_notification_setting/email_notification_setting.jsx
@@ -221,7 +221,7 @@ export default class EmailNotificationSetting extends React.Component {
         let batchingInfo = null;
         if (this.props.enableEmailBatching) {
             batchingOptions = (
-                <div>
+                <fieldset>
                     <div className='radio'>
                         <label>
                             <input
@@ -257,7 +257,7 @@ export default class EmailNotificationSetting extends React.Component {
                             />
                         </label>
                     </div>
-                </div>
+                </fieldset>
             );
 
             batchingInfo = (
@@ -272,13 +272,13 @@ export default class EmailNotificationSetting extends React.Component {
             <SettingItemMax
                 title={localizeMessage('user.settings.notifications.emailNotifications', 'Email notifications')}
                 inputs={[
-                    <div key='userNotificationEmailOptions'>
-                        <label>
+                    <fieldset key='userNotificationEmailOptions'>
+                        <legend className='form-legend'>
                             <FormattedMessage
                                 id='user.settings.notifications.email.send'
                                 defaultMessage='Send email notifications'
                             />
-                        </label>
+                        </legend>
                         <div className='radio'>
                             <label>
                                 <input
@@ -314,8 +314,7 @@ export default class EmailNotificationSetting extends React.Component {
                                 />
                             </label>
                         </div>
-                        <br/>
-                        <div>
+                        <div className='margin-top x2'>
                             <FormattedMessage
                                 id='user.settings.notifications.emailInfo'
                                 defaultMessage='Email notifications are sent for mentions and direct messages when you are offline or away from {siteName} for more than 5 minutes.'
@@ -326,7 +325,7 @@ export default class EmailNotificationSetting extends React.Component {
                             {' '}
                             {batchingInfo}
                         </div>
-                    </div>,
+                    </fieldset>,
                 ]}
                 submit={this.handleSubmit}
                 saving={this.props.saving}
diff --git a/components/user_settings/notifications/manage_auto_responder.jsx b/components/user_settings/notifications/manage_auto_responder.jsx
index d415ac0648e6..5a300138b0df 100644
--- a/components/user_settings/notifications/manage_auto_responder.jsx
+++ b/components/user_settings/notifications/manage_auto_responder.jsx
@@ -90,8 +90,10 @@ export default class ManageAutoResponder extends React.PureComponent {
             inputs.push(message);
         }
         inputs.push((
-            <div key='autoResponderHint'>
-                <br/>
+            <div
+                key='autoResponderHint'
+                className='margin-top x3'
+            >
                 <FormattedHTMLMessage
                     id='user.settings.notifications.autoResponderHint'
                     defaultMessage='Set a custom message that will be automatically sent in response to Direct Messages. Mentions in Public and Private Channels will not trigger the automated reply. Enabling Automatic Replies sets your status to Out of Office and disables email and push notifications.'
diff --git a/components/user_settings/notifications/user_settings_notifications.jsx b/components/user_settings/notifications/user_settings_notifications.jsx
index 762816f9fce4..00946720ec87 100644
--- a/components/user_settings/notifications/user_settings_notifications.jsx
+++ b/components/user_settings/notifications/user_settings_notifications.jsx
@@ -290,15 +290,13 @@ export default class NotificationsTab extends React.Component {
                 let pushStatusSettings;
                 if (this.state.pushActivity !== NotificationLevels.NONE) {
                     pushStatusSettings = (
-                        <div>
-                            <hr/>
-                            <label>
+                        <fieldset>
+                            <legend className='form-legend'>
                                 <FormattedMessage
                                     id='user.settings.notifications.push_notification.status'
                                     defaultMessage='Trigger push notifications when'
                                 />
-                            </label>
-                            <br/>
+                            </legend>
                             <div className='radio'>
                                 <label>
                                     <input
@@ -313,7 +311,6 @@ export default class NotificationsTab extends React.Component {
                                         defaultMessage='Online, away or offline'
                                     />
                                 </label>
-                                <br/>
                             </div>
                             <div className='radio'>
                                 <label>
@@ -329,7 +326,6 @@ export default class NotificationsTab extends React.Component {
                                         defaultMessage='Away or offline'
                                     />
                                 </label>
-                                <br/>
                             </div>
                             <div className='radio'>
                                 <label>
@@ -346,7 +342,7 @@ export default class NotificationsTab extends React.Component {
                                     />
                                 </label>
                             </div>
-                        </div>
+                        </fieldset>
                     );
 
                     extraInfo = (
@@ -360,14 +356,13 @@ export default class NotificationsTab extends React.Component {
                 }
 
                 inputs.push(
-                    <div key='userNotificationLevelOption'>
-                        <label>
+                    <fieldset key='userNotificationLevelOption'>
+                        <legend className='form-legend'>
                             <FormattedMessage
                                 id='user.settings.push_notification.send'
                                 defaultMessage='Send mobile push notifications'
                             />
-                        </label>
-                        <br/>
+                        </legend>
                         <div className='radio'>
                             <label>
                                 <input
@@ -382,7 +377,6 @@ export default class NotificationsTab extends React.Component {
                                     defaultMessage='For all activity'
                                 />
                             </label>
-                            <br/>
                         </div>
                         <div className='radio'>
                             <label>
@@ -398,7 +392,6 @@ export default class NotificationsTab extends React.Component {
                                     defaultMessage='For mentions and direct messages'
                                 />
                             </label>
-                            <br/>
                         </div>
                         <div className='radio'>
                             <label>
@@ -415,15 +408,14 @@ export default class NotificationsTab extends React.Component {
                                 />
                             </label>
                         </div>
-                        <br/>
-                        <span>
+                        <div className='margin-top x3'>
                             <FormattedMessage
                                 id='user.settings.push_notification.info'
                                 defaultMessage='Notification alerts are pushed to your mobile device when there is activity in Mattermost.'
                             />
-                        </span>
+                        </div>
                         {pushStatusSettings}
-                    </div>
+                    </fieldset>
                 );
 
                 submit = this.handleSubmit;
@@ -723,7 +715,10 @@ export default class NotificationsTab extends React.Component {
             const inputs = [];
 
             inputs.push(
-                <div key='userNotificationLevelOption'>
+                <fieldset key='userNotificationLevelOption'>
+                    <legend className='form-legend hidden-label'>
+                        {Utils.localizeMessage('user.settings.notifications.comments', 'Reply notifications')}
+                    </legend>
                     <div className='radio'>
                         <label>
                             <input
@@ -771,7 +766,7 @@ export default class NotificationsTab extends React.Component {
                             />
                         </label>
                     </div>
-                </div>
+                </fieldset>
             );
 
             const extraInfo = (
@@ -861,7 +856,6 @@ export default class NotificationsTab extends React.Component {
                 );
 
                 autoResponderSection = (
-
                     <SettingItemMin
                         title={
                             <FormattedMessage
diff --git a/components/user_settings/sidebar/__snapshots__/user_settings_sidebar.test.jsx.snap b/components/user_settings/sidebar/__snapshots__/user_settings_sidebar.test.jsx.snap
index 83b81615c5c5..ba7c4e919029 100644
--- a/components/user_settings/sidebar/__snapshots__/user_settings_sidebar.test.jsx.snap
+++ b/components/user_settings/sidebar/__snapshots__/user_settings_sidebar.test.jsx.snap
@@ -100,7 +100,7 @@ exports[`components/user_settings/sidebar/UserSettingsSidebar should match snaps
           values={Object {}}
         />
       }
-      focused={true}
+      focused={false}
       section="channelSwitcher"
       title={
         <FormattedMessage
diff --git a/components/user_settings/sidebar/user_settings_sidebar.jsx b/components/user_settings/sidebar/user_settings_sidebar.jsx
index b8ad199c356b..2264c375cb72 100644
--- a/components/user_settings/sidebar/user_settings_sidebar.jsx
+++ b/components/user_settings/sidebar/user_settings_sidebar.jsx
@@ -210,7 +210,7 @@ export default class UserSettingsSidebar extends React.Component {
                         />
                     }
                     inputs={[
-                        <div key='autoCloseDMSetting'>
+                        <fieldset key='autoCloseDMSetting'>
                             <div className='radio'>
                                 <label>
                                     <input
@@ -225,7 +225,6 @@ export default class UserSettingsSidebar extends React.Component {
                                         defaultMessage='After 7 days with no new messages'
                                     />
                                 </label>
-                                <br/>
                             </div>
                             <div className='radio'>
                                 <label>
@@ -241,16 +240,14 @@ export default class UserSettingsSidebar extends React.Component {
                                         defaultMessage='Never'
                                     />
                                 </label>
-                                <br/>
                             </div>
-                            <div>
-                                <br/>
+                            <div className='margin-top x3'>
                                 <FormattedMessage
                                     id='user.settings.sidebar.autoCloseDMDesc'
                                     defaultMessage='Direct Message conversations can be reopened with the “+” button in the sidebar or using the Channel Switcher (CTRL+K).'
                                 />
                             </div>
-                        </div>,
+                        </fieldset>,
                     ]}
                     setting={'close_unused_direct_messages'}
                     submit={this.handleSubmit}
@@ -395,14 +392,13 @@ export default class UserSettingsSidebar extends React.Component {
             const inputs = [];
 
             inputs.push(
-                <div key='groupingSectionSetting'>
-                    <label>
+                <fieldset key='groupingSectionSetting'>
+                    <legend className='form-legend'>
                         <FormattedMessage
                             id='user.settings.sidebar.groupChannelsTitle'
                             defaultMessage='Channel grouping'
                         />
-                    </label>
-                    <br/>
+                    </legend>
                     <div className='radio'>
                         <label>
                             <input
@@ -417,7 +413,6 @@ export default class UserSettingsSidebar extends React.Component {
                                 defaultMessage='Channels grouped by type'
                             />
                         </label>
-                        <br/>
                     </div>
                     <div className='radio'>
                         <label>
@@ -433,29 +428,26 @@ export default class UserSettingsSidebar extends React.Component {
                                 defaultMessage='Combine all channel types'
                             />
                         </label>
-                        <br/>
                     </div>
-                    <div>
-                        <br/>
+                    <div className='margin-top x3'>
                         <FormattedMessage
                             id='user.settings.sidebar.groupDesc'
                             defaultMessage='Group channels by type, or combine all types into a list.'
                         />
                     </div>
-                </div>
+                </fieldset>
             );
 
             inputs.push(<hr key='sortingDivider'/>);
 
             inputs.push(
-                <div key='sortingOptions'>
-                    <label>
+                <fieldset key='sortingOptions'>
+                    <legend className='form-legend'>
                         <FormattedMessage
                             id='user.settings.sidebar.sortChannelsTitle'
                             defaultMessage='Channel sorting'
                         />
-                    </label>
-                    <br/>
+                    </legend>
                     <div className='radio'>
                         <label>
                             <input
@@ -470,7 +462,6 @@ export default class UserSettingsSidebar extends React.Component {
                                 defaultMessage='Recency'
                             />
                         </label>
-                        <br/>
                     </div>
                     <div className='radio'>
                         <label>
@@ -486,22 +477,20 @@ export default class UserSettingsSidebar extends React.Component {
                                 defaultMessage='Alphabetically'
                             />
                         </label>
-                        <br/>
                     </div>
-                    <div>
-                        <br/>
+                    <div className='margin-top x3'>
                         <FormattedMessage
                             id='user.settings.sidebar.sortDesc'
                             defaultMessage='Sort channels alphabetically, or by most recent post.'
                         />
                     </div>
-                </div>
+                </fieldset>
             );
 
             inputs.push(<hr key='divider'/>);
 
             inputs.push(
-                <div key='unreadOption'>
+                <fieldset key='unreadOption'>
                     <div className='checkbox'>
                         <label>
                             <input
@@ -516,20 +505,19 @@ export default class UserSettingsSidebar extends React.Component {
                             />
                         </label>
                     </div>
-                    <div>
-                        <br/>
+                    <div className='margin-top x3'>
                         <FormattedMessage
                             id='user.settings.sidebar.unreadsDesc'
                             defaultMessage='Group unread channels separately until read.'
                         />
                     </div>
-                </div>
+                </fieldset>
             );
 
             inputs.push(<hr key='groupingDivider'/>);
 
             inputs.push(
-                <div key='favoriteOption'>
+                <fieldset key='favoriteOption'>
                     <div className='checkbox'>
                         <label>
                             <input
@@ -551,7 +539,7 @@ export default class UserSettingsSidebar extends React.Component {
                             defaultMessage='Channels marked as favorites will be grouped separately.'
                         />
                     </div>
-                </div>
+                </fieldset>
             );
 
             contents = (
@@ -684,7 +672,6 @@ export default class UserSettingsSidebar extends React.Component {
                 describe={this.renderChannelSwitcherLabel(this.state.settings.channel_switcher_section)}
                 section={'channelSwitcher'}
                 updateSection={this.updateSection}
-                focused={true}
             />
         );
     };
diff --git a/sass/layout/_forms.scss b/sass/layout/_forms.scss
index 69c290e0fed1..16a3a3848bd9 100644
--- a/sass/layout/_forms.scss
+++ b/sass/layout/_forms.scss
@@ -26,6 +26,13 @@
     }
 }
 
+.form-legend {
+    border: none;
+    font-size: inherit;
+    font-weight: 600;
+    margin: 0 0 0.8rem;
+}
+
 .form-horizontal {
     .modal-intro {
         margin: -10px 0 30px;