FeaturePriority Component | Drag-and-Drop Feature Ranking Surveys

FeaturePriority is a web component for feature ranking surveys. Use drag-and-drop (with full keyboard accessibility) to identify which features drive user satisfaction and retention.

@sensefolks/featurepriority

FeaturePriority Features

🎯 Drag-and-drop feature ranking interface
⌨️ Keyboard-accessible reordering (Arrow keys + Enter/Space)
♿ WCAG 2.1 AA accessible with position announcements
🔊 Screen reader optimized ("Moved Feature A to position 3")
🎨 Fully customizable via CSS Parts
📱 Touch-friendly mobile design
🌐 Works with React, Vue, Angular, and vanilla JS

When to Use FeaturePriority

Embed FeaturePriority where users compare and prioritize options:

Feature comparison pages — let users rank what matters most
Onboarding preference steps — personalize the experience
Product configuration flows — understand priority order
Landing pages — validate feature importance before building

Installation

CDN (Recommended)

html

<!-- Modern browsers (ES modules) -->
<script type="module" src="https://unpkg.com/@sensefolks/featurepriority/dist/sf-featurepriority/sf-featurepriority.esm.js"></script>

<!-- Legacy browsers -->
<script nomodule src="https://unpkg.com/@sensefolks/featurepriority/dist/sf-featurepriority/sf-featurepriority.js"></script>

NPM

bash

npm install @sensefolks/featurepriority

Usage

HTML

html

<sf-featurepriority 
  survey-key="your-survey-uuid" 
  completion-message="Thank you for your feedback!">
</sf-featurepriority>

React

jsx

import '@sensefolks/featurepriority';

function App() {
  return (
    <sf-featurepriority 
      survey-key="your-survey-uuid" 
      completion-message="Thank you!">
    </sf-featurepriority>
  );
}

API Reference

Properties

Property	Attribute	Type	Default	Description
`surveyKey`	`survey-key`	string	—	UUID of the survey to load
`completionMessage`	`completion-message`	string	'Thank you for your response!'	Message shown after submission

CSS Parts

Style the component using CSS Parts:

css

sf-featurepriority::part(survey-container) {
  /* Main container */
}
sf-featurepriority::part(heading) {
  /* Step headings */
}
sf-featurepriority::part(ranking-list) {
  /* Ranking list container */
}
sf-featurepriority::part(ranking-item) {
  /* Individual ranking item */
}
sf-featurepriority::part(drag-handle) {
  /* Drag handle */
}
sf-featurepriority::part(button) {
  /* All buttons */
}
sf-featurepriority::part(error-message) {
  /* Error messages */
}

Accessibility

Full keyboard navigation (Arrow Up/Down to navigate, Enter/Space to grab/drop)
ARIA labels and live regions for screen readers
Ranking change announcements ("Moved Item A to position 3")
Focus indicators and high contrast mode support
Respects prefers-reduced-motion

Browser Support

Browser	Version
Chrome	88+
Firefox	85+
Safari	14+
Edge	88+
IE11	✅ (ES5 build)