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

fix(DataList, Table): update hoverable reference to clickable #9083

Merged
merged 2 commits into from
May 11, 2023
Merged

fix(DataList, Table): update hoverable reference to clickable #9083

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5519714
fix(DataList, Table): update hoverable reference to clickable
nicolethoen May 5, 2023
e8be276
update pf-screen-reader to pf-v5-screen-reader
nicolethoen May 10, 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
2 changes: 1 addition & 1 deletion packages/react-core/src/components/Badge/Badge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export const Badge: React.FunctionComponent<BadgeProps> = ({
className={css(styles.badge, (isRead ? styles.modifiers.read : styles.modifiers.unread) as any, className)}
>
{children}
{screenReaderText && <span className="pf-screen-reader">{screenReaderText}</span>}
{screenReaderText && <span className="pf-v5-screen-reader">{screenReaderText}</span>}
</span>
);
Badge.displayName = 'Badge';
4 changes: 2 additions & 2 deletions packages/react-core/src/components/Badge/__tests__/Badge.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,9 +31,9 @@ test('Renders with class name pf-m-read when isRead prop is true', () => {
expect(screen.getByText('Test')).toHaveClass('pf-m-read');
});

test('Does not render pf-screen-reader class by default', () => {
test('Does not render pf-v5-screen-reader class by default', () => {
render(<Badge>Test</Badge>);
expect(screen.getByText('Test')).not.toContainHTML('<span class="pf-screen-reader"></span>');
expect(screen.getByText('Test')).not.toContainHTML('<span class="pf-v5-screen-reader"></span>');
});

test('Renders screenReaderText passed via prop', () => {
Expand Down
2 changes: 1 addition & 1 deletion packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -176,7 +176,7 @@
} else if (!dateProp) {
setFocusedDate(today);
}
}, [dateProp]);

Check warning on line 179 in packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx

View workflow job for this annotation

GitHub Actions / lint 

React Hook useEffect has a missing dependency: 'focusedDate'. Either include it or remove the dependency array

useEffect(() => {
// Calendar month should not be focused on page load
Expand All @@ -186,7 +186,7 @@
} else {
setShouldFocus(true);
}
}, [focusedDate, isDateFocused, focusedDateValidated, focusRef]);

Check warning on line 189 in packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx

View workflow job for this annotation

GitHub Actions / lint 

React Hook useEffect has a missing dependency: 'shouldFocus'. Either include it or remove the dependency array

const onMonthClick = (ev: React.MouseEvent, newDate: Date) => {
setFocusedDate(newDate);
Expand Down Expand Up @@ -336,7 +336,7 @@
<tr>
{calendar[0].map(({ date }, index) => (
<th key={index} className={styles.calendarMonthDay} scope="col">
<span className="pf-screen-reader">{longWeekdayFormat(date)}</span>
<span className="pf-v5-screen-reader">{longWeekdayFormat(date)}</span>
<span aria-hidden>{weekdayFormat(date)}</span>
</th>
))}
Expand Down
2 changes: 1 addition & 1 deletion packages/react-core/src/components/Card/Card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,7 @@ export const Card: React.FunctionComponent<CardProps> = ({
>
{hasSelectableInput && (
<input
className="pf-screen-reader"
className="pf-v5-screen-reader"
id={`${id}-input`}
{...ariaProps}
type="checkbox"
Expand Down
2 changes: 1 addition & 1 deletion packages/react-core/src/components/DataList/DataListItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ export class DataListItem extends React.Component<DataListItemProps> {
>
{onSelectableRowChange && (
<input
className="pf-screen-reader"
className="pf-v5-screen-reader"
type="radio"
checked={isSelected}
onChange={(event) => onSelectableRowChange(event, id)}
Expand Down
4 changes: 2 additions & 2 deletions packages/react-core/src/components/DataList/examples/DataList.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,9 +68,9 @@ import { css } from '@patternfly/react-styles';

```

### Selectable rows
### Clickable rows

```ts file="./DataListSelectableRows.tsx"
```ts file="./DataListClickableRows.tsx"

```

Expand Down
26 changes: 13 additions & 13 deletions ...aList/examples/DataListSelectableRows.tsx → ...taList/examples/DataListClickableRows.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import {
} from '@patternfly/react-core';
import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';

export const DataListSelectableRows: React.FunctionComponent = () => {
export const DataListClickableRows: React.FunctionComponent = () => {
const [isOpen1, setIsOpen1] = React.useState(false);
const [isOpen2, setIsOpen2] = React.useState(false);
const [selectedDataListItemId, setSelectedDataListItemId] = React.useState('');
Expand Down Expand Up @@ -46,24 +46,24 @@ export const DataListSelectableRows: React.FunctionComponent = () => {
return (
<React.Fragment>
<DataList
aria-label="selectable data list example"
aria-label="clickable data list example"
selectedDataListItemId={selectedDataListItemId}
onSelectDataListItem={onSelectDataListItem}
onSelectableRowChange={handleInputChange}
>
<DataListItem aria-labelledby="selectable-action-item1" id="item1">
<DataListItem aria-labelledby="clickable-action-item1" id="item1">
<DataListItemRow>
<DataListItemCells
dataListCells={[
<DataListCell key="primary content">
<span id="selectable-action-item1">Single actionable Primary content</span>
<span id="clickable-action-item1">Single actionable Primary content</span>
</DataListCell>,
<DataListCell key="secondary content">Single actionable Secondary content</DataListCell>
]}
/>
<DataListAction
aria-labelledby="selectable-action-item1 selectable-action-action1"
id="selectable-action-action1"
aria-labelledby="clickable-action-item1 clickable-action-action1"
id="clickable-action-action1"
aria-label="Actions"
isPlainButtonAction
>
Expand All @@ -76,7 +76,7 @@ export const DataListSelectableRows: React.FunctionComponent = () => {
isExpanded={isOpen1}
onClick={onToggle1}
variant="plain"
aria-label="Data list selectable rows example kebab toggle 1"
aria-label="Data list clickable rows example kebab toggle 1"
>
<EllipsisVIcon aria-hidden="true" />
</MenuToggle>
Expand All @@ -102,19 +102,19 @@ export const DataListSelectableRows: React.FunctionComponent = () => {
</DataListAction>
</DataListItemRow>
</DataListItem>
<DataListItem aria-labelledby="selectable-actions-item2" id="item2">
<DataListItem aria-labelledby="clickable-actions-item2" id="item2">
<DataListItemRow>
<DataListItemCells
dataListCells={[
<DataListCell key="primary content">
<span id="selectable-actions-item2">Selectable actions Primary content</span>
<span id="clickable-actions-item2">clickable actions Primary content</span>
</DataListCell>,
<DataListCell key="secondary content">Selectable actions Secondary content</DataListCell>
<DataListCell key="secondary content">clickable actions Secondary content</DataListCell>
]}
/>
<DataListAction
aria-labelledby="selectable-actions-item2 selectable-actions-action2"
id="selectable-actions-action2"
aria-labelledby="clickable-actions-item2 clickable-actions-action2"
id="clickable-actions-action2"
aria-label="Actions"
isPlainButtonAction
>
Expand All @@ -127,7 +127,7 @@ export const DataListSelectableRows: React.FunctionComponent = () => {
isExpanded={isOpen2}
onClick={onToggle2}
variant="plain"
aria-label="Data list selectable rows example kebab toggle 2"
aria-label="Data list clickable rows example kebab toggle 2"
>
<EllipsisVIcon aria-hidden="true" />
</MenuToggle>
Expand Down
4 changes: 2 additions & 2 deletions packages/react-core/src/components/DataList/examples/DataListDraggable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,10 +93,10 @@ export const DataListDraggable: React.FunctionComponent = () => {
))}
</DataList>
</Droppable>
<div className="pf-screen-reader" aria-live="assertive">
<div className="pf-v5-screen-reader" aria-live="assertive">
{liveText}
</div>
<div className="pf-screen-reader" id={`description-${uniqueId}`}>
<div className="pf-v5-screen-reader" id={`description-${uniqueId}`}>
Press space or enter to begin dragging, and use the arrow keys to navigate up or down. Press enter to confirm
the drag, or any other key to cancel the drag operation.
</div>
Expand Down
14 changes: 7 additions & 7 deletions ...ges/react-core/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,7 +190,7 @@ exports[`With popover opened 1`] = `
scope="col"
>
<span
class="pf-screen-reader"
class="pf-v5-screen-reader"
>
Sunday
</span>
Expand All @@ -205,7 +205,7 @@ exports[`With popover opened 1`] = `
scope="col"
>
<span
class="pf-screen-reader"
class="pf-v5-screen-reader"
>
Monday
</span>
Expand All @@ -220,7 +220,7 @@ exports[`With popover opened 1`] = `
scope="col"
>
<span
class="pf-screen-reader"
class="pf-v5-screen-reader"
>
Tuesday
</span>
Expand All @@ -235,7 +235,7 @@ exports[`With popover opened 1`] = `
scope="col"
>
<span
class="pf-screen-reader"
class="pf-v5-screen-reader"
>
Wednesday
</span>
Expand All @@ -250,7 +250,7 @@ exports[`With popover opened 1`] = `
scope="col"
>
<span
class="pf-screen-reader"
class="pf-v5-screen-reader"
>
Thursday
</span>
Expand All @@ -265,7 +265,7 @@ exports[`With popover opened 1`] = `
scope="col"
>
<span
class="pf-screen-reader"
class="pf-v5-screen-reader"
>
Friday
</span>
Expand All @@ -280,7 +280,7 @@ exports[`With popover opened 1`] = `
scope="col"
>
<span
class="pf-screen-reader"
class="pf-v5-screen-reader"
>
Saturday
</span>
Expand Down
2 changes: 1 addition & 1 deletion 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 @@ -148,7 +148,7 @@ export const MultipleFileUploadStatusItem: React.FunctionComponent<MultipleFileU
<li className={css(styles.multipleFileUploadStatusItem, className)} {...props}>
<div className={styles.multipleFileUploadStatusItemIcon}>{fileIcon || <FileIcon />}</div>
<div className={styles.multipleFileUploadStatusItemMain}>
<div className="pf-screen-reader" aria-live="polite">
<div className="pf-v5-screen-reader" aria-live="polite">
{progressAriaLiveMessage &&
typeof progressAriaLiveMessage === 'function' &&
progressAriaLiveMessage(+loadPercentage.toFixed(2))}
Expand Down
16 changes: 8 additions & 8 deletions ...nts/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadStatusItem.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ exports[`MultipleFileUploadStatusItem renders custom aria labels 1`] = `
>
<div
aria-live="polite"
class="pf-screen-reader"
class="pf-v5-screen-reader"
>
Progress value is 0%.
</div>
Expand Down Expand Up @@ -137,7 +137,7 @@ exports[`MultipleFileUploadStatusItem renders custom class names 1`] = `
>
<div
aria-live="polite"
class="pf-screen-reader"
class="pf-v5-screen-reader"
>
Progress value is 0%.
</div>
Expand Down Expand Up @@ -246,7 +246,7 @@ exports[`MultipleFileUploadStatusItem renders custom file name/size/icon/progres
>
<div
aria-live="polite"
class="pf-screen-reader"
class="pf-v5-screen-reader"
>
test message
</div>
Expand Down Expand Up @@ -357,7 +357,7 @@ exports[`MultipleFileUploadStatusItem renders custom function progressAriaLiveMe
>
<div
aria-live="polite"
class="pf-screen-reader"
class="pf-v5-screen-reader"
>
test message 0
</div>
Expand Down Expand Up @@ -468,7 +468,7 @@ exports[`MultipleFileUploadStatusItem renders custom progress value/variant when
>
<div
aria-live="polite"
class="pf-screen-reader"
class="pf-v5-screen-reader"
>
Progress value is 42%.
</div>
Expand Down Expand Up @@ -594,7 +594,7 @@ exports[`MultipleFileUploadStatusItem renders expected values from a passed file
>
<div
aria-live="polite"
class="pf-screen-reader"
class="pf-v5-screen-reader"
>
Progress value is 0%.
</div>
Expand Down Expand Up @@ -705,7 +705,7 @@ exports[`MultipleFileUploadStatusItem renders with expected class names 1`] = `
>
<div
aria-live="polite"
class="pf-screen-reader"
class="pf-v5-screen-reader"
>
Progress value is 0%.
</div>
Expand Down Expand Up @@ -814,7 +814,7 @@ exports[`MultipleFileUploadStatusItem rendersdefault progressAriaLiveMessage whe
>
<div
aria-live="polite"
class="pf-screen-reader"
class="pf-v5-screen-reader"
>
Progress value is 0%.
</div>
Expand Down
4 changes: 2 additions & 2 deletions packages/react-core/src/demos/ProgressDemo.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ ProgressStepperDemo = () => {
<br />
</StackItem>
<StackItem>
<div className="pf-screen-reader" aria-live="polite">
<div className="pf-v5-screen-reader" aria-live="polite">
{`Progress value is ${currentValue}%.`}
</div>
<Progress value={currentValue} title="Title" />
Expand Down Expand Up @@ -71,7 +71,7 @@ ProgressStepperDemo = () => {
<br />
</StackItem>
<StackItem>
<div className="pf-screen-reader" aria-live="polite">
<div className="pf-v5-screen-reader" aria-live="polite">
{`Progress value is ${currentValue}%.`}
</div>
<Progress value={currentValue} title="Title" />
Expand Down
2 changes: 1 addition & 1 deletion packages/react-core/src/demos/ProgressStepperDemo.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ ProgressStepperDemo = () => {
<br />
</StackItem>
<StackItem>
<div className="pf-screen-reader" aria-live="polite">
<div className="pf-v5-screen-reader" aria-live="polite">
{steps[currentStep] && `On ${steps[currentStep].title}.`}
{steps[currentStep - 1] && `${steps[currentStep - 1].title} was successful.`}
</div>
Expand Down
2 changes: 1 addition & 1 deletion ...react-integration/demo-app-ts/src/components/demos/DataListDemo/DataListDraggableDemo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@ export class DataListDraggableDemo extends React.Component {
))}
</DataList>
</Droppable>
<div className="pf-screen-reader" aria-live="assertive">
<div className="pf-v5-screen-reader" aria-live="assertive">
{liveText}
</div>
</DragDrop>
Expand Down
6 changes: 3 additions & 3 deletions packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableRowClickDemo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,17 +22,17 @@ export class TableRowClickDemo extends React.Component<TableProps, ITableRowClic
rows: [
{
cells: ['Repositories one', 'Branches one', 'Pull requests one', 'Workspaces one'],
isHoverable: true,
isClickable: true,
isRowSelected: true
},
{
cells: ['Repositories two', 'Branches two', 'Pull requests two', 'Workspaces two'],
isHoverable: true,
isClickable: true,
isRowSelected: false
},
{
cells: ['Repositories three', 'Branches three', 'Pull requests three', 'Workspaces three'],
isHoverable: true,
isClickable: true,
isRowSelected: false
}
]
Expand Down
4 changes: 2 additions & 2 deletions packages/react-table/src/components/Table/RowWrapper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ export class RowWrapper extends React.Component<RowWrapperProps> {
/* eslint-disable @typescript-eslint/no-unused-vars */
onScroll,
onResize,
row: { isExpanded, isEditable, isHoverable, isRowSelected },
row: { isExpanded, isEditable, isClickable, isRowSelected },
rowProps,
/* eslint-enable @typescript-eslint/no-unused-vars */
trRef,
Expand All @@ -111,7 +111,7 @@ export class RowWrapper extends React.Component<RowWrapperProps> {
isEditable={isEditable}
className={className}
ouiaId={ouiaId}
isHoverable={isHoverable}
isClickable={isClickable}
isRowSelected={isRowSelected}
/>
);
Expand Down
4 changes: 2 additions & 2 deletions packages/react-table/src/components/Table/Table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,15 +121,15 @@ const TableBase: React.FunctionComponent<TableProps> = ({
setTableCaption(
<caption>
{selectableRowCaptionText}
<div className="pf-screen-reader">
<div className="pf-v5-screen-reader">
This table has selectable rows. It can be navigated by row using tab, and each row can be selected using
space or enter.
</div>
</caption>
);
} else {
setTableCaption(
<caption className="pf-screen-reader">
<caption className="pf-v5-screen-reader">
This table has selectable rows. It can be navigated by row using tab, and each row can be selected using space
or enter.
</caption>
Expand Down
Loading
Loading