[PR feedback] Remove role prop customization, tweak SR text accordi…

…ngly
elastic · Feb 2, 2023 · ade9175 · ade9175
1 parent abaa538
commit ade9175
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 123 deletions.
diff --git a/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap b/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
@@ -16,17 +16,18 @@ Array [
         class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left"
         data-autofocus="true"
         id="id"
+        role="dialog"
         style="inline-size: 320px;"
         tabindex="0"
       >
         <p
           class="emotion-euiScreenReaderOnly"
           id="generated-id"
         >
-          You are in a nav. To close this nav, press Escape. Or tap/click outside the nav on the shadowed overlay to close. 
+          You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close. 
         </p>
         <button
-          aria-label="Close this nav"
+          aria-label="Close this dialog"
           class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-fill-text-euiFlyout__closeButton-outside-left"
           data-test-subj="euiFlyoutCloseButton"
           type="button"
@@ -69,17 +70,18 @@ Array [
         data-autofocus="true"
         data-test-subj="test subject string"
         id="id"
+        role="dialog"
         style="inline-size: 320px;"
         tabindex="0"
       >
         <p
           class="emotion-euiScreenReaderOnly"
           id="generated-id"
         >
-          You are in a nav. To close this nav, press Escape. Or tap/click outside the nav on the shadowed overlay to close. 
+          You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close. 
         </p>
         <button
-          aria-label="Close this nav"
+          aria-label="Close this dialog"
           class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-fill-text-euiFlyout__closeButton-outside-left"
           data-test-subj="euiFlyoutCloseButton"
           type="button"
@@ -117,17 +119,18 @@ Array [
       class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left"
       data-autofocus="true"
       id="id"
+      role="dialog"
       style="inline-size: 240px;"
       tabindex="0"
     >
       <p
         class="emotion-euiScreenReaderOnly"
         id="generated-id"
       >
-        You are in a nav. To close this nav, press Escape.  
+        You are in a non-modal dialog. To close the dialog, press Escape. 
       </p>
       <button
-        aria-label="Close this nav"
+        aria-label="Close this dialog"
         class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-fill-text-euiFlyout__closeButton-outside-left"
         data-test-subj="euiFlyoutCloseButton"
         type="button"
@@ -170,17 +173,18 @@ Array [
         class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left"
         data-autofocus="true"
         id="id"
+        role="dialog"
         style="inline-size: 320px;"
         tabindex="0"
       >
         <p
           class="emotion-euiScreenReaderOnly"
           id="generated-id"
         >
-          You are in a nav. To close this nav, press Escape. Or tap/click outside the nav on the shadowed overlay to close. 
+          You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close. 
         </p>
         <button
-          aria-label="Close this nav"
+          aria-label="Close this dialog"
           class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-fill-text-euiFlyout__closeButton-outside-left"
           data-test-subj="euiFlyoutCloseButton"
           type="button"
@@ -219,17 +223,18 @@ Array [
         class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left"
         data-autofocus="true"
         id="id"
+        role="dialog"
         style="inline-size: 320px;"
         tabindex="0"
       >
         <p
           class="emotion-euiScreenReaderOnly"
           id="generated-id"
         >
-          You are in a nav. To close this nav, press Escape. Or tap/click outside the nav on the shadowed overlay to close. 
+          You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close. 
         </p>
         <button
-          aria-label="Close this nav"
+          aria-label="Close this dialog"
           class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-fill-text-euiFlyout__closeButton-outside-left"
           data-test-subj="euiFlyoutCloseButton"
           type="button"
@@ -266,6 +271,7 @@ Array [
       class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-push-left-left"
       data-autofocus="true"
       id="id"
+      role="dialog"
       style="inline-size:320px"
       tabindex="0"
     />
@@ -294,17 +300,18 @@ Array [
         class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left"
         data-autofocus="true"
         id="id"
+        role="dialog"
         style="inline-size: 320px;"
         tabindex="0"
       >
         <p
           class="emotion-euiScreenReaderOnly"
           id="generated-id"
         >
-          You are in a nav. To close this nav, press Escape. Or tap/click outside the nav on the shadowed overlay to close. 
+          You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close. 
         </p>
         <button
-          aria-label="Close this nav"
+          aria-label="Close this dialog"
           class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-fill-text-euiFlyout__closeButton-outside-left"
           data-test-subj="euiFlyoutCloseButton"
           type="button"
@@ -346,6 +353,7 @@ Array [
       class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-push-left-left"
       data-autofocus="true"
       id="id"
+      role="dialog"
       style="inline-size: 320px;"
       tabindex="0"
     />
@@ -374,17 +382,18 @@ Array [
         class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left"
         data-autofocus="true"
         id="id"
+        role="dialog"
         style="inline-size: 240px;"
         tabindex="0"
       >
         <p
           class="emotion-euiScreenReaderOnly"
           id="generated-id"
         >
-          You are in a nav. To close this nav, press Escape. Or tap/click outside the nav on the shadowed overlay to close. 
+          You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close. 
         </p>
         <button
-          aria-label="Close this nav"
+          aria-label="Close this dialog"
           class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-fill-text-euiFlyout__closeButton-outside-left"
           data-test-subj="euiFlyoutCloseButton"
           type="button"

diff --git a/src/components/collapsible_nav/collapsible_nav.tsx b/src/components/collapsible_nav/collapsible_nav.tsx
@@ -65,7 +65,6 @@ export const EuiCollapsibleNav: FunctionComponent<EuiCollapsibleNavProps> = ({
   as = 'nav' as EuiCollapsibleNavProps['as'],
   size = 320,
   side = 'left',
-  role = null,
   ownFocus = true,
   outsideClickCloses = true,
   closeButtonPosition = 'outside',
@@ -117,7 +116,6 @@ export const EuiCollapsibleNav: FunctionComponent<EuiCollapsibleNavProps> = ({
       as={as}
       size={size}
       side={side}
-      role={role}
       ownFocus={ownFocus}
       outsideClickCloses={outsideClickCloses}
       closeButtonPosition={closeButtonPosition}