@patternfly/react-core 5.0.0-alpha.6 → 5.0.0-alpha.7

package/src/components/SearchInput/AdvancedSearchMenu.tsx

@@ -3,7 +3,7 @@ import { Button } from '../Button';
 import { ActionGroup, Form, FormGroup } from '../Form';
 import { TextInput } from '../TextInput';
 import { GenerateId, KeyTypes } from '../../helpers';
-import { SearchAttribute } from './SearchInput';
+import { SearchInputSearchAttribute } from './SearchInput';
 import { Panel, PanelMain, PanelMainBody } from '../Panel';
 import { css } from '@patternfly/react-styles';
 
@@ -13,7 +13,7 @@ export interface AdvancedSearchMenuProps extends Omit<React.HTMLProps<HTMLDivEle
    */
   advancedSearchDelimiter?: string;
   /** Array of attribute values used for dynamically generated advanced search. */
-  attributes?: string[] | SearchAttribute[];
+  attributes?: string[] | SearchInputSearchAttribute[];
   /** Additional classes added to the advanced search menu. */
   className?: string;
   /* Additional elements added after the attributes in the form.
@@ -26,13 +26,13 @@ export interface AdvancedSearchMenuProps extends Omit<React.HTMLProps<HTMLDivEle
   /** Flag for toggling the open/close state of the advanced search menu. */
   isSearchMenuOpen?: boolean;
   /** A callback for when the input value changes. */
-  onChange?: (value: string, event: React.FormEvent<HTMLInputElement>) => void;
+  onChange?: (event: React.FormEvent<HTMLInputElement>, value: string) => void;
   /** A callback for when the user clicks the clear button. */
   onClear?: (event: React.SyntheticEvent<HTMLButtonElement>) => void;
   /** A callback for when the search button is clicked. */
   onSearch?: (
-    value: string,
     event: React.SyntheticEvent<HTMLButtonElement>,
+    value: string,
     attrValueMap: { [key: string]: string }
   ) => void;
   /** A callback for when the open advanced search button is clicked. */
@@ -124,7 +124,7 @@ export const AdvancedSearchMenu: React.FunctionComponent<AdvancedSearchMenuProps
   const onSearchHandler = (event: React.SyntheticEvent<HTMLButtonElement>) => {
     event.preventDefault();
     if (onSearch) {
-      onSearch(value, event, getAttrValueMap());
+      onSearch(event, value, getAttrValueMap());
     }
     if (isSearchMenuOpen) {
       onToggleAdvancedMenu(event as any);
@@ -150,7 +150,7 @@ export const AdvancedSearchMenu: React.FunctionComponent<AdvancedSearchMenuProps
     });
 
     if (onChange) {
-      onChange(updatedValue.replace(/^\s+/g, ''), event);
+      onChange(event, updatedValue.replace(/^\s+/g, ''));
     }
   };
 
