!!! warning "Pending Review" Pending Review from User Experience (UX)

Focus Component

Overview

The PWC Focus component provides visual focus indication and styling wrapper for form elements and interactive components. Built as a utility component, it enhances accessibility by providing consistent focus outlines and semantic color variants for different states and contexts.

Core Capabilities

Focus Visualization - Consistent focus ring styling with brand colors and accessibility-compliant contrast ratios
Semantic Variants - Six color variants (default, critical, invalid, success, tip, warning) for contextual state indication
Flexible Layout - Support for flex properties and alignment options to integrate with various layout patterns
Blur Border Option - Additional border styling for enhanced visual separation when elements lose focus
CSS Modern Features - Uses :has() selector for advanced styling based on child element focus states
Accessibility Standards - WCAG-compliant focus indicators that work with keyboard navigation and screen readers

When to use Focus:

Form elements requiring enhanced focus visibility beyond browser defaults
Interactive components needing contextual color coding for different states
Complex form layouts where consistent focus styling improves user experience
Accessibility-critical interfaces where clear focus indication is essential for navigation

When not to use Focus:

Simple text links or buttons where browser default focus styling is sufficient
Non-interactive elements that don't receive keyboard focus
Components that already include their own focus management and styling

Basic Implementation

React 18React 19+AngularPure JavaScript

import React from 'react';
import { PwcFocus, PwcInput } from "@progress-i360/pwc-react";

function MyComponent() {
  return (
    <>
      <PwcFocus variant="default">
        <input
          type="text"
          placeholder="Enter your name"
          style={{ border: 'none', outline: 'none', padding: '8px' }}
        />
      </PwcFocus>

      <PwcFocus variant="invalid">
        <input
          type="email"
          placeholder="Invalid email format"
          style={{ border: 'none', outline: 'none', padding: '8px' }}
        />
      </PwcFocus>

      <PwcFocus variant="success" flex>
        <PwcInput
          type="text"
          placeholder="Valid input"
          name="validInput"
        />
      </PwcFocus>
    </>
  );
}

import '@progress-i360/progress-web-components/focus';
import '@progress-i360/progress-web-components/input';

function FocusStates() {
  return (
    <>
      <pwc-focus variant="success" flex>
        <pwc-input
          type="text"
          name="validated-input"
          value="Valid input"
        ></pwc-input>
      </pwc-focus>

      <pwc-focus variant="warning" blur-border>
        <select style={{ border: 'none', outline: 'none', padding: '8px' }}>
          <option value="">Choose option</option>
          <option value="high">High priority</option>
          <option value="low">Low priority</option>
        </select>
      </pwc-focus>
    </>
  );
}

