a11y: fix keyboard access, listbox pattern, ARIA labels, target sizes

2026-02-18 23:32:21 +02:00
parent 242e16f75d
commit d0f88625b5
4 changed files with 61 additions and 30 deletions
@@ -157,7 +157,7 @@ export const FileUpload: React.FC<FileUploadProps> = ({ onFileLoaded }) => {
            transition={{ duration: 0.5 }}
            whileHover={{ scale: 1.1, rotate: 5 }}
          >
-            <Upload size={32} />
+            <Upload size={32} aria-hidden="true" />
          </motion.div>
          <motion.p 
            className="mb-2 text-lg font-medium"
@@ -216,7 +216,7 @@ export const FileUpload: React.FC<FileUploadProps> = ({ onFileLoaded }) => {
            animate={{ rotate: [0, 10, -10, 0] }}
            transition={{ duration: 0.5 }}
          >
-            <AlertCircle size={20} />
+            <AlertCircle size={20} aria-hidden="true" />
          </motion.div>
          <span>{error}</span>
        </motion.div>
@@ -33,20 +33,20 @@ const ZoomControl: React.FC<{ zoom: number; onZoomChange: (zoom: number) => void
        onClick={decreaseZoom}
        whileHover={{ scale: 1.1 }}
        whileTap={{ scale: 0.9 }}
-        className="p-1 text-zinc-400 hover:text-white transition-colors"
+        className="p-2 min-w-[44px] min-h-[44px] flex items-center justify-center text-zinc-400 hover:text-white transition-colors"
        aria-label="Zoom out"
      >
-        <ZoomOut size={16} />
+        <ZoomOut size={16} aria-hidden="true" />
      </motion.button>
      <span className="text-xs font-medium text-zinc-300 min-w-[3rem] text-center">{zoom}%</span>
      <motion.button
        onClick={increaseZoom}
        whileHover={{ scale: 1.1 }}
        whileTap={{ scale: 0.9 }}
-        className="p-1 text-zinc-400 hover:text-white transition-colors"
+        className="p-2 min-w-[44px] min-h-[44px] flex items-center justify-center text-zinc-400 hover:text-white transition-colors"
        aria-label="Zoom in"
      >
-        <ZoomIn size={16} />
+        <ZoomIn size={16} aria-hidden="true" />
      </motion.button>
    </div>
  );
@@ -96,18 +96,20 @@ const FontList: React.FC<{ fonts: string[] }> = ({ fonts }) => {
                disabled={downloadingFont === font}
                whileHover={{ scale: 1.05 }}
                whileTap={{ scale: 0.95 }}
+                aria-label={`Download ${font} font`}
                className="px-2 py-1 bg-zinc-900 border border-zinc-800 hover:border-zinc-600 rounded-l text-zinc-300 hover:text-white transition-all flex items-center gap-1.5 text-xs font-medium"
              >
-                {downloadingFont === font ? <Loader2 size={10} className="animate-spin" /> : <Download size={10} />}
+                {downloadingFont === font ? <Loader2 size={10} className="animate-spin" aria-hidden="true" /> : <Download size={10} aria-hidden="true" />}
                {font}
              </motion.button>
              <motion.button
                onClick={() => openGoogleFonts(font)}
                whileHover={{ scale: 1.05 }}
                whileTap={{ scale: 0.95 }}
+                aria-label="View on Google Fonts"
                className="px-1.5 py-1 bg-zinc-900 border border-l-0 border-zinc-800 hover:border-zinc-600 rounded-r text-zinc-400 hover:text-white transition-all"
              >
-                <ExternalLink size={10} />
+                <ExternalLink size={10} aria-hidden="true" />
              </motion.button>
            </div>
            {downloadStatus[font] && (
@@ -381,7 +383,7 @@ export const Preview: React.FC<PreviewProps> = ({
      <motion.div className="sticky top-0 z-50 bg-zinc-950/90 backdrop-blur-md border-b border-zinc-800 p-4" initial={{ y: -20, opacity: 0 }} animate={{ y: 0, opacity: 1 }} transition={{ duration: 0.4, ease: [0.22, 1, 0.36, 1] }}>
        <div className="max-w-7xl mx-auto flex flex-col sm:flex-row justify-between items-center gap-4">
          <motion.button ref={backButtonRef} onClick={onBack} onFocus={() => setFocusedElement('back')} whileHover={{ x: -3 }} whileTap={{ scale: 0.95 }} className="flex items-center gap-2 text-zinc-400 hover:text-white transition-colors outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-zinc-950 rounded-lg px-2 py-1">
-            <ArrowLeft size={20} />
+            <ArrowLeft size={20} aria-hidden="true" />
            <span>Back to Editor</span>
          </motion.button>

@@ -404,12 +406,12 @@ export const Preview: React.FC<PreviewProps> = ({
                <AnimatePresence mode="wait">
                  {successMsg ? (
                    <motion.div key="success" initial={{ scale: 0 }} animate={{ scale: 1 }} exit={{ scale: 0 }} className="flex items-center gap-2">
-                      <CheckCircle2 size={18} />
+                      <CheckCircle2 size={18} aria-hidden="true" />
                      <span>Saved!</span>
                    </motion.div>
                  ) : (
                    <motion.div key="default" initial={{ scale: 0 }} animate={{ scale: 1 }} exit={{ scale: 0 }} className="flex items-center gap-2">
-                      {isExporting ? <Loader2 size={18} className="animate-spin" /> : <FileText size={18} />}
+                      {isExporting ? <Loader2 size={18} className="animate-spin" aria-hidden="true" /> : <FileText size={18} aria-hidden="true" />}
                      <span>{isExporting ? 'Generating...' : 'Save Word Doc'}</span>
                    </motion.div>
                  )}
@@ -279,7 +279,7 @@ export const StyleSelector: React.FC<StyleSelectorProps> = ({
      {/* Top Controls */}
      <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 px-1">
        <div className="flex items-center gap-3">
-          <div className="p-2 bg-indigo-500/10 rounded-lg text-indigo-400">
+          <div className="p-2 bg-indigo-500/10 rounded-lg text-indigo-400" aria-hidden="true">
            <Type size={24} />
          </div>
          <div>
@@ -290,14 +290,15 @@ export const StyleSelector: React.FC<StyleSelectorProps> = ({

        <div className="flex items-center gap-4 bg-zinc-900/50 p-1.5 rounded-xl border border-zinc-800/50">
          <div className="flex items-center gap-2 text-zinc-400 px-3">
-            <Printer size={16} />
+            <Printer size={16} aria-hidden="true" />
            <span className="text-xs font-semibold uppercase tracking-wider">Format</span>
          </div>
-          <div className="flex gap-1">
+          <div className="flex gap-1" role="group" aria-label="Paper size">
            {(['Letter', 'A4'] as PaperSize[]).map((size) => (
              <button
                key={size}
                onClick={() => onSelectPaperSize(size)}
+                aria-pressed={selectedPaperSize === size}
                className={`px-3 py-1.5 rounded-lg text-xs font-bold transition-all ${selectedPaperSize === size
                  ? 'bg-zinc-700 text-white shadow-sm'
                  : 'text-zinc-400 hover:text-zinc-300 hover:bg-zinc-800'
@@ -319,20 +320,22 @@ export const StyleSelector: React.FC<StyleSelectorProps> = ({
          {/* Category Filter Tabs */}
          <div className="flex flex-col border-b border-zinc-800/50 bg-zinc-900/20">
            <div className="p-4 overflow-x-auto no-scrollbar pb-2">
-              <div className="flex gap-2">
+              <div className="flex gap-2" role="group" aria-label="Filter by category">
                <button
                  onClick={() => setActiveCategory('fav')}
+                  aria-pressed={activeCategory === 'fav'}
                  className={`px-3 py-1.5 rounded-full text-xs font-semibold whitespace-nowrap transition-all flex items-center gap-1.5 ${activeCategory === 'fav'
                    ? 'bg-rose-500 text-white shadow-lg shadow-rose-500/20'
                    : 'bg-zinc-800 text-zinc-400 hover:bg-zinc-700 hover:text-zinc-200'
                    }`}
                >
-                  <Heart size={12} className={activeCategory === 'fav' ? 'fill-current' : ''} />
+                  <Heart size={12} className={activeCategory === 'fav' ? 'fill-current' : ''} aria-hidden="true" />
                  fav
                </button>
                <div className="w-px h-6 bg-zinc-800 mx-1 self-center" />
                <button
                  onClick={() => setActiveCategory('All')}
+                  aria-pressed={activeCategory === 'All'}
                  className={`px-3 py-1.5 rounded-full text-xs font-semibold whitespace-nowrap transition-all ${activeCategory === 'All'
                    ? 'bg-white text-black'
                    : 'bg-zinc-800 text-zinc-400 hover:bg-zinc-700 hover:text-zinc-200'
@@ -344,6 +347,7 @@ export const StyleSelector: React.FC<StyleSelectorProps> = ({
                  <button
                    key={cat}
                    onClick={() => setActiveCategory(cat)}
+                    aria-pressed={activeCategory === cat}
                    className={`px-3 py-1.5 rounded-full text-xs font-semibold whitespace-nowrap transition-all ${activeCategory === cat
                      ? 'bg-indigo-500 text-white shadow-lg shadow-indigo-500/20'
                      : 'bg-zinc-800 text-zinc-400 hover:bg-zinc-700 hover:text-zinc-200'
@@ -358,12 +362,13 @@ export const StyleSelector: React.FC<StyleSelectorProps> = ({
            {/* Search Input */}
            <div className="px-4 pb-4">
              <div className="relative group">
-                <Search size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-400 group-focus-within:text-indigo-400 transition-colors" />
+                <Search size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-400 group-focus-within:text-indigo-400 transition-colors" aria-hidden="true" />
                <input
                  type="text"
                  placeholder="Search templates..."
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
+                  aria-label="Search templates"
                  className="w-full bg-zinc-900 border border-zinc-700 rounded-xl py-2 pl-9 pr-4 text-sm text-zinc-200 placeholder:text-zinc-500 focus:outline-none focus:border-indigo-500/50 focus:ring-1 focus:ring-indigo-500/50 transition-all"
                />
              </div>
@@ -371,7 +376,12 @@ export const StyleSelector: React.FC<StyleSelectorProps> = ({
          </div>

          {/* Scrollable List */}
-          <div className="flex-1 overflow-y-auto p-4 space-y-3 custom-scrollbar">
+          <div
+            className="flex-1 overflow-y-auto p-4 space-y-3 custom-scrollbar"
+            role="listbox"
+            aria-label="Typography styles"
+            aria-activedescendant={selectedStyle ? `style-${selectedStyle}` : undefined}
+          >
            {filteredStyles.length === 0 ? (
              <div className="text-center py-8 text-zinc-400">
                <p className="text-sm">No templates found</p>
@@ -379,8 +389,18 @@ export const StyleSelector: React.FC<StyleSelectorProps> = ({
            ) : filteredStyles.map((style) => (
              <div
                key={style.id}
+                id={`style-${style.id}`}
+                role="option"
+                aria-selected={selectedStyle === style.id}
+                tabIndex={selectedStyle === style.id ? 0 : -1}
                onClick={() => onSelectStyle(style.id)}
-                className={`p-4 rounded-xl border transition-all cursor-pointer group relative
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    onSelectStyle(style.id);
+                  }
+                }}
+                className={`p-4 rounded-xl border transition-all cursor-pointer group relative outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-950
                  ${selectedStyle === style.id
                    ? 'border-indigo-500 bg-indigo-500/10 shadow-[0_0_15px_rgba(99,102,241,0.15)]'
                    : 'border-zinc-800 bg-zinc-900/40 hover:border-zinc-700 hover:bg-zinc-800'}`}
@@ -392,15 +412,17 @@ export const StyleSelector: React.FC<StyleSelectorProps> = ({
                  <div className="flex items-center gap-2 shrink-0">
                    <button
                      onClick={(e) => toggleFavorite(e, style.id)}
-                      className={`p-1.5 rounded-full transition-all ${favorites.includes(style.id)
+                      aria-label={favorites.includes(style.id) ? `Remove ${style.name} from favorites` : `Add ${style.name} to favorites`}
+                      aria-pressed={favorites.includes(style.id)}
+                      className={`min-w-[44px] min-h-[44px] flex items-center justify-center rounded-full transition-all ${favorites.includes(style.id)
                          ? 'text-rose-400 bg-rose-500/10 hover:bg-rose-500/20'
                          : 'text-zinc-400 hover:text-zinc-300 hover:bg-zinc-700/50'
                        }`}
                    >
-                      <Heart size={14} className={favorites.includes(style.id) ? 'fill-current' : ''} />
+                      <Heart size={14} className={favorites.includes(style.id) ? 'fill-current' : ''} aria-hidden="true" />
                    </button>
                    {selectedStyle === style.id && (
-                      <div className="bg-indigo-500 rounded-full p-0.5">
+                      <div className="bg-indigo-500 rounded-full p-0.5" aria-hidden="true">
                        <Check size={12} className="text-white" />
                      </div>
                    )}
@@ -444,10 +466,11 @@ export const StyleSelector: React.FC<StyleSelectorProps> = ({
                ref={iframeRef}
                className="w-full h-full border-0 block"
                title="Style Preview"
+                tabIndex={-1}
              />
            ) : (
              <div className="absolute inset-0 flex flex-col items-center justify-center text-zinc-400">
-                <Search size={48} className="mb-4 opacity-20" />
+                <Search size={48} className="mb-4 opacity-20" aria-hidden="true" />
                <p className="text-lg font-medium">Select a style to preview</p>
                <p className="text-sm">Choose from the list on the left</p>
              </div>
@@ -462,7 +485,7 @@ export const StyleSelector: React.FC<StyleSelectorProps> = ({
              className="flex items-center gap-2 px-6 py-3 bg-indigo-600 hover:bg-indigo-500 text-white font-bold rounded-xl transition-all shadow-lg hover:shadow-indigo-500/25 disabled:opacity-50 disabled:cursor-not-allowed"
            >
              <span>Apply Style & Convert</span>
-              <Printer size={18} />
+              <Printer size={18} aria-hidden="true" />
            </button>
          </div>
        </div>