wip Workbenches, need image

more workbenches a11y updates fix dsp modal fix more select issues prettier remove unused import revert id update fix project modal revert stack wip Workbenches, need image more workbenches a11y updates fix dsp modal fix more select issues prettier Add faker for the pass through api to enable regular user testing (#806) * Add faker for the pass through api to enable regular user testing * Add faker for backend openshift user * add impersonate function for developers * address comments and modify the doc * Update to get the access token by making API call * update doc * add error message * Fix lint issues * address comments --------- Co-authored-by: Juntao Wang <juntwang@redhat.com> Storybook test integration (#974) * added storybook boilerplate added a mock and decorator added tests fixed deps for storybook linter old tests dont work on jest 28, reverting linter error fix fix build errors fixed deps * trimmed mocks fixed tests * fix webpack changes * added a11y test to test-runner fix a11y errors in settings (#979) varname rename bodyText to ariaLabel add aria label to select add aria-label to Select fix a11y violation in cluster storage modal and list view package-lock.json package-lock.json fix a11y in data connections and models/model servers update DetailsSection to match changes on other branch update Table file fix pagination axe error PR feedback from Andrew change aria label text on password input
opendatahub-io · Mar 9, 2023 · c9a0c70 · c9a0c70
1 parent 730c03b
commit c9a0c70
Show file tree

Hide file tree

Showing 21 changed files with 71 additions and 26 deletions.
diff --git a/frontend/src/components/Table.tsx b/frontend/src/components/Table.tsx
@@ -14,7 +14,7 @@ import useTableColumnSort, { SortableData } from '~/utilities/useTableColumnSort
 type TableProps<DataType> = {
   data: DataType[];
   columns: SortableData<DataType>[];
-  rowRenderer: (data: DataType) => React.ReactNode;
+  rowRenderer: (data: DataType, rowIndex: number) => React.ReactNode;
   enablePagination?: boolean;
   minPageSize?: number;
   toolbarContent?: React.ReactElement<typeof ToolbarItem>;
@@ -50,9 +50,8 @@ const Table = <T,>({
   const sort = useTableColumnSort<T>(columns, 0);
 
   const showPagination = enablePagination && allData.length > minPageSize;
-  const pagination = (pageDirection: 'up' | 'down') => (
+  const pagination = (variant: 'top' | 'bottom') => (
     <Pagination
-      dropDirection={pageDirection}
       perPageComponent="button"
       itemCount={allData.length}
       perPage={pageSize}
@@ -62,6 +61,7 @@ const Table = <T,>({
         setPageSize(newSize);
         setPage(newPage);
       }}
+      variant={variant}
       widgetId="table-pagination"
     />
   );
@@ -74,7 +74,7 @@ const Table = <T,>({
             {toolbarContent}
             {showPagination && (
               <ToolbarItem variant="pagination" alignment={{ default: 'alignRight' }}>
-                {pagination('down')}
+                {pagination('top')}
               </ToolbarItem>
             )}
           </ToolbarContent>
@@ -96,9 +96,11 @@ const Table = <T,>({
           </Tr>
         </Thead>
         {disableRowRenderSupport ? (
-          sort.transformData(data).map((row) => rowRenderer(row))
+          sort.transformData(data).map((row, rowIndex) => rowRenderer(row, rowIndex))
         ) : (
-          <Tbody>{sort.transformData(data).map((row) => rowRenderer(row))}</Tbody>
+          <Tbody>
+            {sort.transformData(data).map((row, rowIndex) => rowRenderer(row, rowIndex))}
+          </Tbody>
         )}
       </TableComposable>
       {emptyTableView && data.length === 0 && (
@@ -110,7 +112,7 @@ const Table = <T,>({
         <Toolbar>
           <ToolbarContent>
             <ToolbarItem variant="pagination" alignment={{ default: 'alignRight' }}>
-              {pagination('up')}
+              {pagination('bottom')}
             </ToolbarItem>
           </ToolbarContent>
         </Toolbar>

diff --git a/.../src/pages/modelServing/screens/projects/ServingRuntimeModal/ServingRuntimeTokenInput.tsx b/.../src/pages/modelServing/screens/projects/ServingRuntimeModal/ServingRuntimeTokenInput.tsx
@@ -45,6 +45,7 @@ const ServingRuntimeTokenInput: React.FC<ServingRuntimeTokenInputProps> = ({
   return (
     <FormGroup
       label="Service account name"
+      fieldId="service-account-form-name"
       helperText="Enter the service account name for which the token will be generated"
       helperTextInvalid={token.error}
       helperTextInvalidIcon={<ExclamationCircleIcon />}
@@ -56,9 +57,9 @@ const ServingRuntimeTokenInput: React.FC<ServingRuntimeTokenInputProps> = ({
             value={token.name}
             isRequired
             type="text"
-            id="simple-form-name-01"
-            name="simple-form-name-01"
-            aria-describedby="simple-form-name-01-helper"
+            id="service-account-form-name"
+            name="service-account-form-name"
+            aria-describedby="service-account-form-name-helper"
             validated={token.error ? ValidatedOptions.error : ValidatedOptions.default}
             onChange={(value) => {
               const tokens = data.tokens?.map((item) =>
@@ -78,6 +79,7 @@ const ServingRuntimeTokenInput: React.FC<ServingRuntimeTokenInputProps> = ({
         <SplitItem>
           <Button
             variant="plain"
+            aria-label="Remove service account"
             icon={<MinusCircleIcon />}
             onClick={() => {
               setData(

diff --git a/frontend/src/pages/notebookController/screens/server/EnvironmentVariablesRow.tsx b/frontend/src/pages/notebookController/screens/server/EnvironmentVariablesRow.tsx
@@ -86,7 +86,12 @@ const EnvironmentVariablesRow: React.FC<EnvironmentVariablesRowProps> = ({
         >
           {selectOptions}
         </Select>
-        <Button data-id="remove-env-var-button" variant="plain" onClick={removeVariables}>
+        <Button
+          aria-label="Remove environment variable"
+          data-id="remove-env-var-button"
+          variant="plain"
+          onClick={removeVariables}
+        >
           <MinusCircleIcon />
         </Button>
       </Flex>

diff --git a/frontend/src/pages/notebookController/screens/server/SizeSelectField.tsx b/frontend/src/pages/notebookController/screens/server/SizeSelectField.tsx
@@ -49,6 +49,7 @@ const SizeSelectField: React.FC<SizeSelectFieldProps> = ({ value, setValue, size
         isOpen={sizeDropdownOpen}
         onToggle={() => setSizeDropdownOpen(!sizeDropdownOpen)}
         aria-labelledby="container-size"
+        aria-label="Select a container size"
         selections={value.name}
         onSelect={(event, selection) => {
           // We know we are setting values as a string

diff --git a/frontend/src/pages/projects/components/DeleteModal.tsx b/frontend/src/pages/projects/components/DeleteModal.tsx
@@ -65,6 +65,7 @@ const DeleteModal: React.FC<DeleteModalProps> = ({
         <StackItem>
           <TextInput
             id="delete-modal-input"
+            aria-label="Delete modal input"
             value={value}
             onChange={(newValue) => setValue(newValue)}
           />

diff --git a/frontend/src/pages/projects/components/ExistingPVCField.tsx b/frontend/src/pages/projects/components/ExistingPVCField.tsx
@@ -49,6 +49,7 @@ const ExistingPVCField: React.FC<ExistingPVCFieldProps> = ({
       <Select
         removeFindDomNode
         variant="typeahead"
+        aria-label="Persistent storage select"
         selections={selectedStorage}
         isOpen={isOpen}
         onClear={() => {

diff --git a/frontend/src/pages/projects/components/NameDescriptionField.tsx b/frontend/src/pages/projects/components/NameDescriptionField.tsx
@@ -42,7 +42,6 @@ const NameDescriptionField: React.FC<NameDescriptionFieldProps> = ({
             ref={autoSelectNameRef}
             id={nameFieldId}
             name={nameFieldId}
-            aria-labelledby={nameFieldId}
             value={data.name}
             onChange={(name) => setData({ ...data, name })}
           />
@@ -69,7 +68,7 @@ const NameDescriptionField: React.FC<NameDescriptionFieldProps> = ({
               </Tooltip>
             }
             isRequired
-            fieldId={nameFieldId}
+            fieldId={`resource-${nameFieldId}`}
             helperText={
               !disableK8sName &&
               "Must consist of lower case alphanumeric characters or '-', and must start and end with an alphanumeric character"
@@ -80,7 +79,6 @@ const NameDescriptionField: React.FC<NameDescriptionFieldProps> = ({
               isDisabled={disableK8sName}
               id={`resource-${nameFieldId}`}
               name={`resource-${nameFieldId}`}
-              aria-labelledby={`resource-${nameFieldId}`}
               value={data.k8sName ?? k8sName}
               onChange={(k8sName) => {
                 setData({ ...data, k8sName });
@@ -96,7 +94,6 @@ const NameDescriptionField: React.FC<NameDescriptionFieldProps> = ({
             resizeOrientation="vertical"
             id={descriptionFieldId}
             name={descriptionFieldId}
-            aria-labelledby={descriptionFieldId}
             value={data.description}
             onChange={(description) => setData({ ...data, description })}
           />

diff --git a/frontend/src/pages/projects/components/PasswordInput.tsx b/frontend/src/pages/projects/components/PasswordInput.tsx
@@ -8,7 +8,11 @@ const PasswordInput: React.FC<React.ComponentProps<typeof TextInput>> = (props)
   return (
     <InputGroup>
       <TextInput {...props} type={isPassword ? 'password' : 'text'} />
-      <Button variant="control" onClick={() => setPassword(!isPassword)}>
+      <Button
+        aria-label={isPassword ? 'Show password' : 'Hide password'}
+        variant="control"
+        onClick={() => setPassword(!isPassword)}
+      >
         {isPassword ? <EyeSlashIcon /> : <EyeIcon />}
       </Button>
     </InputGroup>

diff --git a/frontend/src/pages/projects/notebook/ConnectedNotebookField.tsx b/frontend/src/pages/projects/notebook/ConnectedNotebookField.tsx
@@ -54,6 +54,7 @@ const ConnectedNotebookField: React.FC<SelectNotebookFieldProps> = ({
         selections={selections}
         isOpen={notebookSelectOpen}
         isDisabled={disabled}
+        aria-label="Notebook select"
         onClear={() => {
           onSelect([]);
           setNotebookSelectOpen(false);

diff --git a/frontend/src/pages/projects/screens/detail/DetailsSection.tsx b/frontend/src/pages/projects/screens/detail/DetailsSection.tsx
@@ -61,7 +61,7 @@ const DetailsSection: React.FC<DetailsSectionProps> = ({
       <StackItem>
         <Flex>
           <FlexItem>
-            <Title id={id} headingLevel="h4" size="xl">
+            <Title id={`${id}-title`} headingLevel="h4" size="xl">
               {title}
             </Title>
           </FlexItem>

diff --git a/frontend/src/pages/projects/screens/detail/notebooks/NotebookTable.tsx b/frontend/src/pages/projects/screens/detail/notebooks/NotebookTable.tsx
@@ -24,9 +24,10 @@ const NotebookTable: React.FC<NotebookTableProps> = ({ notebookStates, refresh }
         data={notebookStates}
         columns={columns}
         disableRowRenderSupport
-        rowRenderer={(notebookState) => (
+        rowRenderer={(notebookState, i) => (
           <NotebookTableRow
             key={notebookState.notebook.metadata.uid}
+            rowIndex={i}
             obj={notebookState}
             onNotebookDelete={setNotebookToDelete}
             onNotebookAddStorage={setAddNotebookStorage}

diff --git a/frontend/src/pages/projects/screens/detail/notebooks/NotebookTableRow.tsx b/frontend/src/pages/projects/screens/detail/notebooks/NotebookTableRow.tsx
@@ -27,12 +27,14 @@ import NotebookStorageBars from './NotebookStorageBars';
 
 type NotebookTableRowProps = {
   obj: NotebookState;
+  rowIndex: number;
   onNotebookDelete: (notebook: NotebookKind) => void;
   onNotebookAddStorage: (notebook: NotebookKind) => void;
 };
 
 const NotebookTableRow: React.FC<NotebookTableRowProps> = ({
   obj,
+  rowIndex,
   onNotebookDelete,
   onNotebookAddStorage,
 }) => {
@@ -45,7 +47,14 @@ const NotebookTableRow: React.FC<NotebookTableRowProps> = ({
   return (
     <Tbody isExpanded={isExpanded}>
       <Tr>
-        <Td expand={{ rowIndex: 0, isExpanded, onToggle: () => setExpanded(!isExpanded) }} />
+        <Td
+          expand={{
+            rowIndex: rowIndex,
+            expandId: 'notebook-row-item',
+            isExpanded,
+            onToggle: () => setExpanded(!isExpanded),
+          }}
+        />
         <Td dataLabel="Name">
           <Title headingLevel="h4">
             <ResourceNameTooltip resource={obj.notebook}>

diff --git a/frontend/src/pages/projects/screens/detail/storage/StorageTable.tsx b/frontend/src/pages/projects/screens/detail/storage/StorageTable.tsx
@@ -24,9 +24,10 @@ const StorageTable: React.FC<StorageTableProps> = ({ pvcs, refresh, onAddPVC })
         columns={columns}
         disableRowRenderSupport
         variant="compact"
-        rowRenderer={(pvc) => (
+        rowRenderer={(pvc, i) => (
           <StorageTableRow
             key={pvc.metadata.uid}
+            rowIndex={i}
             obj={pvc}
             onEditPVC={setEditPVC}
             onDeletePVC={setDeleteStorage}

diff --git a/frontend/src/pages/projects/screens/detail/storage/StorageTableRow.tsx b/frontend/src/pages/projects/screens/detail/storage/StorageTableRow.tsx
@@ -20,13 +20,15 @@ import StorageWarningStatus from './StorageWarningStatus';
 
 type StorageTableRowProps = {
   obj: PersistentVolumeClaimKind;
+  rowIndex: number;
   onDeletePVC: (pvc: PersistentVolumeClaimKind) => void;
   onEditPVC: (pvc: PersistentVolumeClaimKind) => void;
   onAddPVC: () => void;
 };
 
 const StorageTableRow: React.FC<StorageTableRowProps> = ({
   obj,
+  rowIndex,
   onDeletePVC,
   onEditPVC,
   onAddPVC,
@@ -55,7 +57,14 @@ const StorageTableRow: React.FC<StorageTableRowProps> = ({
   return (
     <Tbody isExpanded={isExpanded}>
       <Tr>
-        <Td expand={{ rowIndex: 0, isExpanded, onToggle: () => setExpanded(!isExpanded) }} />
+        <Td
+          expand={{
+            rowIndex: rowIndex,
+            expandId: 'storage-row-item',
+            isExpanded,
+            onToggle: () => setExpanded(!isExpanded),
+          }}
+        />
         <Td dataLabel="Name">
           <Flex
             spaceItems={{ default: 'spaceItemsSm' }}

diff --git a/frontend/src/pages/projects/screens/projects/EmptyProjects.tsx b/frontend/src/pages/projects/screens/projects/EmptyProjects.tsx
@@ -27,6 +27,7 @@ const EmptyProjects: React.FC = () => {
       <EmptyStateSecondaryActions>
         <Button
           href="/notebookController"
+          component="a"
           variant="link"
           onClick={(e) => {
             e.preventDefault();

diff --git a/frontend/src/pages/projects/screens/projects/ProjectListView.tsx b/frontend/src/pages/projects/screens/projects/ProjectListView.tsx
@@ -92,9 +92,10 @@ const ProjectListView: React.FC<ProjectListViewProps> = ({
               <NewProjectButton />
             </ToolbarItem>
             <ToolbarItem>
-              <Button variant="link">
-                <Link to="/notebookController">Launch Jupyter</Link>
-              </Button>
+              <Button
+                variant="link"
+                component={() => <Link to="/notebookController">Launch Jupyter</Link>}
+              />
             </ToolbarItem>
           </React.Fragment>
         }

diff --git a/frontend/src/pages/projects/screens/spawner/deploymentSize/ContainerSizeSelector.tsx b/frontend/src/pages/projects/screens/spawner/deploymentSize/ContainerSizeSelector.tsx
@@ -41,7 +41,7 @@ const ContainerSizeSelector: React.FC<ContainerSizeSelectorProps> = ({
         data-id="container-size-select"
         isOpen={sizeDropdownOpen}
         onToggle={() => setSizeDropdownOpen(!sizeDropdownOpen)}
-        aria-labelledby="container-size"
+        aria-label="Container size select"
         selections={value.name}
         onSelect={(event, selection) => {
           // We know we are setting values as a string

diff --git a/frontend/src/pages/projects/screens/spawner/environmentVariables/EnvTypeSelectField.tsx b/frontend/src/pages/projects/screens/spawner/environmentVariables/EnvTypeSelectField.tsx
@@ -36,6 +36,7 @@ const EnvTypeSelectField: React.FC<EnvTypeSelectFieldProps> = ({
               onToggle={() => setOpen(!open)}
               selections={envVariable.type || ''}
               placeholderText="Select one"
+              aria-label="Select one"
               onSelect={(e, value) => {
                 if (typeof value === 'string') {
                   onUpdate({
@@ -65,7 +66,12 @@ const EnvTypeSelectField: React.FC<EnvTypeSelectFieldProps> = ({
         </Stack>
       </SplitItem>
       <SplitItem>
-        <Button variant="plain" icon={<MinusCircleIcon />} onClick={() => onRemove()} />
+        <Button
+          variant="plain"
+          aria-label="Remove environment variable"
+          icon={<MinusCircleIcon />}
+          onClick={() => onRemove()}
+        />
       </SplitItem>
     </Split>
   );

diff --git a/...tend/src/pages/projects/screens/spawner/environmentVariables/GenericKeyValuePairField.tsx b/...tend/src/pages/projects/screens/spawner/environmentVariables/GenericKeyValuePairField.tsx
@@ -71,6 +71,7 @@ const GenericKeyValuePairField: React.FC<GenericKeyValuePairFieldProps> = ({
                 <SplitItem style={{ paddingTop: 'var(--pf-global--spacer--xl)' }}>
                   <Button
                     isDisabled={values.length === 1}
+                    aria-label="Remove key-value pair"
                     variant="plain"
                     icon={<MinusCircleIcon />}
                     onClick={() => onUpdate(removeArrayItem(values, i))}

diff --git a/frontend/src/pages/projects/screens/spawner/imageSelector/ImageStreamSelector.tsx b/frontend/src/pages/projects/screens/spawner/imageSelector/ImageStreamSelector.tsx
@@ -54,6 +54,7 @@ const ImageStreamSelector: React.FC<ImageStreamSelectorProps> = ({
             setImageSelectionOpen(false);
           }
         }}
+        aria-label="Select an image"
         isOpen={imageSelectionOpen}
         selections={selectOptionObjects.find(
           (optionObject) =>

diff --git a/frontend/src/pages/projects/screens/spawner/imageSelector/ImageVersionSelector.tsx b/frontend/src/pages/projects/screens/spawner/imageSelector/ImageVersionSelector.tsx
@@ -72,6 +72,7 @@ const ImageVersionSelector: React.FC<ImageVersionSelectorProps> = ({
             setVersionSelectionOpen(false);
           }
         }}
+        aria-label="Image version select"
         isOpen={versionSelectionOpen}
         selections={selectOptionObjects.find(
           (optionObject) => optionObject.imageVersion.name === selectedImageVersion?.name,