fix: accessibility of search input (#3403)

* fix: logo title not announced entirely * fix: add label and icon to search input * fix: remove placeholder, adjust label positioning * test: adjust test cases * move changes to different PR * fix: move css
kyma-project · Oct 24, 2024 · 2e167aa · 2e167aa
1 parent 82b6578
commit 2e167aa
Show file tree

Hide file tree

Showing 20 changed files with 68 additions and 39 deletions.
diff --git a/src/shared/components/GenericList/SearchInput.js b/src/shared/components/GenericList/SearchInput.js
@@ -1,6 +1,6 @@
 import { useContext, useRef } from 'react';
 import PropTypes from 'prop-types';
-import { Input, SuggestionItem } from '@ui5/webcomponents-react';
+import { Icon, Input, Label, SuggestionItem } from '@ui5/webcomponents-react';
 import '@ui5/webcomponents/dist/features/InputSuggestions.js';
 import { useTranslation } from 'react-i18next';
 import { useEventListener } from 'hooks/useEventListener';
@@ -10,6 +10,7 @@ import { useYamlEditor } from 'shared/contexts/YamlEditorContext/YamlEditorConte
 import { ResourceDetailContext } from '../ResourceDetails/ResourceDetails';
 import { useRecoilValue } from 'recoil';
 import { columnLayoutState } from 'state/columnLayoutAtom';
+import './SearchInput.scss';
 
 SearchInput.propTypes = {
   searchQuery: PropTypes.string,
@@ -103,19 +104,23 @@ export function SearchInput({
   };
 
   return (
-    <Input
-      id="search-input"
-      accessibleName={`search-${entriesKind}`}
-      role="search"
-      type="Text"
-      ref={searchInputRef}
-      placeholder={t('common.tooltips.search')}
-      className="search-with-magnifying-glass"
-      value={searchQuery}
-      onInput={e => handleQueryChange(e.target.value)}
-      showSuggestions={showSuggestion}
-    >
-      {showSuggestion && renderSearchList(filteredEntries)}
-    </Input>
+    <div className="search-input-container">
+      <Label for="search-input" showColon>
+        {t('common.tooltips.search')}
+      </Label>
+      <Input
+        id="search-input"
+        accessibleName={`search-${entriesKind}`}
+        role="search"
+        type="Text"
+        icon={<Icon className="bsl-has-color-status-4" name="search" />}
+        ref={searchInputRef}
+        value={searchQuery}
+        onInput={e => handleQueryChange(e.target.value)}
+        showSuggestions={showSuggestion}
+      >
+        {showSuggestion && renderSearchList(filteredEntries)}
+      </Input>
+    </div>
   );
 }
diff --git a/src/shared/components/GenericList/SearchInput.scss b/src/shared/components/GenericList/SearchInput.scss
@@ -0,0 +1,18 @@
+.search-input-container {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+
+  #search-input {
+    margin: 0;
+  }
+}
+
+@container (max-width: 450px) {
+  .search-input-container {
+    flex-direction: column;
+    align-items: start;
+    justify-content: end;
+    gap: 0.25rem;
+  }
+}
diff --git a/src/shared/components/UI5Panel/UI5Panel.scss b/src/shared/components/UI5Panel/UI5Panel.scss
@@ -9,6 +9,11 @@
   }
 }
 
