feat(a11y): add labels and roles [EE-6717] (#11181)

app/react/portainer/HomeView/EnvironmentList/EnvironmentList.tsx

@@ -212,6 +212,7 @@ export function EnvironmentList({ onClickBrowse, onRefresh }: Props) {
           <div
             className="blocklist mt-5 !space-y-2 !p-0"
             data-cy="home-endpointList"
+            role="list"
           >
             {renderItems(
               isLoading,

app/react/portainer/gitops/RefField/RefField.tsx

@@ -31,9 +31,10 @@ export function RefField({
   stackId,
 }: Props) {
   const [inputValue, updateInputValue] = useStateWrapper(value, onChange);
-
+  const inputId = 'repository-reference-field';
   return isBE ? (
     <Wrapper
+      inputId={inputId}
       errors={error}
       tip={
         <>
@@ -44,6 +45,7 @@ export function RefField({
       }
     >
       <RefSelector
+        inputId={inputId}
         value={value}
         onChange={onChange}
         model={model}
@@ -53,6 +55,7 @@ export function RefField({
     </Wrapper>
   ) : (
     <Wrapper
+      inputId={inputId}
       errors={error}
       tip={
         <>
@@ -65,6 +68,7 @@ export function RefField({
       }
     >
       <Input
+        id={inputId}
         value={inputValue}
         onChange={(e) => updateInputValue(e.target.value)}
         placeholder="refs/heads/main"
@@ -77,7 +81,8 @@ function Wrapper({
   tip,
   children,
   errors,
-}: PropsWithChildren<{ tip: ReactNode; errors?: string }>) {
+  inputId,
+}: PropsWithChildren<{ tip: ReactNode; errors?: string; inputId: string }>) {
   return (
     <div className="form-group">
       <span className="col-sm-12 mb-2">
@@ -86,7 +91,7 @@ function Wrapper({
       <div className="col-sm-12">
         <FormControl
           label="Repository reference"
-          inputId="stack_repository_reference_name"
+          inputId={inputId}
           required
           errors={errors}
         >

app/react/portainer/gitops/RefField/RefSelector.tsx

@@ -13,12 +13,14 @@ export function RefSelector({
   onChange,
   isUrlValid,
   stackId,
+  inputId,
 }: {
   model: RefFieldModel;
   value: string;
   stackId?: StackId;
   onChange: (value: string) => void;
   isUrlValid?: boolean;
+  inputId: string;
 }) {
   const creds = getAuthentication(model);
   const payload = {
@@ -64,6 +66,7 @@ export function RefSelector({
 
   return (
     <PortainerSelect
+      inputId={inputId}
       value={value}
       options={refs || [{ value: 'refs/heads/main', label: 'refs/heads/main' }]}
       onChange={(e) => e && onChange(e)}

app/react/portainer/templates/app-templates/AppTemplatesList.tsx

@@ -86,7 +86,7 @@ export function AppTemplatesList({
         }
       />
 
-      <div className="blocklist gap-y-2 !px-[20px] !pb-[20px]">
+      <div className="blocklist gap-y-2 !px-[20px] !pb-[20px]" role="list">
         {pagedTemplates.map((template) => (
           <AppTemplatesListItem
             key={template.Id}

app/react/portainer/templates/app-templates/Filters.tsx

@@ -55,6 +55,7 @@ export function Filters({
             value={listState.category}
             bindToBody
             isClearable
+            aria-label="Category filter"
           />
         </div>
       )}
@@ -71,6 +72,7 @@ export function Filters({
             value={listState.types}
             bindToBody
             isClearable
+            aria-label="Type filter"
           />
         </div>
       )}
@@ -83,6 +85,7 @@ export function Filters({
           options={orderByFields}
           placeholder="Sort By"
           value={listState.sortBy}
+          aria-label="Sort"
         />
       </div>
     </div>

app/react/portainer/templates/custom-templates/ListView/CustomTemplatesList.tsx

@@ -63,7 +63,7 @@ export function CustomTemplatesList({
         )}
       />
 
-      <div className="blocklist gap-y-2 !px-[20px] !pb-[20px]">
+      <div className="blocklist gap-y-2 !px-[20px] !pb-[20px]" role="list">
         {pagedTemplates.map((template) => (
           <CustomTemplatesListItem
             key={template.Id}