Merge branch 'main' into chore/buildkite-shell-refactoring

.buildkite/pipelines/pipeline_pull_request_test.yml

@@ -73,3 +73,14 @@ steps:
     artifact_paths:
       - "cypress/screenshots/**/*.png"
       - "cypress/videos/**/*.mp4"
+
+  - command: .buildkite/scripts/pipeline_test.sh
+    label: ":axe: Cypress accessibility (a11y) tests on React 18"
+    agents:
+      provider: "gcp"
+    env:
+      TEST_TYPE: 'cypress:a11y'
+    if: build.branch != "main"
+    artifact_paths:
+      - "cypress/screenshots/**/*.png"
+      - "cypress/videos/**/*.mp4"

.buildkite/scripts/pipelines/pipeline_test.sh

@@ -54,6 +54,11 @@ case $TEST_TYPE in
     DOCKER_OPTIONS+=(bash -c "/opt/yarn*/bin/yarn && yarn cypress install && yarn test-cypress --node-options=--max_old_space_size=2048")
     ;;
 
+  cypress:a11y)
+    echo "[TASK]: Running Cypress accessibility tests against React 18"
+    DOCKER_OPTIONS+=(bash -c "/opt/yarn*/bin/yarn && yarn cypress install && yarn run test-cypress-a11y --node-options=--max_old_space_size=2048")
+    ;;
+
   *)
     echo "[ERROR]: Unknown task"
     echo "Exit code: 1"

changelogs/upcoming/7352.md

@@ -0,0 +1,2 @@
+- Updated `EuiListGroupItem` to render an external icon and screen reader affordance for links with `target` set to to `_blank`
+- Updated `EuiListGroupItem` with a new `external` prop, which allows enabling or disabling the new external link icon

changelogs/upcoming/7360.md

@@ -0,0 +1 @@
+- Updated `EuiText` to no longer set any opinionated styles on child `<img>` tags - use `EuiImage` for image display within text instead

changelogs/upcoming/7361.md

