Missing accessible labels

WesSouza · Dec 17, 2024 · 8a0050e · 8a0050e
1 parent 4634db9
commit 8a0050e
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 5 deletions.
diff --git a/src/Wes95/components/Explorer.tsx b/src/Wes95/components/Explorer.tsx
@@ -257,6 +257,7 @@ export const Explorer = () => {
           <footer class="Taskbar" onClick={handleDesktopTaskbarClick}>
             <MenuButton
               appearance="taskbar-start"
+              aria-label="Start"
               direction="block-start"
               items={[
                 {
@@ -398,6 +399,7 @@ export const Explorer = () => {
               >
                 {(window) => (
                   <button
+                    aria-label={window.title}
                     classList={{
                       TaskbarButton: true,
                       '-active':
@@ -421,11 +423,21 @@ export const Explorer = () => {
             </div>
             <div class="TaskbarStatus StatusField">
               <Show when={screenBreakpoint() !== 'small'}>
-                <button class="GhostButton" onClick={handleDing} type="button">
+                <button
+                  aria-label="Speaker"
+                  class="GhostButton"
+                  onClick={handleDing}
+                  type="button"
+                >
                   <Icon icon="toolbarSound" />
                 </button>
               </Show>
-              <button class="GhostButton" onClick={handleShare} type="button">
+              <button
+                aria-label="Eject"
+                class="GhostButton"
+                onClick={handleShare}
+                type="button"
+              >
                 <Icon icon="toolbarEject" />
               </button>
               <Show when={screenBreakpoint() !== 'small'}>

diff --git a/src/Wes95/components/MenuButton.tsx b/src/Wes95/components/MenuButton.tsx
@@ -13,6 +13,7 @@ import { Menu, type MenuItem, type MenuSeparator } from './Menu';
 import { WindowManager } from '../lib/WindowManager';
 
 export const MenuButton = (p: {
+  'aria-label'?: string;
   appearance?: 'menu' | 'taskbar' | 'taskbar-start';
   children?: JSX.Element;
   direction?: 'block-start' | 'block-end' | 'inline-start' | 'inline-end';
@@ -108,6 +109,7 @@ export const MenuButton = (p: {
         aria-controls={menuOpen() ? menuId : undefined}
         aria-expanded={menuOpen() ? 'true' : undefined}
         aria-haspopup={'menu'}
+        aria-label={p['aria-label']}
         classList={{
           MenuButton: p.appearance !== 'taskbar',
           TaskbarButton:

diff --git a/src/Wes95/programs/Bluesky/Post.tsx b/src/Wes95/programs/Bluesky/Post.tsx
@@ -122,7 +122,7 @@ export function BlueskyPost(p: {
               }
               href={`app://Bluesky/Profile?did=${encodeURIComponent(post().author.handle)}`}
             >
-              <img src={post().author.avatar} />
+              <img src={post().author.avatar} alt="User avatar" />
             </Link>
           </Show>
           <Show when={p.replyLine}>
@@ -168,21 +168,23 @@ export function BlueskyPost(p: {
                     class={styles.PostContentImage}
                     href={`app://QuickView/Main?open=${encodeURIComponent(image.fullsize)}`}
                   >
-                    <img src={image.thumb} />
+                    <img src={image.thumb} alt={image.alt} />
                   </Link>
                 )}
               </For>
             </div>
           </Show>
           <Show when={embedVideo()}>
             <Link
+              aria-label="Video"
               class={styles.PostContentVideo}
               href={`app://MediaPlayer/Main?open=${encodeURIComponent(embedVideo()!.playlist)}`}
             >
               <Show when={embedVideo()!.thumbnail}>
                 <img
                   class={styles.PostContentVideoCover}
                   src={embedVideo()!.thumbnail}
+                  alt={embedVideo()!.alt}
                 />
                 <Icon icon="fileTypeVideo" size="small" />
               </Show>
@@ -197,6 +199,7 @@ export function BlueskyPost(p: {
               <Show when={embedExternal()!.thumb}>
                 <img
                   class={styles.PostContentExternalCover}
+                  alt="Thumbnail"
                   src={embedExternal()!.thumb!}
                 />
               </Show>

diff --git a/src/Wes95/programs/Bluesky/ProfileHeader.tsx b/src/Wes95/programs/Bluesky/ProfileHeader.tsx
@@ -40,7 +40,7 @@ export function BlueskyProfileHeader(p: {
             [styles.ProfileAvatar!]: true,
           }}
         >
-          <img src={p.profile.avatar} />
+          <img src={p.profile.avatar} alt="User avatar" />
         </div>
         <Link
           alwaysExternal

diff --git a/src/Wes95/programs/MediaPlayer/MainWindow.tsx b/src/Wes95/programs/MediaPlayer/MainWindow.tsx
@@ -220,6 +220,7 @@ export function MediaPlayerMainWindow(p: {
       <div class={styles.Controls}>
         <div class={styles.Timeline}>
           <input
+            aria-label="Timeline"
             type="range"
             min="0"
             max={mediaPlayer.state.duration}
@@ -231,6 +232,7 @@ export function MediaPlayerMainWindow(p: {
         </div>
         <div class={styles.Buttons}>
           <button
+            aria-label="Play"
             classList={{
               ThinButton: true,
               [styles.Button!]: true,
@@ -242,6 +244,7 @@ export function MediaPlayerMainWindow(p: {
             <Symbol symbol="mediaPlay" />
           </button>
           <button
+            aria-label="Pause"
             classList={{
               ThinButton: true,
               [styles.Button!]: true,
@@ -253,6 +256,7 @@ export function MediaPlayerMainWindow(p: {
             <Symbol symbol="mediaPause" />
           </button>
           <button
+            aria-label="Stop"
             class={'ThinButton ' + styles.Button}
             onClick={() => mediaPlayer.stop()}
             type="button"
@@ -261,27 +265,31 @@ export function MediaPlayerMainWindow(p: {
           </button>
           <div class="VerticalSeparator"></div>
           <button
+            aria-label="Skip Backwards"
             class={'ThinButton ' + styles.Button}
             onClick={() => mediaPlayer.skipBack()}
             type="button"
           >
             <Symbol symbol="mediaSkipBack" />
           </button>
           <button
+            aria-label="Rewind"
             class={'ThinButton ' + styles.Button}
             onClick={() => mediaPlayer.rewind()}
             type="button"
           >
             <Symbol symbol="mediaRewind" />
           </button>
           <button
+            aria-label="Fast Forward"
             class={'ThinButton ' + styles.Button}
             onClick={() => mediaPlayer.fastForward()}
             type="button"
           >
             <Symbol symbol="mediaFastForward" />
           </button>
           <button
+            aria-label="Skip Forward"
             class={'ThinButton ' + styles.Button}
             onClick={() => mediaPlayer.skipForward()}
             type="button"