[docs] Remove role="region" from all scroll examples

a scrollable region does not strictly need `role="region"`, it just needs `tabIndex={0}` in this case our usage in our docs is also wrong because we're using it within a `<section>` for 2 reasons (IMO) - they're not significant enough to be landmarks, and a landmark within a landmark is always weird
elastic · Oct 27, 2023 · 0dd56e4 · 0dd56e4
1 parent 9aa7917
commit 0dd56e4
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 68 deletions.
diff --git a/src-docs/src/views/scroll/full_height.tsx b/src-docs/src/views/scroll/full_height.tsx
@@ -38,13 +38,7 @@ export default () => {
               responsive={false}
             >
               <EuiFlexItem>
-                <EuiPanel
-                  className="eui-yScroll"
-                  color="warning"
-                  tabIndex={0}
-                  role="region"
-                  aria-label="Example 1 for full height region"
-                >
+                <EuiPanel className="eui-yScroll" color="warning" tabIndex={0}>
                   <EuiText size="s">
                     <p>
                       Orbiting this at a distance of roughly ninety-two million
@@ -57,13 +51,7 @@ export default () => {
                 </EuiPanel>
               </EuiFlexItem>
               <EuiFlexItem>
-                <EuiPanel
-                  className="eui-yScroll"
-                  color="warning"
-                  tabIndex={0}
-                  role="region"
-                  aria-label="Example 2 for full height region"
-                >
+                <EuiPanel className="eui-yScroll" color="warning" tabIndex={0}>
                   <EuiText size="s">
                     <p>
                       Orbiting this at a distance of roughly ninety-two million
@@ -83,11 +71,11 @@ export default () => {
     className="eui-fullHeight" responsive={false}>
     <EuiFlexItem>
       <BodyScroll
-        className="eui-yScroll" tabIndex={0} role="region" aria-label=""/>
+        className="eui-yScroll" tabIndex={0} />
     </EuiFlexItem>
     <EuiFlexItem>
       <BodyScroll
-        className="eui-yScroll" tabIndex={0} role="region" aria-label=""/>
+        className="eui-yScroll" tabIndex={0} />
     </EuiFlexItem>
   </EuiFlexGroup>
 </BodyContent>`}

diff --git a/src-docs/src/views/scroll/scroll.tsx b/src-docs/src/views/scroll/scroll.tsx
@@ -41,8 +41,6 @@ export default () => {
         example={
           <div
             tabIndex={0}
-            role="region"
-            aria-label="Example of eui-scrollBar region"
             className="eui-scrollBar"
             style={{
               overflowY: 'auto',
@@ -53,12 +51,7 @@ export default () => {
             <ScrollContent />
           </div>
         }
-        snippet={`<div
-  tabIndex={0}
-  role="region"
-  aria-label=""
-  className="eui-scrollBar"
->
+        snippet={`<div tabIndex={0} className="eui-scrollBar">
   <EuiPanel />
   <EuiPanel />
   <EuiPanel />
@@ -88,8 +81,6 @@ export default () => {
           example={
             <div
               tabIndex={0}
-              role="region"
-              aria-label="Example of useEuiScrollBar region"
               css={css`
                 ${useEuiScrollBar()}
                 ${logicalCSSWithFallback('overflow-y', 'auto')}
@@ -125,12 +116,7 @@ export default () => {
             paddingSize: 'none',
           }}
           example={
-            <div
-              tabIndex={0}
-              role="region"
-              aria-label="Example of euiScrollBar region"
-              className="guideSass__euiScrollBar"
-            >
+            <div tabIndex={0} className="guideSass__euiScrollBar">
               <ScrollContent />
             </div>
           }

diff --git a/src-docs/src/views/scroll/scroll_example.js b/src-docs/src/views/scroll/scroll_example.js
@@ -26,10 +26,7 @@ export const ScrollExample = {
         <p>
           To ensure keyboard-only users have access to the scrollable regions,
           the optimal solution is to apply <EuiCode>{'tabIndex="0"'}</EuiCode>{' '}
-          to the region. Add{' '}
-          <EuiCode language="html">{'role="region"'}</EuiCode> and supply an
-          accessible name by using <EuiCode language="html">aria-label</EuiCode>{' '}
-          or another method.{' '}
+          to the region.{' '}
           <EuiLink href="https://dequeuniversity.com/rules/axe/4.1/scrollable-region-focusable">
             Learn more about the <EuiCode>scrollable-region-focusable</EuiCode>{' '}
             rule at Deque.

diff --git a/src-docs/src/views/scroll/scroll_x.tsx b/src-docs/src/views/scroll/scroll_x.tsx
@@ -51,20 +51,13 @@ export default () => {
         example={
           <div
             tabIndex={0}
-            role="region"
-            aria-label="Example of eui-xScroll region"
             className="eui-xScrollWithShadows"
             style={{ padding: euiTheme.size.base }}
           >
             {scrollingContent}
           </div>
         }
-        snippet={`<div
-  tabIndex={0}
-  role="region"
-  aria-label=""
-  className="eui-xScrollWithShadows"
->
+        snippet={`<div tabIndex={0} className="eui-xScrollWithShadows">
   <EuiPanel />
   <EuiPanel />
   <EuiPanel />
@@ -94,8 +87,6 @@ export default () => {
           example={
             <div
               tabIndex={0}
-              role="region"
-              aria-label="Example of useEuiOverflowScroll(x) region"
               css={css`
                 ${useEuiOverflowScroll('x', true)};
                 padding: ${euiTheme.size.base};
@@ -130,12 +121,7 @@ export default () => {
             paddingSize: 'none',
           }}
           example={
-            <div
-              tabIndex={0}
-              role="region"
-              aria-label="Example of euiXScrollWithShadows region"
-              className="guideSass__overflowShadowsX"
-            >
+            <div tabIndex={0} className="guideSass__overflowShadowsX">
               {scrollingContent}
             </div>
           }

diff --git a/src-docs/src/views/scroll/scroll_y.tsx b/src-docs/src/views/scroll/scroll_y.tsx
@@ -35,20 +35,13 @@ export default () => {
         example={
           <div
             tabIndex={0}
-            role="region"
-            aria-label="Example of eui-yScroll region"
             className="eui-yScrollWithShadows"
             style={{ height: 180 }}
           >
             <ScrollContent />
           </div>
         }
-        snippet={`<div
-  tabIndex={0}
-  role="region"
-  aria-label=""
-  className="eui-yScrollWithShadows"
->
+        snippet={`<div tabIndex={0} className="eui-yScrollWithShadows">
   <EuiPanel />
   <EuiPanel />
   <EuiPanel />
@@ -78,8 +71,6 @@ export default () => {
           example={
             <div
               tabIndex={0}
-              role="region"
-              aria-label="Example of useEuiOverflowScroll(y) region"
               css={css`
                 ${useEuiOverflowScroll('y', true)}
                 ${logicalCSS('height', '180px')}
@@ -114,12 +105,7 @@ export default () => {
             paddingSize: 'none',
           }}
           example={
-            <div
-              tabIndex={0}
-              role="region"
-              aria-label="Example of euiYScrollWithShadows region"
-              className="guideSass__overflowShadowsY"
-            >
+            <div tabIndex={0} className="guideSass__overflowShadowsY">
               <ScrollContent />
             </div>
           }