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 (opendatahub-io#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 (opendatahub-io#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 (opendatahub-io#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
jenny-s51 · Mar 6, 2023 · 196cc01 · 196cc01
1 parent 730c03b
commit 196cc01
Show file tree

Hide file tree

Showing 19 changed files with 209 additions and 91 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
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/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
@@ -80,7 +80,7 @@ const NameDescriptionField: React.FC<NameDescriptionFieldProps> = ({
               isDisabled={disableK8sName}
               id={`resource-${nameFieldId}`}
               name={`resource-${nameFieldId}`}
-              aria-labelledby={`resource-${nameFieldId}`}
+              aria-label={`resource-${nameFieldId}`}
               value={data.k8sName ?? k8sName}
               onChange={(k8sName) => {
                 setData({ ...data, k8sName });

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 key' : 'Hide key'}
+        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
@@ -12,7 +12,7 @@ import {
 import { ProjectSectionID } from './types';
 
 type DetailsSectionProps = {
-  id: ProjectSectionID;
+  id: string;
   actions?: React.ReactNode[];
   title: string;
   isLoading: boolean;
@@ -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,