Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[a11y] More role="region" cleanup #7327

Merged
merged 3 commits into from
Nov 1, 2023
Merged

[a11y] More role="region" cleanup #7327

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
56b4999
EuiDataGrid region and div cleanup
cee-chen Oct 27, 2023
a87f20a
[docs] Remove `role="region"` from all scroll examples
cee-chen Oct 27, 2023
d077ef9
changelog
cee-chen Oct 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 4 additions & 16 deletions src-docs/src/views/scroll/full_height.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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>`}
Expand Down
18 changes: 2 additions & 16 deletions src-docs/src/views/scroll/scroll.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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 />
Expand Down Expand Up @@ -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')}
Expand Down Expand Up @@ -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>
}
Expand Down
5 changes: 1 addition & 4 deletions src-docs/src/views/scroll/scroll_example.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
18 changes: 2 additions & 16 deletions src-docs/src/views/scroll/scroll_x.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 />
Expand Down Expand Up @@ -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};
Expand Down Expand Up @@ -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>
}
Expand Down
18 changes: 2 additions & 16 deletions src-docs/src/views/scroll/scroll_y.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 />
Expand Down Expand Up @@ -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')}
Expand Down Expand Up @@ -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>
}
Expand Down
Loading
Loading