import { Component, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
import "@progress-i360/progress-web-components/body";
import "@progress-i360/progress-web-components/button";
import "@progress-i360/progress-web-components/flex";
import "@progress-i360/progress-web-components/focus";
import "@progress-i360/progress-web-components/heading";

@Component({
  selector: 'focus-demo',
  template: `
    <pwc-flex direction="column" gap="m" padding="m">
      <pwc-heading content="Focus State Demonstration" size="l"></pwc-heading>
      <pwc-flex direction="column" gap="s">
        <pwc-body content="Click on the inputs below to see focus styling:"></pwc-body>
        <pwc-focus variant="default">
          <input type="text" placeholder="Default focus style" (focus)="setFocusType('default')" (blur)="clearFocus()">
        </pwc-focus>
        <pwc-focus [variant]="currentFocusVariant">
          <input type="email" placeholder="Validation focus (try invalid email)" 
                 [value]="emailValue" 
                 (input)="updateEmail($event)" 
                 (focus)="setFocusType('validation')" 
                 (blur)="validateEmail()">
        </pwc-focus>
        <pwc-focus variant="success" *ngIf="showSuccess">
          <input type="text" placeholder="Success state" readonly value="Valid input!">
        </pwc-focus>
      </pwc-flex>
      <pwc-flex gap="s">
        <pwc-button label="Trigger Success" variant="success" (pwc-click)="showSuccessState()"></pwc-button>
        <pwc-button label="Trigger Warning" variant="warning" (pwc-click)="showWarningState()"></pwc-button>
        <pwc-button label="Trigger Error" variant="critical" (pwc-click)="showErrorState()"></pwc-button>
      </pwc-flex>
      <pwc-body [content]="'Current focus: ' + (currentFocus || 'None') + ', Validations: ' + validationCount" color="subtle" size="xs"></pwc-body>
    </pwc-flex>
  `,
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class FocusDemo {
  currentFocus = '';
  currentFocusVariant = 'default';
  emailValue = '';
  showSuccess = false;
  validationCount = 0;

  setFocusType(type: string) {
    this.currentFocus = type;
  }

  clearFocus() {
    this.currentFocus = '';
  }

  updateEmail(event: any) {
    this.emailValue = event.target.value;
  }

  validateEmail() {
    const isValid = this.emailValue.includes('@') && this.emailValue.includes('.');
    this.currentFocusVariant = isValid ? 'success' : 'invalid';
    this.validationCount++;
  }

  showSuccessState() {
    this.currentFocusVariant = 'success';
    this.showSuccess = true;
    this.validationCount++;
  }

  showWarningState() {
    this.currentFocusVariant = 'warning';
    this.validationCount++;
  }

  showErrorState() {
    this.currentFocusVariant = 'invalid';
    this.validationCount++;
  }
}

import '@progress-i360/progress-web-components/focus';

const focusWrapper = document.createElement('pwc-focus');
focusWrapper.setAttribute('variant', 'invalid');

const input = document.createElement('input');
input.type = 'email';
input.placeholder = 'Enter email address';

focusWrapper.appendChild(input);
document.body.appendChild(focusWrapper);

Usage Patterns

Form Validation - Use semantic variants (invalid, success, warning) to provide visual feedback for field validation states
Interactive Elements - Wrap buttons, inputs, and custom controls with focus styling for consistent keyboard navigation experience
State Communication - Apply contextual colors (critical, tip) to communicate urgency, importance, or informational context
Layout Integration - Use flex and alignment properties to integrate focused elements seamlessly with form layouts

Best Practices

Content Strategy Guidelines

Semantic Color Usage - Choose focus variants that match the semantic meaning of the content and validation state
Consistent Application - Apply focus styling consistently across similar interactive elements in the same interface
Clear Visual Hierarchy - Use focus variants to support, not compete with, other visual hierarchy elements
Accessibility Priority - Ensure focus indicators meet WCAG contrast requirements and are visible to all users

Performance Optimization

CSS Modern Features - Leverage :has() selector for efficient styling without JavaScript event handlers
Minimal DOM Impact - Use focus wrapper only when enhanced styling is needed beyond browser defaults
State-based Rendering - Conditionally apply focus variants based on actual validation or interaction states
Layout Efficiency - Use flex and alignment properties to reduce layout recalculations

Integration Architecture

Form System Integration - Coordinate focus variants with form validation states and error handling
Design Token Usage - Rely on design system color tokens for consistent focus styling across applications
Accessibility Standards - Ensure focus management works with screen readers and keyboard navigation patterns
Component Composition - Combine with other form components while maintaining focus behavior

Common Use Cases

Form Validation

Input field error states with red focus rings for validation failures
Success confirmation with green focus styling for completed valid fields
Warning states with orange focus for fields requiring attention but not blocking submission

Interactive Controls

Button focus enhancement for primary actions and critical operations
Custom control focus styling for complex widgets like date pickers and dropdown menus
Navigation element focus for keyboard accessibility in menus and tab interfaces

Status Indication

Critical alerts with red focus styling for urgent attention requirements
Informational tips with purple focus for helpful guidance and contextual information
Progress indicators with semantic focus colors to show completion states

Troubleshooting

Common Issues

Actions Not Triggering

Symptoms: Focus styles don't appear when elements receive keyboard focus

Solutions:

Verify child elements can receive focus (tabindex, focusable elements)
Check that :has() selector is supported in target browsers
Ensure focus styles aren't overridden by other CSS rules with higher specificity

Actions Not Visible

Symptoms: Focus component doesn't render or appears with default styling

Solutions:

Confirm renderSlot function returns valid Lit template result
Check CSS imports and focus styles are properly loaded
Verify variant names match expected FocusVariant types

Layout Issues

Symptoms: Focus wrapper disrupts intended layout or element positioning

Solutions:

Use alignSelf property to control focus wrapper alignment within flex containers
Apply flex property when focus wrapper should expand to fill available space
Check parent container styling doesn't conflict with focus wrapper display properties

Icon Problems

Symptoms: Focus colors don't match design system or appear incorrect

Solutions:

Verify design token CSS variables are loaded and available
Check color variant mapping matches intended semantic meaning
Ensure focus ring contrast meets accessibility requirements for background colors

Implementation Support

Accessibility Compliance - Focus indicator implementation strategies meeting WCAG guidelines and screen reader compatibility
Browser Compatibility - Fallback strategies for browsers that don't support modern CSS features like :has() selector
Design System Integration - Guidance for consistent focus styling patterns across complex application interfaces

Resources

Storybook Documentation

For comprehensive API documentation, interactive examples, and testing tools: 📖 View Complete API Documentation in Storybook →

This guide provides high-level implementation guidance. For detailed API specifications and interactive examples, visit our Storybook documentation.