Fix a11y issues with cross cluster replication flyouts (elastic#149069)

Fixes elastic#135503, fixes
elastic#135506

## Summary

This PR fixes the a11y issues in the Follower index flyout and the Auto
follower index flyout from the Cross cluster replication plugin.

Screenshots:
<img height="500" alt="Screenshot 2023-01-17 at 17 46 08"
src="https://user-images.githubusercontent.com/59341489/212985332-794a2b7e-3e12-4303-bcbd-ad63552f211c.png">
<img height="500" alt="Screenshot 2023-01-17 at 13 26 51"
src="https://user-images.githubusercontent.com/59341489/212987803-40062d53-3b34-4286-98fc-736264491b08.png">


Followed [these
instructions](https://www.elastic.co/guide/en/elasticsearch/reference/current/ccr-getting-started-tutorial.html#ccr-getting-started-tutorial)
to set up the cross cluster replication and the follower and
auto-follower indices.


### Checklist

- [X] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [X] Any UI touched in this PR is usable by keyboard only (learn more
about [keyboard accessibility](https://webaim.org/techniques/keyboard/))
- [X] Any UI touched in this PR does not create any new axe failures
(run axe in browser:
[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),
[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))
- [X] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

x-pack/plugins/cross_cluster_replication/public/__jest__/client_integration/auto_follow_pattern_list.test.js

@@ -269,7 +269,10 @@ describe('<AutoFollowPatternList />', () => {
       test('should have a "settings" section', () => {
         actions.clickAutoFollowPatternAt(0);
         expect(find('settingsSection').find('h3').text()).toEqual('Settings');
-        expect(exists('settingsValues')).toBe(true);
+
+        // The number of different settings of an auto-follower pattern
+        const AVAILABLE_SETTINGS = 4;
+        expect(find('settingsValues').length).toBe(AVAILABLE_SETTINGS);
       });
 
       test('should set the correct auto-follow pattern settings values', () => {

x-pack/plugins/cross_cluster_replication/public/app/sections/home/auto_follow_pattern_list/components/detail_panel/detail_panel.js

@@ -102,9 +102,9 @@ export class DetailPanel extends Component {
 
           <EuiSpacer size="s" />
 
-          <EuiDescriptionList data-test-subj="settingsValues">
-            <EuiFlexGroup>
-              <EuiFlexItem>
+          <EuiFlexGroup>
+            <EuiFlexItem>
+              <EuiDescriptionList data-test-subj="settingsValues">
                 <EuiDescriptionListTitle>
                   <EuiTitle size="xs">
                     <FormattedMessage
@@ -117,9 +117,11 @@ export class DetailPanel extends Component {
                 <EuiDescriptionListDescription data-test-subj="remoteCluster">
                   {remoteCluster}
                 </EuiDescriptionListDescription>
-              </EuiFlexItem>
+              </EuiDescriptionList>
+            </EuiFlexItem>
 
-              <EuiFlexItem>
+            <EuiFlexItem>
+              <EuiDescriptionList data-test-subj="settingsValues">
                 <EuiDescriptionListTitle>
                   <EuiTitle size="xs">
                     <FormattedMessage
@@ -132,13 +134,15 @@ export class DetailPanel extends Component {
                 <EuiDescriptionListDescription data-test-subj="leaderIndexPatterns">
                   {leaderIndexPatterns.join(', ')}
                 </EuiDescriptionListDescription>
-              </EuiFlexItem>
-            </EuiFlexGroup>
+              </EuiDescriptionList>
+            </EuiFlexItem>
+          </EuiFlexGroup>
 
-            <EuiSpacer size="s" />
+          <EuiSpacer size="s" />
 
-            <EuiFlexGroup>
-              <EuiFlexItem>
+          <EuiFlexGroup>
+            <EuiFlexItem>
+              <EuiDescriptionList data-test-subj="settingsValues">
                 <EuiDescriptionListTitle>
                   <EuiTitle size="xs">
                     <FormattedMessage
@@ -158,9 +162,11 @@ export class DetailPanel extends Component {
                     </em>
                   )}
                 </EuiDescriptionListDescription>
-              </EuiFlexItem>
+              </EuiDescriptionList>
+            </EuiFlexItem>
 
-              <EuiFlexItem>
+            <EuiFlexItem>
+              <EuiDescriptionList data-test-subj="settingsValues">
                 <EuiDescriptionListTitle>
                   <EuiTitle size="xs">
                     <FormattedMessage
@@ -180,9 +186,9 @@ export class DetailPanel extends Component {
                     </em>
                   )}
                 </EuiDescriptionListDescription>
-              </EuiFlexItem>
-            </EuiFlexGroup>
-          </EuiDescriptionList>
+              </EuiDescriptionList>
+            </EuiFlexItem>
+          </EuiFlexGroup>
         </section>
       </>
     );