+.toolbar > :first-child {
+  display: flex;
+  align-items: end;
+}
+
 .header-actions {
   display: flex;
   align-items: center;

diff --git a/src/shared/components/UI5Panel/UI5Panel.tsx b/src/shared/components/UI5Panel/UI5Panel.tsx
@@ -68,6 +68,7 @@ export const UI5Panel = ({
       stickyHeader={stickyHeader}
       header={
         <Toolbar
+          className="toolbar"
           style={{
             height: '100%',
             paddingTop: '0.5rem',

diff --git a/tests/integration/support/commands.js b/tests/integration/support/commands.js
@@ -169,7 +169,7 @@ Cypress.Commands.add(
       selectSearchResult = false,
     } = options;
 
-    cy.get('ui5-input[placeholder="Search"]:visible')
+    cy.get('ui5-input[id="search-input"]:visible')
       .find('input')
       .wait(1000)
       .type(resourceName);
@@ -198,7 +198,7 @@ Cypress.Commands.add(
       }
 
       if (clearSearch) {
-        cy.get('ui5-input[placeholder="Search"]:visible')
+        cy.get('ui5-input[id="search-input"]:visible')
           .find('input')
           .wait(1000)
           .clear();

diff --git a/tests/integration/support/inspect-list.js b/tests/integration/support/inspect-list.js
@@ -1,7 +1,7 @@
 Cypress.Commands.add('inspectList', (resourceName, hiddenButtons = false) => {
   cy.closeMidColumn(false, hiddenButtons);
 
-  cy.get('ui5-input[placeholder="Search"]:visible')
+  cy.get('ui5-input[id="search-input"]:visible')
     .find('input')
     .wait(1000)
     .type(`${resourceName}{enter}`);

diff --git a/tests/integration/tests/accessibility/test-acc-cron-jobs.spec.js b/tests/integration/tests/accessibility/test-acc-cron-jobs.spec.js
@@ -22,7 +22,7 @@ context('Accessibility test Cron Jobs', () => {
       .contains('Namespaces')
       .click();
 
-    cy.get('ui5-input[placeholder="Search"]:visible')
+    cy.get('ui5-input[id="search-input"]:visible')
       .find('input')
       .wait(1000)
       .type(NAMESPACE_NAME);

diff --git a/tests/integration/tests/accessibility/test-acc-custom-resoureces.spec.js b/tests/integration/tests/accessibility/test-acc-custom-resoureces.spec.js
@@ -66,7 +66,7 @@ context('Accessibility test Custom Resources', () => {
       .contains('Custom Resources')
       .click();
 
-    cy.get('ui5-input[placeholder="Search"]:visible')
+    cy.get('ui5-input[id="search-input"]:visible')
       .find('input')
       .wait(1000)
       .type('cypress');

diff --git a/tests/integration/tests/accessibility/test-acc-extensions.spec.js b/tests/integration/tests/accessibility/test-acc-extensions.spec.js
@@ -67,7 +67,7 @@ context('Accessibility test Extensions view', () => {
       .contains('Extensions')
       .click();
 
-    cy.get('ui5-input[placeholder="Search"]:visible')
+    cy.get('ui5-input[id="search-input"]:visible')
       .find('input')
       .wait(1000)
       .type('pizzas');

diff --git a/tests/integration/tests/accessibility/test-acc-pizzas.spec.js b/tests/integration/tests/accessibility/test-acc-pizzas.spec.js
@@ -61,7 +61,7 @@ context('Accessibility test Pizza Orders', () => {
       .contains('Namespaces')
       .click();
 
-    cy.get('ui5-input[placeholder="Search"]:visible')
+    cy.get('ui5-input[id="search-input"]:visible')
       .find('input')
       .wait(1000)
       .type('pizzas');

diff --git a/tests/integration/tests/cluster/test-custom-resources.spec.js b/tests/integration/tests/cluster/test-custom-resources.spec.js
@@ -40,7 +40,7 @@ context('Test Custom Resources', () => {
 
     openSearchWithSlashShortcut();
 
-    cy.get('ui5-input[placeholder="Search"]:visible')
+    cy.get('ui5-input[id="search-input"]:visible')
       .find('input')
       .click()
       .type('cypress', {
@@ -73,7 +73,7 @@ context('Test Custom Resources', () => {
       .contains('Custom Resources')
       .click();
 
-    cy.get('ui5-input[placeholder="Search"]:visible')
+    cy.get('ui5-input[id="search-input"]:visible')
       .find('input')
       .wait(1000)
       .type('cypress');
@@ -96,15 +96,15 @@ context('Test Custom Resources', () => {
       .contains('Custom Resources')
       .click();
 
-    cy.get('ui5-input[placeholder="Search"]:visible')
+    cy.get('ui5-input[id="search-input"]:visible')
       .find('input')
       .wait(1000)
       .type('cypress');
     cy.clickGenericListLink('Tclusters');
 
     cy.testMidColumnLayout('Tclusters', false);
 
-    cy.get('ui5-input[placeholder="Search"]:visible')
+    cy.get('ui5-input[id="search-input"]:visible')
       .find('input')
       .wait(1000)
       .type('cypress');

diff --git a/tests/integration/tests/cluster/test-navigation-features.spec.js b/tests/integration/tests/cluster/test-navigation-features.spec.js
@@ -31,7 +31,7 @@ context('Test navigation features', () => {
     // visual resources
     cy.navigateTo('Configuration', 'Cluster Role Bindings');
 
-    cy.get('ui5-input[placeholder="Search"]:visible')
+    cy.get('ui5-input[id="search-input"]:visible')
       .find('input')
       .wait(1000)
       .type('cronjob-controller');

diff --git a/tests/integration/tests/extensibility/ext-test-extensibility.spec.js b/tests/integration/tests/extensibility/ext-test-extensibility.spec.js
@@ -90,7 +90,7 @@ context('Test Extensibility Create/Update', () => {
   });
 
   it('Check if Extensions is created', () => {
-    cy.get('ui5-input[placeholder="Search"]:visible')
+    cy.get('ui5-input[id="search-input"]:visible')
       .find('input')
       .wait(1000)
       .clear()
@@ -118,7 +118,7 @@ context('Test Extensibility Create/Update', () => {
   it('Edit extension', () => {
     cy.navigateTo('Configuration', 'Extensions');
 
-    cy.get('ui5-input[placeholder="Search"]:visible')
+    cy.get('ui5-input[id="search-input"]:visible')
       .find('input')
       .wait(1000)
       .clear()

diff --git a/tests/integration/tests/extensibility/ext-test-pizzas.spec.js b/tests/integration/tests/extensibility/ext-test-pizzas.spec.js
@@ -70,7 +70,7 @@ context('Test Pizzas', () => {
       .contains('Namespaces')
       .click();
 
-    cy.get('ui5-input[placeholder="Search"]:visible')
+    cy.get('ui5-input[id="search-input"]:visible')
       .find('input')
       .wait(1000)
       .type('pizzas');

diff --git a/tests/integration/tests/extensibility/ext-test-services.spec.js b/tests/integration/tests/extensibility/ext-test-services.spec.js
@@ -58,7 +58,7 @@ context('Test Services', () => {
       .contains('Namespaces')
       .click();
 
-    cy.get('ui5-input[placeholder="Search"]:visible')
+    cy.get('ui5-input[id="search-input"]:visible')
       .find('input')
       .wait(1000)
       .type('services');

diff --git a/tests/integration/tests/extensibility/ext-test-variables.spec.js b/tests/integration/tests/extensibility/ext-test-variables.spec.js
@@ -64,7 +64,7 @@ context('Test extensibility variables', () => {
       .contains('Namespaces')
       .click();
 
-    cy.get('ui5-input[placeholder="Search"]:visible')
+    cy.get('ui5-input[id="search-input"]:visible')
       .find('input')
       .wait(1000)
       .type(NAMESPACE);

diff --git a/tests/integration/tests/kyma-cluster/test-kyma-modules.spec.js b/tests/integration/tests/kyma-cluster/test-kyma-modules.spec.js
@@ -115,7 +115,7 @@ context('Test Kyma Modules views', () => {
   it('Test Modules list and details', () => {
     cy.wait(1000);
 
-    cy.get('ui5-input[placeholder="Search"]:visible')
+    cy.get('ui5-input[id="search-input"]:visible')
       .find('input')
       .wait(1000)
       .type('api-gateway');
@@ -134,7 +134,7 @@ context('Test Kyma Modules views', () => {
 
     cy.closeMidColumn();
 
-    cy.get('ui5-input[placeholder="Search"]:visible')
+    cy.get('ui5-input[id="search-input"]:visible')
       .find('input')
       .clearInput();
 
@@ -242,7 +242,7 @@ context('Test Kyma Modules views', () => {
   it('Test deleting Modules from List and Details', { retries: 3 }, () => {
     cy.deleteFromGenericList('Module', 'eventing');
 
-    cy.get('ui5-input[placeholder="Search"]:visible')
+    cy.get('ui5-input[id="search-input"]:visible')
       .find('input')
       .wait(1000)
       .type('api-gateway');
@@ -255,7 +255,7 @@ context('Test Kyma Modules views', () => {
 
     cy.wait(20000);
 
-    cy.get('ui5-input[placeholder="Search"]:visible')
+    cy.get('ui5-input[id="search-input"]:visible')
       .find('input')
       .clear();
 

diff --git a/tests/integration/tests/kyma-namespace/test-oauth2.spec.js b/tests/integration/tests/kyma-namespace/test-oauth2.spec.js
@@ -138,7 +138,7 @@ context('Test OAuth2 Clients', () => {
     cy.contains('Ory Hydra Deprecation').should('be.visible');
 
     cy.contains('ui5-panel', 'OAuth2Clients').within(_$genericList => {
-      cy.get('ui5-input[placeholder="Search"]:visible')
+      cy.get('ui5-input[id="search-input"]:visible')
         .find('input')
         .wait(1000)
         .type(AUTH2_NAME);

diff --git a/tests/integration/tests/namespace/test-custom-resources.spec.js b/tests/integration/tests/namespace/test-custom-resources.spec.js
@@ -46,7 +46,7 @@ context('Test Custom Resources', () => {
 
     cy.contains('ui5-title', 'Custom Resources').should('be.visible');
 
-    cy.get('ui5-input[placeholder="Search"]:visible')
+    cy.get('ui5-input[id="search-input"]:visible')
       .find('input')
       .wait(1000)
       .type('cypress', {

diff --git a/tests/integration/tests/namespace/test-reduced-permissions--configuration.spec.js b/tests/integration/tests/namespace/test-reduced-permissions--configuration.spec.js
@@ -109,7 +109,7 @@ context('Test reduced permissions 2', () => {
       .contains('Namespaces')
       .click();
 
-    cy.get('ui5-input[placeholder="Search"]:visible')
+    cy.get('ui5-input[id="search-input"]:visible')
       .find('input')
       .wait(1000)
       .type('kube-public');