@@ -161,7 +161,7 @@ export const AdvancedSearchMenu: React.FunctionComponent<AdvancedSearchMenuProps
 
   const buildFormGroups = () => {
     const formGroups = [] as React.ReactNode[];
-    attributes.forEach((attribute: string | SearchAttribute, index: number) => {
+    attributes.forEach((attribute: string | SearchInputSearchAttribute, index: number) => {
       const display = typeof attribute === 'string' ? attribute : attribute.display;
       const queryAttr = typeof attribute === 'string' ? attribute : attribute.attr;
       if (index === 0) {

package/src/components/SearchInput/SearchInput.tsx

@@ -17,7 +17,7 @@ import { Popper } from '../../helpers';
  * be passed in as an object within an array to the search input component's attribute properrty.
  */
 
-export interface SearchAttribute {
+export interface SearchInputSearchAttribute {
   /** The search attribute's value to be provided in the search input's query string.
    * It should have no spaces and be unique for every attribute.
    */
@@ -32,11 +32,11 @@ export interface SearchAttribute {
  * the search input component's expandableInput property.
  */
 
-export interface ExpandableInput {
+export interface SearchInputExpandable {
   /** Flag to indicate if the search input is expanded. */
   isExpanded: boolean;
   /** Callback function to toggle the expandable search input. */
-  onToggleExpand: (isExpanded: boolean, event: React.SyntheticEvent<HTMLButtonElement>) => void;
+  onToggleExpand: (event: React.SyntheticEvent<HTMLButtonElement>, isExpanded: boolean) => void;
   /** An accessible label for the expandable search input toggle. */
   toggleAriaLabel: string;
 }
@@ -58,11 +58,11 @@ export interface SearchInputProps extends Omit<React.HTMLProps<HTMLDivElement>,
   /** An accessible label for the search input. */
   'aria-label'?: string;
   /** Array of attribute values used for dynamically generated advanced search. */
-  attributes?: string[] | SearchAttribute[];
+  attributes?: string[] | SearchInputSearchAttribute[];
   /** Additional classes added to the search input. */
   className?: string;
   /** Object that makes the search input expandable/collapsible. */
-  expandableInput?: ExpandableInput;
+  expandableInput?: SearchInputExpandable;
   /* Additional elements added after the attributes in the form.
    * The new form elements can be wrapped in a form group component for automatic formatting. */
   formAdditionalItems?: React.ReactNode;
@@ -96,7 +96,7 @@ export interface SearchInputProps extends Omit<React.HTMLProps<HTMLDivElement>,
   /** Accessible label for the button to navigate to next result. */
   nextNavigationButtonAriaLabel?: string;
   /** A callback for when the input value changes. */
-  onChange?: (value: string, event: React.FormEvent<HTMLInputElement>) => void;
+  onChange?: (event: React.FormEvent<HTMLInputElement>, value: string) => void;
   /** A callback for when the user clicks the clear button. */
   onClear?: (event: React.SyntheticEvent<HTMLButtonElement>) => void;
   /** A callback for when the user clicks to navigate to next result. */
@@ -105,8 +105,8 @@ export interface SearchInputProps extends Omit<React.HTMLProps<HTMLDivElement>,
   onPreviousClick?: (event: React.SyntheticEvent<HTMLButtonElement>) => void;
   /** A callback for when the search button is clicked. */
   onSearch?: (
-    value: string,
     event: React.SyntheticEvent<HTMLButtonElement>,
+    value: string,
     attrValueMap: { [key: string]: string }
   ) => void;
   /** A callback for when the open advanced search button is clicked. */
@@ -128,6 +128,8 @@ export interface SearchInputProps extends Omit<React.HTMLProps<HTMLDivElement>,
   submitSearchButtonLabel?: string;
   /** Value of the search input. */
   value?: string;
+  /** Name attribue for the search input */
+  name?: string;
 }
 
 const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
@@ -161,6 +163,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
   appendTo,
   zIndex = 9999,
   type = 'text',
+  name,
   ...props
 }: SearchInputProps) => {
   const [isSearchMenuOpen, setIsSearchMenuOpen] = React.useState(false);
@@ -203,9 +206,9 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
     setIsSearchMenuOpen(isAdvancedSearchOpen);
   }, [isAdvancedSearchOpen]);
 
-  const onChangeHandler = (value: string, event: React.FormEvent<HTMLInputElement>) => {
+  const onChangeHandler = (event: React.FormEvent<HTMLInputElement>, value: string) => {
     if (onChange) {
-      onChange(value, event);
+      onChange(event, value);
     }
     setSearchValue(value);
   };
@@ -221,7 +224,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
   const onSearchHandler = (event: React.SyntheticEvent<HTMLButtonElement>) => {
     event.preventDefault();
     if (onSearch) {
-      onSearch(value, event, getAttrValueMap());
+      onSearch(event, value, getAttrValueMap());
     }
     setIsSearchMenuOpen(false);
   };
@@ -282,7 +285,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
 
   const onExpandHandler = (event: React.SyntheticEvent<HTMLButtonElement>) => {
     setSearchValue('');
-    onToggleExpand(isExpanded, event);
+    onToggleExpand(event, isExpanded);
     setFocusAfterExpandChange(true);
   };
 
@@ -301,6 +304,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
         onKeyDown={onEnter}
         onChange={onChangeHandler}
         type={type}
+        name={name}
       />
       {renderUtilities && (
         <TextInputGroupUtilities>

package/src/components/SearchInput/__tests__/SearchInput.test.tsx

@@ -238,7 +238,7 @@ test('onToggleExpand is called if the expandable toggle is clicked', async () =>
   await user.click(screen.getByRole('button'));
 
   expect(mockOnToggleExpand).toHaveBeenCalledTimes(1);
-  expect(mockOnToggleExpand).toHaveBeenCalledWith(true, expect.objectContaining({ type: 'click' }));
+  expect(mockOnToggleExpand).toHaveBeenCalledWith(expect.objectContaining({ type: 'click' }), true);
 });
 
 test('toggleAriaLabel is applied to the expandable toggle', () => {

package/src/components/SearchInput/examples/SearchInput.md

@@ -2,7 +2,7 @@
 id: 'Search input'
 section: components
 cssPrefix: 'pf-c-search-input'
-propComponents: ['SearchInput', 'SearchAttribute', 'ExpandableInput']
+propComponents: ['SearchInput', 'SearchInputSearchAttribute', 'SearchInputExpandable']
 beta: true
 ---
 

package/src/components/SearchInput/examples/SearchInputAdvanced.tsx

@@ -38,8 +38,8 @@ export const SearchInputAdvanced: React.FunctionComponent = () => {
         ]}
         advancedSearchDelimiter={useEqualsAsDelimiter ? '=' : ':'}
         value={value}
-        onChange={setValue}
-        onSearch={setValue}
+        onChange={(_event, value) => setValue(value)}
+        onSearch={(_event, value) => setValue(value)}
         onClear={() => setValue('')}
         formAdditionalItems={
           useCustomFooter ? (

package/src/components/SearchInput/examples/SearchInputBasic.tsx

@@ -8,5 +8,12 @@ export const SearchInputBasic: React.FunctionComponent = () => {
     setValue(value);
   };
 
-  return <SearchInput placeholder="Find by name" value={value} onChange={onChange} onClear={() => onChange('')} />;
+  return (
+    <SearchInput
+      placeholder="Find by name"
+      value={value}
+      onChange={(_event, value) => onChange(value)}
+      onClear={() => onChange('')}
+    />
+  );
 };

package/src/components/SearchInput/examples/SearchInputFocusSearch.tsx

@@ -7,7 +7,7 @@ export const SearchInputFocusSearch: React.FunctionComponent = () => {
 
   return (
     <>
-      <SearchInput ref={ref} value={value} onChange={setValue} onClear={() => setValue('')} />
+      <SearchInput ref={ref} value={value} onChange={(_event, value) => setValue(value)} onClear={() => setValue('')} />
       <Button onClick={() => ref.current && ref.current.focus()}>Focus on the search input</Button>
     </>
   );

package/src/components/SearchInput/examples/SearchInputWithExpandable.tsx

@@ -9,7 +9,7 @@ export const SearchInputWithExpandable: React.FunctionComponent = () => {
     setValue(value);
   };
 
-  const onToggleExpand = (isExpanded: boolean) => {
+  const onToggleExpand = (_event: React.SyntheticEvent<HTMLButtonElement>, isExpanded: boolean) => {
     setIsExpanded(!isExpanded);
   };
 
@@ -17,7 +17,7 @@ export const SearchInputWithExpandable: React.FunctionComponent = () => {
     <SearchInput
       placeholder="Find by name"
       value={value}
-      onChange={onChange}
+      onChange={(_event, value) => onChange(value)}
       onClear={() => onChange('')}
       expandableInput={{ isExpanded, onToggleExpand, toggleAriaLabel: 'Expandable search input toggle' }}
     />

package/src/components/SearchInput/examples/SearchInputWithNavigableOptions.tsx

@@ -31,7 +31,7 @@ export const SearchInputWithNavigableOptions: React.FunctionComponent = () => {
     <SearchInput
       placeholder="Find by name"
       value={value}
-      onChange={onChange}
+      onChange={(_event, value) => onChange(value)}
       onClear={onClear}
       isNextNavigationButtonDisabled={currentResult === 3}
       isPreviousNavigationButtonDisabled={currentResult === 1}

package/src/components/SearchInput/examples/SearchInputWithResultCount.tsx

@@ -19,7 +19,7 @@ export const SearchInputWithResultCount: React.FunctionComponent = () => {
     <SearchInput
       placeholder="Find by name"
       value={value}
-      onChange={onChange}
+      onChange={(_event, value) => onChange(value)}
       onClear={onClear}
       resultsCount={resultsCount}
     />

package/src/components/SearchInput/examples/SearchInputWithSubmitButton.tsx

@@ -8,8 +8,8 @@ export const SearchInputWithSubmitButton: React.FunctionComponent = () => {
     <SearchInput
       placeholder="Find by name"
       value={value}
-      onChange={setValue}
-      onSearch={setValue}
+      onChange={(_event, value) => setValue(value)}
+      onSearch={(_event, value) => setValue(value)}
       onClear={() => setValue('')}
     />
   );

package/src/components/Select/Select.tsx

@@ -72,7 +72,7 @@ export interface SelectProps
   isCreateOptionOnTop?: boolean;
   /** Flag indicating if placeholder styles should be applied */
   hasPlaceholderStyle?: boolean;
-  /** @beta Flag indicating if the creatable option should set its value as a SelectOptionObject */
+  /** Flag indicating if the creatable option should set its value as a SelectOptionObject */
   isCreateSelectOptionObject?: boolean;
   /** Value to indicate if the select is modified to show that validation state.
    * If set to success, select will be modified to indicate valid state.
@@ -80,7 +80,7 @@ export interface SelectProps
    * If set to warning, select will be modified to indicate warning state.
    */
   validated?: 'success' | 'warning' | 'error' | 'default';
-  /** @beta Loading variant to display either the spinner or the view more text button */
+  /** Loading variant to display either the spinner or the view more text button */
   loadingVariant?: 'spinner' | SelectViewMoreObject;
   /** Text displayed in typeahead select to prompt the user to create an item */
   createText?: string;
@@ -94,6 +94,8 @@ export interface SelectProps
   isCheckboxSelectionBadgeHidden?: boolean;
   /** Id for select toggle element */
   toggleId?: string;
+  /** Ref for the select toggle element */
+  toggleRef?: React.Ref<HTMLButtonElement> | React.Ref<HTMLDivElement>;
   /** Adds accessible text to Select */
   'aria-label'?: string;
   /** Id of label for the Select aria-labelledby */
@@ -164,7 +166,7 @@ export interface SelectProps
   chipGroupComponent?: React.ReactNode;
   /** Flag for retaining keyboard-entered value in typeahead text field when focus leaves input away */
   isInputValuePersisted?: boolean;
-  /** @beta Flag for retaining filter results on blur from keyboard-entered typeahead text */
+  /** Flag for retaining filter results on blur from keyboard-entered typeahead text */
   isInputFilterPersisted?: boolean;
   /** Flag indicating the typeahead input value should reset upon selection */
   shouldResetOnSelect?: boolean;
@@ -979,6 +981,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
       onClear,
       onBlur,
       toggleId,
+      toggleRef,
       isOpen,
       isGrouped,
       isPlain,
@@ -1320,6 +1323,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
           id={selectToggleId}
           parentRef={this.parentRef}
           menuRef={this.menuComponentRef}
+          ref={toggleRef}
           {...(footer && { footerRef: this.footerRef })}
           isOpen={isOpen}
           isPlain={isPlain}

package/src/components/Select/SelectToggle.tsx

@@ -8,7 +8,7 @@ import { PickOptional } from '../../helpers/typeUtils';
 import { findTabbableElements } from '../../helpers/util';
 import { KeyTypes } from '../../helpers/constants';
 
-export interface SelectToggleProps extends React.HTMLProps<HTMLElement> {
+export interface SelectToggleProps extends Omit<React.HTMLProps<HTMLElement>, 'ref'> {
   /** HTML ID of dropdown toggle */
   id: string;
   /** Anything which can be rendered as dropdown toggle */
@@ -59,9 +59,11 @@ export interface SelectToggleProps extends React.HTMLProps<HTMLElement> {
   hasFooter?: boolean;
   /** @hide Internal callback for handling focus when typeahead toggle button clicked. */
   onClickTypeaheadToggleButton?: () => void;
+  /** @hide Internal ref for the select toggle */
+  innerRef?: React.Ref<any>;
 }
 
-export class SelectToggle extends React.Component<SelectToggleProps> {
+class SelectToggleBase extends React.Component<SelectToggleProps> {
   static displayName = 'SelectToggle';
   private toggle: React.RefObject<HTMLDivElement> | React.RefObject<HTMLButtonElement>;
 
@@ -88,7 +90,11 @@ export class SelectToggle extends React.Component<SelectToggleProps> {
     super(props);
     const { variant } = props;
     const isTypeahead = variant === SelectVariant.typeahead || variant === SelectVariant.typeaheadMulti;
-    this.toggle = isTypeahead ? React.createRef<HTMLDivElement>() : React.createRef<HTMLButtonElement>();
+    if (this.props.innerRef) {
+      this.toggle = this.props.innerRef as React.RefObject<HTMLButtonElement> | React.RefObject<HTMLDivElement>;
+    } else {
+      this.toggle = isTypeahead ? React.createRef<HTMLDivElement>() : React.createRef<HTMLButtonElement>();
+    }
   }
 
   componentDidMount() {
@@ -265,6 +271,7 @@ export class SelectToggle extends React.Component<SelectToggleProps> {
       hasFooter,
       footerRef,
       toggleIndicator,
+      innerRef,
       ...props
     } = this.props;
     /* eslint-enable @typescript-eslint/no-unused-vars */
@@ -363,3 +370,7 @@ export class SelectToggle extends React.Component<SelectToggleProps> {
     );
   }
 }
+
+export const SelectToggle = React.forwardRef((props: SelectToggleProps, ref: React.Ref<any>) => (
+  <SelectToggleBase innerRef={ref} {...props} />
+));

package/src/components/Select/examples/Select.md

@@ -31,6 +31,8 @@ class SingleSelectInput extends React.Component {
       <SelectOption key={7} value="Other" />
     ];
 
+    this.toggleRef = React.createRef();
+
     this.state = {
       isToggleIcon: false,
       isOpen: false,
@@ -53,6 +55,7 @@ class SingleSelectInput extends React.Component {
           isOpen: false
         });
         console.log('selected:', selection);
+        this.toggleRef.current.focus();
       }
     };
 
@@ -97,6 +100,7 @@ class SingleSelectInput extends React.Component {
           Title
         </span>
         <Select
+          toggleRef={this.toggleRef}
           toggleIcon={isToggleIcon && <CubeIcon />}
           variant={SelectVariant.single}
           aria-label="Select Input"
@@ -158,6 +162,8 @@ class SingleSelectDescription extends React.Component {
       { value: 'Other', disabled: false }
     ];
 
+    this.toggleRef = React.createRef();
+
     this.state = {
       isOpen: false,
       selected: null,
@@ -178,6 +184,7 @@ class SingleSelectDescription extends React.Component {
           isOpen: false
         });
         console.log('selected:', selection);
+        this.toggleRef.current.focus();
       }
     };
 
@@ -202,6 +209,7 @@ class SingleSelectDescription extends React.Component {
           placeholderText="Select an option"
           aria-label="Select Input with descriptions"
           onToggle={this.onToggle}
+          toggleRef={this.toggleRef}
           onSelect={this.onSelect}
           selections={selected}
           isOpen={isOpen}
@@ -238,6 +246,8 @@ class GroupedSingleSelectInput extends React.Component {
       selected: null
     };
 
+    this.toggleRef = React.createRef();
+
     this.onToggle = isOpen => {
       this.setState({
         isOpen
@@ -249,6 +259,7 @@ class GroupedSingleSelectInput extends React.Component {
         selected: selection,
         isOpen: false
       });
+      this.toggleRef.current.focus();
     };
 
     this.clearSelection = () => {
@@ -284,6 +295,7 @@ class GroupedSingleSelectInput extends React.Component {
         </span>
         <Select
           variant={SelectVariant.single}
+          toggleRef={this.toggleRef}
           onToggle={this.onToggle}
           onSelect={this.onSelect}
           selections={selected}
@@ -319,6 +331,8 @@ class ValidatedSelect extends React.Component {
       <SelectOption key={6} value="Other" />
     ];
 
+    this.toggleRef = React.createRef();
+
     this.state = {
       isOpen: false,
       selected: null,
@@ -352,6 +366,7 @@ class ValidatedSelect extends React.Component {
       this.setState({
         validated: validatedState
       });
+      this.toggleRef.current.focus();
     };
 
     this.clearSelection = () => {
@@ -372,6 +387,7 @@ class ValidatedSelect extends React.Component {
         </span>
         <Select
           variant={SelectVariant.single}
+          toggleRef={this.toggleRef}
           placeholderText="Select an option"
           aria-label="Select Input with validation"
           onToggle={this.onToggle}
@@ -728,6 +744,8 @@ class FilteringSingleSelectInput extends React.Component {
       isInputFilterPersisted: false
     };
 
+    this.toggleRef = React.createRef();
+
     this.options = [
       <SelectGroup label="Status" key="group1">
         <SelectOption key={0} value="Running" />
@@ -749,6 +767,7 @@ class FilteringSingleSelectInput extends React.Component {
 
     this.onSelect = (event, selection) => {
       this.setState({ selected: selection, isOpen: false }), console.log('selected: ', selection);
+      this.toggleRef.current.focus();
     };
 
     this.onFilter = (_, textInput) => {
@@ -805,6 +824,7 @@ class FilteringSingleSelectInput extends React.Component {
         </span>
         <Select
           variant={SelectVariant.single}
+          toggleRef={this.toggleRef}
           onToggle={this.onToggle}
           onSelect={this.onSelect}
           selections={selected}
@@ -2460,6 +2480,8 @@ class SelectWithFooter extends React.Component {
       <SelectOption key={7} value="Other" />
     ];
 
+    this.toggleRef = React.createRef();
+
     this.state = {
       isToggleIcon: false,
       isOpen: false,
@@ -2482,6 +2504,7 @@ class SelectWithFooter extends React.Component {
           isOpen: false
         });
         console.log('selected:', selection);
+        this.toggleRef.current.focus();
       }
     };
 
@@ -2503,6 +2526,7 @@ class SelectWithFooter extends React.Component {
         </span>
         <Select
           toggleIcon={isToggleIcon && <CubeIcon />}
+          toggleRef={this.toggleRef}
           variant={SelectVariant.single}
           aria-label="Select Input"
           onToggle={this.onToggle}
@@ -2630,6 +2654,8 @@ class SelectViewMore extends React.Component {
       <SelectOption key={6} value="Other" />
     ];
 
+    this.toggleRef = React.createRef();
+
     this.state = {
       isOpen: false,
       selected: null,
@@ -2651,6 +2677,7 @@ class SelectViewMore extends React.Component {
           isOpen: false
         });
         console.log('selected:', selection);
+        this.toggleRef.current.focus();
       }
     };
 
@@ -2686,6 +2713,7 @@ class SelectViewMore extends React.Component {
         </span>
         <Select
           variant={SelectVariant.single}
+          toggleRef={this.toggleRef}
           aria-label="Select Input"
           onToggle={this.onToggle}
           onSelect={this.onSelect}

package/src/components/SimpleList/SimpleList.tsx

@@ -16,6 +16,8 @@ export interface SimpleListProps extends Omit<React.HTMLProps<HTMLDivElement>, '
   ) => void;
   /** Indicates whether component is controlled by its internal state */
   isControlled?: boolean;
+  /** aria-label for the <ul> element that wraps the SimpleList items. */
+  'aria-label'?: string;
 }
 
 export interface SimpleListState {
@@ -57,7 +59,7 @@ export class SimpleList extends React.Component<SimpleListProps, SimpleListState
 
   render() {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { children, className, onSelect, isControlled, ...props } = this.props;
+    const { children, className, onSelect, isControlled, 'aria-label': ariaLabel, ...props } = this.props;
 
     let isGrouped = false;
     if (children) {
@@ -74,7 +76,7 @@ export class SimpleList extends React.Component<SimpleListProps, SimpleListState
       >
         <div className={css(styles.simpleList, className)} {...props}>
           {isGrouped && children}
-          {!isGrouped && <ul>{children}</ul>}
+          {!isGrouped && <ul aria-label={ariaLabel}>{children}</ul>}
         </div>
       </SimpleListContext.Provider>
     );

package/src/components/SimpleList/__tests__/SimpleList.test.tsx

@@ -31,6 +31,11 @@ describe('SimpleList', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
+  test('renders aria-labelled content', () => {
+    const { asFragment } = render(<SimpleList aria-label="This is a simple list">{items}</SimpleList>);
+    expect(asFragment()).toMatchSnapshot();
+  });
+
   test('renders grouped content', () => {
     const { asFragment } = render(
       <SimpleList>

package/src/components/SimpleList/__tests__/__snapshots__/SimpleList.test.tsx.snap

@@ -1,5 +1,48 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`SimpleList renders aria-labelled content 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-simple-list"
+  >
+    <ul
+      aria-label="This is a simple list"
+    >
+      <li
+        class=""
+      >
+        <button
+          class="pf-c-simple-list__item-link"
+          type="button"
+        >
+          Item 1
+        </button>
+      </li>
+      <li
+        class=""
+      >
+        <button
+          class="pf-c-simple-list__item-link"
+          type="button"
+        >
+          Item 2
+        </button>
+      </li>
+      <li
+        class=""
+      >
+        <button
+          class="pf-c-simple-list__item-link"
+          type="button"
+        >
+          Item 3
+        </button>
+      </li>
+    </ul>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`SimpleList renders content 1`] = `
 <DocumentFragment>
   <div

package/src/components/Slider/Slider.tsx

@@ -326,7 +326,10 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
       return (
         <InputGroup>
           {textInput}
-          <InputGroupText variant="plain"> {inputLabel}</InputGroupText>
+          <InputGroupText {...(isDisabled && { className: css(styles.modifiers.disabled) })}>
+            {' '}
+            {inputLabel}
+          </InputGroupText>
         </InputGroup>
       );
     } else {

package/src/components/Slider/_tests_/__snapshots__/Slider.test.tsx.snap

@@ -424,7 +424,7 @@ exports[`slider renders slider with input 1`] = `
           value="50"
         />
         <span
-          class="pf-c-input-group__text pf-m-plain"
+          class="pf-c-input-group__text"
         >
            %
         </span>
@@ -492,7 +492,7 @@ exports[`slider renders slider with input above thumb 1`] = `
             value="50"
           />
           <span
-            class="pf-c-input-group__text pf-m-plain"
+            class="pf-c-input-group__text"
           >
              %
           </span>