@@ -0,0 +1,5 @@
+- Improved `EuiBasicTable`/`EuiInMemoryTable's mobile UI for custom actions
+
+**Accessibility**
+
+- Fixed custom `EuiBasicTable`/`EuiInMemoryTable` rendering nested interactive custom actions

scripts/test-a11y-docker.js

@@ -5,15 +5,16 @@ execSync('docker pull docker.elastic.co/eui/ci:5.6', {
 });
 /* eslint-disable-next-line no-multi-str */
 execSync(
-  'docker run \
-  -i --rm --cap-add=SYS_ADMIN --volume=$(pwd):/app --workdir=/app \
+  "docker run \
+  -i --rm --cap-add=SYS_ADMIN --volume=$(pwd):/app --workdir=/app --platform=linux/amd64 \
   -e GIT_COMMITTER_NAME=test -e GIT_COMMITTER_EMAIL=test -e HOME=/tmp \
   --user=$(id -u):$(id -g) \
   docker.elastic.co/eui/ci:5.6 \
-  bash -c \'npm config set spin false \
-    && /opt/yarn*/bin/yarn \
+  bash -c '/opt/yarn*/bin/yarn \
     && yarn cypress install \
-    && NODE_OPTIONS="--max-old-space-size=2048" npm run test-cypress-a11y\'',
+    && yarn run test-cypress-a11y \
+      --node-options=--max_old_space_size=2048 \
+      --skip-css '", // Skipping CSS because compiling has a tendency to hang on Apple Silicon
   {
     stdio: 'inherit',
   }

src-docs/src/views/list_group/list_group_example.js

@@ -79,6 +79,17 @@ export const ListGroupExample = {
             <EuiCode>isActive</EuiCode> and <EuiCode>isDisabled</EuiCode>{' '}
             properties.
           </p>
+          <p>
+            If your link is external or will open in a new tab, you can manually{' '}
+            set the <EuiCode>external</EuiCode> property. However, just like{' '}
+            with the{' '}
+            <Link to="/navigation/link">
+              <strong>EuiLink</strong>
+            </Link>{' '}
+            component, setting{' '}
+            <EuiCode language="tsx">{'target="_blank"'}</EuiCode> defaults to{' '}
+            <EuiCode language="tsx">{'external={true}'}</EuiCode>.
+          </p>
           <p>
             As is done in this example, the <strong>EuiListGroup</strong>{' '}
             component can also accept an array of items via the{' '}

src-docs/src/views/list_group/list_group_links.tsx

@@ -26,9 +26,10 @@ const myContent = [
     iconType: 'copyClipboard',
   },
   {
-    label: 'Fifth link',
-    href: '#/display/list-group',
+    label: 'Fifth link will open in new tab',
+    href: 'http://www.elastic.co',
     iconType: 'crosshairs',
+    target: '_blank',
   },
 ];
 

src-docs/src/views/tables/actions/actions.tsx

@@ -171,6 +171,11 @@ export default () => {
               );
             },
           },
+          {
+            render: () => {
+              return <EuiLink onClick={() => {}}>Edit</EuiLink>;
+            },
+          },
           ...actions,
         ];
       }

src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap

@@ -1,6 +1,219 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`CollapsedItemActions render 1`] = `
+exports[`CollapsedItemActions custom actions 1`] = `
+<body>
+  <div>
+    <div
+      class="euiPopover euiPopover-isOpen emotion-euiPopover-inline-block"
+      id="id-actions"
+    >
+      <span
+        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
+      >
+        <button
+          aria-label="All actions"
+          class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
+          data-test-subj="euiCollapsedItemActionsButton"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            color="inherit"
+            data-euiicon-type="boxesHorizontal"
+          />
+        </button>
+      </span>
+    </div>
+  </div>
+  <div
+    data-euiportal="true"
+  >
+    <div
+      data-focus-guard="true"
+      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+      tabindex="0"
+    />
+    <div
+      data-focus-lock-disabled="false"
+    >
+      <div
+        aria-describedby="generated-id"
+        aria-live="off"
+        aria-modal="true"
+        class="euiPanel euiPanel--plain euiPopover__panel emotion-euiPanel-grow-m-plain-euiPopover__panel-light-isOpen-hasTransform-left"
+        data-autofocus="true"
+        data-popover-open="true"
+        data-popover-panel="true"
+        role="dialog"
+        style="top: -22px; left: -16px; z-index: 2000;"
+        tabindex="0"
+      >
+        <div
+          class="euiPopover__arrow emotion-euiPopoverArrow-left"
+          data-popover-arrow="left"
+          style="left: 0px; top: 10px;"
+        />
+        <p
+          class="emotion-euiScreenReaderOnly"
+          id="generated-id"
+        >
+          You are in a dialog. Press Escape, or tap/click outside the dialog to close.
+        </p>
+        <div>
+          <div
+            class="euiContextMenuPanel euiBasicTable__collapsedActions emotion-euiContextMenuPanel"
+            tabindex="-1"
+          >
+            <div>
+              <div
+                class="euiContextMenuItem euiBasicTable__collapsedCustomAction emotion-euiContextMenuItem-m-center"
+              >
+                <span
+                  class="euiContextMenuItem__text emotion-euiContextMenuItem__text"
+                >
+                  <span>
+                    <button
+                      data-test-subj="customAction"
+                    >
+                      hello
+                    </button>
+                  </span>
+                </span>
+              </div>
+              <div
+                class="euiContextMenuItem euiBasicTable__collapsedCustomAction emotion-euiContextMenuItem-m-center"
+              >
+                <span
+                  class="euiContextMenuItem__text emotion-euiContextMenuItem__text"
+                >
+                  <span>
+                    <a
+                      href="#"
+                    >
+                      world
+                    </a>
+                  </span>
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      data-focus-guard="true"
+      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+      tabindex="0"
+    />
+  </div>
+</body>
+`;
+
+exports[`CollapsedItemActions default actions 1`] = `
+<body>
+  <div>
+    <div
+      class="euiPopover euiPopover-isOpen emotion-euiPopover-inline-block"
+      id="id-actions"
+    >
+      <span
+        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
+      >
+        <button
+          aria-label="All actions"
+          class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
+          data-test-subj="euiCollapsedItemActionsButton"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            color="inherit"
+            data-euiicon-type="boxesHorizontal"
+          />
+        </button>
+      </span>
+    </div>
+  </div>
+  <div
+    data-euiportal="true"
+  >
+    <div
+      data-focus-guard="true"
+      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+      tabindex="0"
+    />
+    <div
+      data-focus-lock-disabled="false"
+    >
+      <div
+        aria-describedby="generated-id"
+        aria-live="off"
+        aria-modal="true"
+        class="euiPanel euiPanel--plain euiPopover__panel emotion-euiPanel-grow-m-plain-euiPopover__panel-light-isOpen-hasTransform-left"
+        data-autofocus="true"
+        data-popover-open="true"
+        data-popover-panel="true"
+        role="dialog"
+        style="top: -22px; left: -16px; z-index: 2000;"
+        tabindex="0"
+      >
+        <div
+          class="euiPopover__arrow emotion-euiPopoverArrow-left"
+          data-popover-arrow="left"
+          style="left: 0px; top: 10px;"
+        />
+        <p
+          class="emotion-euiScreenReaderOnly"
+          id="generated-id"
+        >
+          You are in a dialog. Press Escape, or tap/click outside the dialog to close.
+        </p>
+        <div>
+          <div
+            class="euiContextMenuPanel euiBasicTable__collapsedActions emotion-euiContextMenuPanel"
+            tabindex="-1"
+          >
+            <div>
+              <button
+                class="euiContextMenuItem euiBasicTable__collapsedAction emotion-euiContextMenuItem-m-center"
+                data-test-subj="defaultAction"
+                type="button"
+              >
+                <span
+                  class="euiContextMenuItem__text emotion-euiContextMenuItem__text"
+                >
+                  default1
+                </span>
+              </button>
+              <a
+                class="euiContextMenuItem euiBasicTable__collapsedAction emotion-euiContextMenuItem-m-center"
+                href="https://www.elastic.co/"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <span
+                  class="euiContextMenuItem__text emotion-euiContextMenuItem__text"
+                >
+                  default2
+                </span>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      data-focus-guard="true"
+      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+      tabindex="0"
+    />
+  </div>
+</body>
+`;
+
+exports[`CollapsedItemActions renders 1`] = `
 <div
   class="euiPopover emotion-euiPopover-inline-block"
   id="id-actions"
@@ -24,52 +237,3 @@ exports[`CollapsedItemActions render 1`] = `
   </span>
 </div>
 `;
-
-exports[`CollapsedItemActions render with href and _target provided 1`] = `
-<EuiPopover
-  anchorPosition="leftCenter"
-  button={
-    <EuiI18n
-      default="All actions"
-      token="euiCollapsedItemActions.allActions"
-    >
-      [Function]
-    </EuiI18n>
-  }
-  closePopover={[Function]}
-  display="inline-block"
-  hasArrow={true}
-  id="id-actions"
-  isOpen={true}
-  ownFocus={true}
-  panelPaddingSize="none"
-  popoverRef={[Function]}
-  repositionToCrossAxis={true}
->
-  <EuiContextMenuPanelClass
-    items={
-      Array [
-        <EuiContextMenuItem
-          disabled={false}
-          onClick={[Function]}
-        >
-          default1
-        </EuiContextMenuItem>,
-        <EuiContextMenuItem
-          onClick={[Function]}
-        >
-          <div />
-        </EuiContextMenuItem>,
-        <EuiContextMenuItem
-          disabled={false}
-          href="https://www.elastic.co/"
-          onClick={[Function]}
-          target="_blank"
-        >
-          default2
-        </EuiContextMenuItem>,
-      ]
-    }
-  />
-</EuiPopover>
-`;