Skip to content

Commit

Permalink
#5422 for Galleria
Browse files Browse the repository at this point in the history
  • Loading branch information
@gucal
gucal committed Nov 28, 2023
1 parent 6b37b03 commit 081170e
Show file tree
Hide file tree
Showing 4 changed files with 296 additions and 138 deletions.
219 changes: 108 additions & 111 deletions components/doc/galleria/accessibilitydoc.js
View file
Original file line number Diff line number Diff line change
@@ -1,125 +1,122 @@
import { DevelopmentSection } from '@/components/doc/common/developmentsection';
import { DocSectionText } from '@/components/doc/common/docsectiontext';

import Link from 'next/link';

export function AccessibilityDoc() {
return (
<DevelopmentSection>
<DocSectionText id="accessibility" label="Accessibility">
<h3>Screen Reader</h3>
<p>
Galleria uses <i>region</i> role and since any attribute is passed to the main container element, attributes such as <i>aria-label</i> and <i>aria-roledescription</i> can be used as well. The slides container has <i>aria-live</i>{' '}
attribute set as "polite" if galleria is not in autoplay mode, otherwise "off" would be the value in autoplay.
</p>
<DocSectionText id="accessibility" label="Accessibility">
<h3>Screen Reader</h3>
<p>
Galleria uses <i>region</i> role and since any attribute is passed to the main container element, attributes such as <i>aria-label</i> and <i>aria-roledescription</i> can be used as well. The slides container has <i>aria-live</i>{' '}
attribute set as "polite" if galleria is not in autoplay mode, otherwise "off" would be the value in autoplay.
</p>

<p>
A slide has a <i>group</i> role with an aria-label that refers to the <i>aria.slideNumber</i> property of the <Link href="/locale">locale</Link> API. Similarly <i>aria.slide</i> is used as the <i>aria-roledescription</i> of the
item. Inactive slides are hidden from the readers with <i>aria-hidden</i>.
</p>
<p>
A slide has a <i>group</i> role with an aria-label that refers to the <i>aria.slideNumber</i> property of the <Link href="/locale">locale</Link> API. Similarly <i>aria.slide</i> is used as the <i>aria-roledescription</i> of the item.
Inactive slides are hidden from the readers with <i>aria-hidden</i>.
</p>

<p>
Next and Previous navigators are button elements with <i>aria-label</i> attributes referring to the <i>aria.nextPageLabel</i> and <i>aria.firstPageLabel</i> properties of the <Link href="/locale">locale</Link> API by default
respectively, you may still use your own aria roles and attributes as any valid attribute is passed to the button elements implicitly by using <i>nextButtonProps</i> and <i>prevButtonProps</i>.
</p>
<p>
Next and Previous navigators are button elements with <i>aria-label</i> attributes referring to the <i>aria.nextPageLabel</i> and <i>aria.firstPageLabel</i> properties of the <Link href="/locale">locale</Link> API by default
respectively, you may still use your own aria roles and attributes as any valid attribute is passed to the button elements implicitly by using <i>nextButtonProps</i> and <i>prevButtonProps</i>.
</p>

<p>
Quick navigation elements and thumnbails follow the tab pattern. They are placed inside an element with a <i>tablist</i> role whereas each item has a <i>tab</i> role with <i>aria-selected</i> and <i>aria-controls</i> attributes.
The <i>aria-label</i> attribute of a quick navigation item refers to the <i>aria.pageLabel</i> of the <Link href="/locale">locale</Link> API. Current page is marked with <i>aria-current</i>.
</p>
<p>
Quick navigation elements and thumnbails follow the tab pattern. They are placed inside an element with a <i>tablist</i> role whereas each item has a <i>tab</i> role with <i>aria-selected</i> and <i>aria-controls</i> attributes. The{' '}
<i>aria-label</i> attribute of a quick navigation item refers to the <i>aria.pageLabel</i> of the <Link href="/locale">locale</Link> API. Current page is marked with <i>aria-current</i>.
</p>

<p>
In full screen mode, modal element uses <i>dialog</i> role with <i>aria-modal</i> enabled. The close button retrieves <i>aria-label</i> from the <i>aria.close</i> property of the <Link href="/locale">locale</Link> API.
</p>
<p>
In full screen mode, modal element uses <i>dialog</i> role with <i>aria-modal</i> enabled. The close button retrieves <i>aria-label</i> from the <i>aria.close</i> property of the <Link href="/locale">locale</Link> API.
</p>

<h3>Next/Prev Keyboard Support</h3>
<div className="doc-tablewrapper">
<table className="doc-table">
<thead>
<tr>
<th>Key</th>
<th>Function</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<i>tab</i>
</td>
<td>Moves focus through interactive elements in the carousel.</td>
</tr>
<tr>
<td>
<i>enter</i>
</td>
<td>Activates navigation.</td>
</tr>
<tr>
<td>
<i>space</i>
</td>
<td>Activates navigation.</td>
</tr>
</tbody>
</table>
</div>
<h3>Next/Prev Keyboard Support</h3>
<div className="doc-tablewrapper">
<table className="doc-table">
<thead>
<tr>
<th>Key</th>
<th>Function</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<i>tab</i>
</td>
<td>Moves focus through interactive elements in the carousel.</td>
</tr>
<tr>
<td>
<i>enter</i>
</td>
<td>Activates navigation.</td>
</tr>
<tr>
<td>
<i>space</i>
</td>
<td>Activates navigation.</td>
</tr>
</tbody>
</table>
</div>

<h3>Quick Navigation Keyboard Support</h3>
<div className="doc-tablewrapper">
<table className="doc-table">
<thead>
<tr>
<th>Key</th>
<th>Function</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<i>tab</i>
</td>
<td>Moves focus through the active slide link.</td>
</tr>
<tr>
<td>
<i>enter</i>
</td>
<td>Activates the focused slide link.</td>
</tr>
<tr>
<td>
<i>space</i>
</td>
<td>Activates the focused slide link.</td>
</tr>
<tr>
<td>
<i>right arrow</i>
</td>
<td>Moves focus to the next slide link.</td>
</tr>
<tr>
<td>
<i>left arrow</i>
</td>
<td>Moves focus to the previous slide link.</td>
</tr>
<tr>
<td>
<i>home</i>
</td>
<td>Moves focus to the first slide link.</td>
</tr>
<tr>
<td>
<i>end</i>
</td>
<td>Moves focus to the last slide link.</td>
</tr>
</tbody>
</table>
</div>
</DocSectionText>
</DevelopmentSection>
<h3>Quick Navigation Keyboard Support</h3>
<div className="doc-tablewrapper">
<table className="doc-table">
<thead>
<tr>
<th>Key</th>
<th>Function</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<i>tab</i>
</td>
<td>Moves focus through the active slide link.</td>
</tr>
<tr>
<td>
<i>enter</i>
</td>
<td>Activates the focused slide link.</td>
</tr>
<tr>
<td>
<i>space</i>
</td>
<td>Activates the focused slide link.</td>
</tr>
<tr>
<td>
<i>right arrow</i>
</td>
<td>Moves focus to the next slide link.</td>
</tr>
<tr>
<td>
<i>left arrow</i>
</td>
<td>Moves focus to the previous slide link.</td>
</tr>
<tr>
<td>
<i>home</i>
</td>
<td>Moves focus to the first slide link.</td>
</tr>
<tr>
<td>
<i>end</i>
</td>
<td>Moves focus to the last slide link.</td>
</tr>
</tbody>
</table>
</div>
</DocSectionText>
);
}
16 changes: 11 additions & 5 deletions components/lib/galleria/Galleria.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { useInterval, useUnmountEffect } from '../hooks/Hooks';
import { TimesIcon } from '../icons/times';
import { Portal } from '../portal/Portal';
import { Ripple } from '../ripple/Ripple';
import { DomHandler, IconUtils, ObjectUtils, ZIndexUtils, classNames, mergeProps } from '../utils/Utils';
import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, ZIndexUtils, classNames, mergeProps } from '../utils/Utils';
import { GalleriaBase } from './GalleriaBase';
import { GalleriaItem } from './GalleriaItem';
import { GalleriaThumbnails } from './GalleriaThumbnails';
Expand All @@ -25,6 +25,7 @@ export const Galleria = React.memo(
const maskRef = React.useRef(null);
const activeItemIndex = props.onItemChange ? props.activeIndex : activeIndexState;
const isVertical = props.thumbnailsPosition === 'left' || props.thumbnailsPosition === 'right';
const id = props.id || UniqueComponentId();

const { ptm, cx, sx, isUnstyled } = GalleriaBase.setMetaData({
props,
Expand Down Expand Up @@ -189,7 +190,7 @@ export const Galleria = React.memo(
{
type: 'button',
className: cx('closeButton'),
'aria-label': localeOption('close'),
'aria-label': localeOption('aria') ? localeOption('aria').close : undefined,
onClick: hide
},
ptm('closeButton')
Expand All @@ -208,7 +209,7 @@ export const Galleria = React.memo(
const rootProps = mergeProps(
{
ref: elementRef,
id: props.id,
id: id,
className: classNames(props.className, cx('root', { context, thumbnailsPosClassName, indicatorPosClassName })),
style: props.style
},
Expand All @@ -218,7 +219,8 @@ export const Galleria = React.memo(

const contentProps = mergeProps(
{
className: cx('content')
className: cx('content'),
'aria-live': props.autoPlay ? 'polite' : 'off'
},
ptm('content')
);
Expand All @@ -231,6 +233,7 @@ export const Galleria = React.memo(
<GalleriaItem
hostName="Galleria"
ref={previewContentRef}
id={id}
value={props.value}
activeItemIndex={activeItemIndex}
onActiveItemChange={onActiveItemChange}
Expand All @@ -255,6 +258,7 @@ export const Galleria = React.memo(
<GalleriaThumbnails
hostName="Galleria"
value={props.value}
containerId={id}
activeItemIndex={activeItemIndex}
onActiveItemChange={onActiveItemChange}
itemTemplate={props.thumbnail}
Expand Down Expand Up @@ -289,7 +293,9 @@ export const Galleria = React.memo(
if (props.fullScreen) {
const maskProps = mergeProps(
{
className: cx('mask', { visibleState })
className: cx('mask', { visibleState }),
role: 'dialog',
'aria-modal': 'true'
},
ptm('mask')
);
Expand Down
Loading

0 comments on commit 081170e

Please sign in to comment.