accessibility: use hr

Author: florianduros

res/css/views/settings/_LayoutSwitcher.pcss

@@ -81,6 +81,7 @@ limitations under the License.
         }
 
         .mxLayoutSwitcher_LayoutSelector_LayoutRadio_separator {
+            border-top: 0;
             border-bottom: 1px solid var(--cpd-color-border-interactive-secondary);
         }
     }

src/components/views/settings/LayoutSwitcher.tsx

@@ -88,7 +88,7 @@ function LayoutRadio({ layout, label }: LayoutRadioProps): JSX.Element {
                     <RadioControl name="layout" value={layout} defaultChecked={currentLayout === layout} />
                     <span>{label}</span>
                 </div>
-                <div role="separator" className="mxLayoutSwitcher_LayoutSelector_LayoutRadio_separator" />
+                <hr className="mxLayoutSwitcher_LayoutSelector_LayoutRadio_separator" />
                 <EventTilePreview
                     message={_t("common|preview_message")}
                     layout={layout}

test/components/views/settings/__snapshots__/LayoutSwitcher-test.tsx.snap

@@ -52,9 +52,8 @@ exports[`<LayoutSwitcher /> should render 1`] = `
                 Modern
               </span>
             </div>
-            <div
+            <hr
               class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_separator"
-              role="separator"
             />
             <div
               class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_EventTilePreview"
@@ -169,9 +168,8 @@ exports[`<LayoutSwitcher /> should render 1`] = `
                 Message bubbles
               </span>
             </div>
-            <div
+            <hr
               class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_separator"
-              role="separator"
             />
             <div
               class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_EventTilePreview"
@@ -286,9 +284,8 @@ exports[`<LayoutSwitcher /> should render 1`] = `
                 IRC (experimental)
               </span>
             </div>
-            <div
+            <hr
               class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_separator"
-              role="separator"
             />
             <div
               class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_EventTilePreview mx_IRCLayout"