delete button

Vonage · Mar 10, 2024 · e92197f · e92197f
1 parent a5f5cd9
commit e92197f
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 14 deletions.
diff --git a/libs/components/src/lib/dial-pad/README.md b/libs/components/src/lib/dial-pad/README.md
@@ -107,14 +107,4 @@ You can change the error text with the `error-text` attribute.
 | `blur`         | Emitted from the input element                                                                         |
 | `focus`        | Emitted from the input element                                                                         |
 
-</div>
-
-
-
-## Accessibility
-
-- The input element should have aria-label, if no visible label is in the design
-- The dial / end call buttons should have an aria-label, if it is designed to just show an icon only
-- The feedback-text area should have aria-live set to polite, so that it is read out by screen readers when it changes
-- Keyboard only users will navigate the buttons and input using the TAB key
-
+</div>
diff --git a/libs/components/src/lib/dial-pad/dial-pad.spec.ts b/libs/components/src/lib/dial-pad/dial-pad.spec.ts
@@ -24,6 +24,10 @@ describe('vwc-dial-pad', () => {
 		return digits?.querySelectorAll('vwc-button') as NodeListOf<Button>;
 	}
 
+	function getDeleteButton() {
+		return getTextField().querySelector('vwc-button') as Button;
+	}
+
 	beforeEach(async () => {
 		element = (await fixture(
 			`<${COMPONENT_TAG}></${COMPONENT_TAG}>`
@@ -68,6 +72,22 @@ describe('vwc-dial-pad', () => {
 		});
 	});
 
+	describe('delete', function () {
+		it('should show delete button when text field has value', async function () {
+			element.value = '123';
+			await elementUpdated(element);
+			expect(getDeleteButton()).not.toBeNull();
+		});
+
+		it('should remove last character from text field when clicked on delete button', async function () {
+			element.value = '123';
+			await elementUpdated(element);
+			getDeleteButton().click();
+			await elementUpdated(element);
+			expect(getTextField().value).toEqual('12');
+		});
+	});
+
 	describe('keypad-click', function () {
 		it('should fire keypad-click event when clicked on keypad', async function () {
 			const spy = jest.fn();

diff --git a/libs/components/src/lib/dial-pad/dial-pad.template.ts b/libs/components/src/lib/dial-pad/dial-pad.template.ts
@@ -27,7 +27,7 @@ function renderTextField(textFieldTag: string, buttonTag: string) {
             @keydown="${(x, c) => handleKeyDown(x, c.event as KeyboardEvent)}">
          ${when(x => (x.value?.length && x.value?.length > 0), html`<${buttonTag} 
                 slot="action-items" size='condensed' icon="backspace-line" aria-label="${x => x.deleteAriaLabel || x.locale.dialPad.deleteLabel}" 
-                appearance='ghost' ?disabled="${x => x.disabled}" @click="${x => x.clearField()}">
+                appearance='ghost' ?disabled="${x => x.disabled}" @click="${x => x.deleteLastCharacter()}">
             </${buttonTag}>`)}
         </${textFieldTag}>`;
 }

diff --git a/libs/components/src/lib/dial-pad/dial-pad.ts b/libs/components/src/lib/dial-pad/dial-pad.ts
@@ -152,8 +152,8 @@ export class DialPad extends FoundationElement {
 	 *
 	 * @internal
 	 */
-	clearField = () => {
-		this.value = '';
+	deleteLastCharacter = () => {
+		this.value = this.value.slice(0, -1);
 	};
 
 	/**