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

feat(misc): update screenreader classname #9392

Merged
merged 5 commits into from
Aug 16, 2023
Merged

feat(misc): update screenreader classname #9392

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ec3ba29
Rebase postv5 (#9393)
tlabaj Jul 21, 2023
d6ecd42
feat(misc): update screenreader classname
kmcfaul Jul 20, 2023
b2cb8fb
add prefix
kmcfaul Jul 31, 2023
c64ce03
fix missing merge conflict
kmcfaul Jul 31, 2023
961b796
update Banner test
kmcfaul Aug 3, 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
3 changes: 1 addition & 2 deletions packages/react-core/src/components/Alert/Alert.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import * as React from 'react';
import { useState } from 'react';
import { css } from '@patternfly/react-styles';
import styles from '@patternfly/react-styles/css/components/Alert/alert';
import accessibleStyles from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';
import { AlertIcon } from './AlertIcon';
import { capitalize, useOUIAProps, OUIAProps } from '../../helpers';
import { AlertContext } from './AlertContext';
Expand Down Expand Up @@ -117,7 +116,7 @@ export const Alert: React.FunctionComponent<AlertProps> = ({
const ouiaProps = useOUIAProps(Alert.displayName, ouiaId, ouiaSafe, variant);
const getHeadingContent = (
<React.Fragment>
<span className={css(accessibleStyles.screenReader)}>{variantLabel}</span>
<span className="pf-v5-screen-reader">{variantLabel}</span>
{title}
</React.Fragment>
);
Expand Down
2 changes: 1 addition & 1 deletion packages/react-core/src/components/Alert/__tests__/__snapshots__/Alert.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ exports[`Matches snapshot 1`] = `
class="pf-v5-c-alert__title"
>
<span
class="pf-v5-u-screen-reader"
class="pf-v5-screen-reader"
>
Custom alert:
</span>
Expand Down
2 changes: 1 addition & 1 deletion packages/react-core/src/components/Banner/Banner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export const Banner: React.FunctionComponent<BannerProps> = ({
)}
{...props}
>
{screenReaderText && <span className="pf-v5-u-screen-reader">{screenReaderText}</span>}
{screenReaderText && <span className="pf-v5-screen-reader">{screenReaderText}</span>}
{children}
</div>
);
Expand Down
2 changes: 1 addition & 1 deletion packages/react-core/src/components/HelperText/HelperTextItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ export const HelperTextItem: React.FunctionComponent<HelperTextItemProps> = ({

<span className={css(styles.helperTextItemText)}>
{children}
{isDynamic && <span className="pf-v5-u-screen-reader">: {screenReaderText};</span>}
{isDynamic && <span className="pf-v5-screen-reader">: {screenReaderText};</span>}
</span>
</Component>
);
Expand Down
2 changes: 1 addition & 1 deletion ...ges/react-core/src/components/HelperText/__tests__/__snapshots__/HelperText.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ exports[`HelperText dynamic helper text renders successfully 1`] = `
>
help test text
<span
class="pf-v5-u-screen-reader"
class="pf-v5-screen-reader"
>
: default status;
</span>
Expand Down
3 changes: 1 addition & 2 deletions packages/react-core/src/components/Modal/ModalBoxTitle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import * as React from 'react';
import modalStyles from '@patternfly/react-styles/css/components/ModalBox/modal-box';
import { css } from '@patternfly/react-styles';
import accessibleStyles from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';
import { capitalize } from '../../helpers';
import { Tooltip } from '../Tooltip';
import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
Expand Down Expand Up @@ -64,7 +63,7 @@ export const ModalBoxTitle: React.FunctionComponent<ModalBoxTitleProps> = ({
{isVariantIcon(titleIconVariant) ? variantIcons[titleIconVariant] : <CustomIcon />}
</span>
)}
{label && <span className={css(accessibleStyles.screenReader)}>{label}</span>}
{label && <span className="pf-v5-screen-reader">{label}</span>}
<span className={css(modalStyles.modalBoxTitleText)}>{title}</span>
</h1>
);
Expand Down
10 changes: 5 additions & 5 deletions packages/react-core/src/components/Modal/__tests__/__snapshots__/ModalBoxTitle.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ exports[`ModalBoxTitle alert variant 1`] = `
</svg>
</span>
<span
class="pf-v5-u-screen-reader"
class="pf-v5-screen-reader"
>
Warning alert:
</span>
Expand Down Expand Up @@ -93,7 +93,7 @@ exports[`ModalBoxTitle custom variant 1`] = `
</svg>
</span>
<span
class="pf-v5-u-screen-reader"
class="pf-v5-screen-reader"
>
Custom alert:
</span>
Expand Down Expand Up @@ -130,7 +130,7 @@ exports[`ModalBoxTitle danger variant 1`] = `
</svg>
</span>
<span
class="pf-v5-u-screen-reader"
class="pf-v5-screen-reader"
>
Danger alert:
</span>
Expand Down Expand Up @@ -167,7 +167,7 @@ exports[`ModalBoxTitle info variant 1`] = `
</svg>
</span>
<span
class="pf-v5-u-screen-reader"
class="pf-v5-screen-reader"
>
Info alert:
</span>
Expand Down Expand Up @@ -204,7 +204,7 @@ exports[`ModalBoxTitle success variant 1`] = `
</svg>
</span>
<span
class="pf-v5-u-screen-reader"
class="pf-v5-screen-reader"
>
Success alert:
</span>
Expand Down
4 changes: 2 additions & 2 deletions packages/react-core/src/components/MultipleFileUpload/MultipleFileUploadStatusItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ export const MultipleFileUploadStatusItem: React.FunctionComponent<MultipleFileU
const reader = new FileReader();
reader.onload = () => resolve(reader.result);
reader.onerror = () => reject(reader.error);
reader.onprogress = data => {
reader.onprogress = (data) => {
if (data.lengthComputable) {
setLoadPercentage((data.loaded / data.total) * 100);
}
Expand All @@ -103,7 +103,7 @@ export const MultipleFileUploadStatusItem: React.FunctionComponent<MultipleFileU
} else {
onReadStarted(file);
readFile(file)
.then(data => {
.then((data) => {
setLoadResult('success');
setLoadPercentage(100);
onReadFinished(file);
Expand Down
3 changes: 1 addition & 2 deletions packages/react-core/src/components/Nav/NavExpandable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import * as React from 'react';
import styles from '@patternfly/react-styles/css/components/Nav/nav';
import a11yStyles from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';
import { css } from '@patternfly/react-styles';
import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
import { getUniqueId } from '../../helpers/util';
Expand Down Expand Up @@ -145,7 +144,7 @@ export class NavExpandable extends React.Component<NavExpandableProps, NavExpand
</PageSidebarContext.Consumer>
<section className={css(styles.navSubnav)} aria-labelledby={this.id} hidden={expandedState ? null : true}>
{srText && (
<h2 className={css(a11yStyles.screenReader)} id={this.id}>
<h2 className="pf-v5-screen-reader" id={this.id}>
{srText}
</h2>
)}
Expand Down
2 changes: 1 addition & 1 deletion ...act-core/src/components/Nav/__tests__/Generated/__snapshots__/NavExpandable.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ exports[`NavExpandable should match snapshot (auto-generated) 1`] = `
hidden=""
>
<h2
class="pf-v5-u-screen-reader"
class="pf-v5-screen-reader"
id="''"
>
''
Expand Down
2 changes: 1 addition & 1 deletion packages/react-core/src/components/Nav/__tests__/__snapshots__/Nav.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -494,7 +494,7 @@ exports[`Nav Expandable Nav List with aria label 1`] = `
hidden=""
>
<h2
class="pf-v5-u-screen-reader"
class="pf-v5-screen-reader"
id="grp-1"
>
Section 1 - Example sub-navigation
Expand Down
3 changes: 1 addition & 2 deletions packages/react-core/src/components/NotificationDrawer/NotificationDrawerListItemHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/excl
import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
import { css } from '@patternfly/react-styles';
import styles from '@patternfly/react-styles/css/components/NotificationDrawer/notification-drawer';
import a11yStyles from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';

import maxLines from '@patternfly/react-tokens/dist/esm/c_notification_drawer__list_item_header_title_max_lines';

Expand Down Expand Up @@ -87,7 +86,7 @@ export const NotificationDrawerListItemHeader: React.FunctionComponent<Notificat
ref={titleRef}
className={css(styles.notificationDrawerListItemHeaderTitle, truncateTitle && styles.modifiers.truncate)}
>
{srTitle && <span className={css(a11yStyles.screenReader)}>{srTitle}</span>}
{srTitle && <span className="pf-v5-screen-reader">{srTitle}</span>}
{title}
</HeadingLevel>
);
Expand Down
2 changes: 1 addition & 1 deletion ...NotificationDrawer/__tests__/__snapshots__/NotificationDrawerListItemHeader.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ exports[`NotificationDrawerListItemHeader list item header with srTitle applied
class="pf-v5-c-notification-drawer__list-item-header-title"
>
<span
class="pf-v5-u-screen-reader"
class="pf-v5-screen-reader"
>
screen reader title
</span>
Expand Down
2 changes: 1 addition & 1 deletion packages/react-core/src/components/Popover/PopoverHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export const PopoverHeader: React.FunctionComponent<PopoverHeaderProps> = ({
{icon && <PopoverHeaderIcon>{icon}</PopoverHeaderIcon>}
<PopoverHeaderText headingLevel={titleHeadingLevel}>
{alertSeverityVariant && alertSeverityScreenReaderText && (
<span className="pf-v5-u-screen-reader">{alertSeverityScreenReaderText}</span>
<span className="pf-v5-screen-reader">{alertSeverityScreenReaderText}</span>
)}
{children}
</PopoverHeaderText>
Expand Down
2 changes: 1 addition & 1 deletion packages/react-core/src/components/Skeleton/Skeleton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ export const Skeleton: React.FunctionComponent<SkeletonProps> = ({
} as React.CSSProperties
})}
>
<span className="pf-v5-u-screen-reader">{screenreaderText}</span>
<span className="pf-v5-screen-reader">{screenreaderText}</span>
</div>
);
};
Expand Down
42 changes: 21 additions & 21 deletions packages/react-core/src/components/Skeleton/__tests__/__snapshots__/Skeleton.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ exports[`skeleton circle skeleton 1`] = `
class="pf-v5-c-skeleton pf-m-circle"
>
<span
class="pf-v5-u-screen-reader"
class="pf-v5-screen-reader"
/>
</div>
</DocumentFragment>
Expand All @@ -18,7 +18,7 @@ exports[`skeleton default 1`] = `
class="pf-v5-c-skeleton"
>
<span
class="pf-v5-u-screen-reader"
class="pf-v5-screen-reader"
/>
</div>
</DocumentFragment>
Expand All @@ -30,7 +30,7 @@ exports[`skeleton skeleton with 2xl font size 1`] = `
class="pf-v5-c-skeleton pf-m-text-2xl"
>
<span
class="pf-v5-u-screen-reader"
class="pf-v5-screen-reader"
/>
</div>
</DocumentFragment>
Expand All @@ -42,7 +42,7 @@ exports[`skeleton skeleton with 3xl font size 1`] = `
class="pf-v5-c-skeleton pf-m-text-3xl"
>
<span
class="pf-v5-u-screen-reader"
class="pf-v5-screen-reader"
/>
</div>
</DocumentFragment>
Expand All @@ -54,7 +54,7 @@ exports[`skeleton skeleton with 4xl font size 1`] = `
class="pf-v5-c-skeleton pf-m-text-4xl"
>
<span
class="pf-v5-u-screen-reader"
class="pf-v5-screen-reader"
/>
</div>
</DocumentFragment>
Expand All @@ -67,7 +67,7 @@ exports[`skeleton skeleton with 25% height 1`] = `
style="--pf-v5-c-skeleton--Height: 25%;"
>
<span
class="pf-v5-u-screen-reader"
class="pf-v5-screen-reader"
/>
</div>
</DocumentFragment>
Expand All @@ -80,7 +80,7 @@ exports[`skeleton skeleton with 25% width 1`] = `
style="--pf-v5-c-skeleton--Width: 25%;"
>
<span
class="pf-v5-u-screen-reader"
class="pf-v5-screen-reader"
/>
</div>
</DocumentFragment>
Expand All @@ -93,7 +93,7 @@ exports[`skeleton skeleton with 33% height 1`] = `
style="--pf-v5-c-skeleton--Height: 33%;"
>
<span
class="pf-v5-u-screen-reader"
class="pf-v5-screen-reader"
/>
</div>
</DocumentFragment>
Expand All @@ -106,7 +106,7 @@ exports[`skeleton skeleton with 33% width 1`] = `
style="--pf-v5-c-skeleton--Width: 33%;"
>
<span
class="pf-v5-u-screen-reader"
class="pf-v5-screen-reader"
/>
</div>
</DocumentFragment>
Expand All @@ -119,7 +119,7 @@ exports[`skeleton skeleton with 50% height 1`] = `
style="--pf-v5-c-skeleton--Height: 50%;"
>
<span
class="pf-v5-u-screen-reader"
class="pf-v5-screen-reader"
/>
</div>
</DocumentFragment>
Expand All @@ -132,7 +132,7 @@ exports[`skeleton skeleton with 50% width 1`] = `
style="--pf-v5-c-skeleton--Width: 50%;"
>
<span
class="pf-v5-u-screen-reader"
class="pf-v5-screen-reader"
/>
</div>
</DocumentFragment>
Expand All @@ -145,7 +145,7 @@ exports[`skeleton skeleton with 66% height 1`] = `
style="--pf-v5-c-skeleton--Height: 66%;"
>
<span
class="pf-v5-u-screen-reader"
class="pf-v5-screen-reader"
/>
</div>
</DocumentFragment>
Expand All @@ -158,7 +158,7 @@ exports[`skeleton skeleton with 66% width 1`] = `
style="--pf-v5-c-skeleton--Width: 66%;"
>
<span
class="pf-v5-u-screen-reader"
class="pf-v5-screen-reader"
/>
</div>
</DocumentFragment>
Expand All @@ -171,7 +171,7 @@ exports[`skeleton skeleton with 75% height 1`] = `
style="--pf-v5-c-skeleton--Height: 75%;"
>
<span
class="pf-v5-u-screen-reader"
class="pf-v5-screen-reader"
/>
</div>
</DocumentFragment>
Expand All @@ -184,7 +184,7 @@ exports[`skeleton skeleton with 75% width 1`] = `
style="--pf-v5-c-skeleton--Width: 75%;"
>
<span
class="pf-v5-u-screen-reader"
class="pf-v5-screen-reader"
/>
</div>
</DocumentFragment>
Expand All @@ -197,7 +197,7 @@ exports[`skeleton skeleton with 100% height 1`] = `
style="--pf-v5-c-skeleton--Height: 100%;"
>
<span
class="pf-v5-u-screen-reader"
class="pf-v5-screen-reader"
/>
</div>
</DocumentFragment>
Expand All @@ -209,7 +209,7 @@ exports[`skeleton skeleton with lg font size 1`] = `
class="pf-v5-c-skeleton pf-m-text-lg"
>
<span
class="pf-v5-u-screen-reader"
class="pf-v5-screen-reader"
/>
</div>
</DocumentFragment>
Expand All @@ -221,7 +221,7 @@ exports[`skeleton skeleton with md font size 1`] = `
class="pf-v5-c-skeleton pf-m-text-md"
>
<span
class="pf-v5-u-screen-reader"
class="pf-v5-screen-reader"
/>
</div>
</DocumentFragment>
Expand All @@ -233,7 +233,7 @@ exports[`skeleton skeleton with sm font size 1`] = `
class="pf-v5-c-skeleton pf-m-text-sm"
>
<span
class="pf-v5-u-screen-reader"
class="pf-v5-screen-reader"
/>
</div>
</DocumentFragment>
Expand All @@ -245,7 +245,7 @@ exports[`skeleton skeleton with xl font size 1`] = `
class="pf-v5-c-skeleton pf-m-text-xl"
>
<span
class="pf-v5-u-screen-reader"
class="pf-v5-screen-reader"
/>
</div>
</DocumentFragment>
Expand All @@ -257,7 +257,7 @@ exports[`skeleton square skeleton 1`] = `
class="pf-v5-c-skeleton pf-m-square"
>
<span
class="pf-v5-u-screen-reader"
class="pf-v5-screen-reader"
/>
</div>
</DocumentFragment>
Expand Down
Loading
Loading