Merge pull request #163 from dozro/a11y/message-composing

a11y: message composing

Author: 7w1

.changeset/a11y_message_composing.md

@@ -0,0 +1,5 @@
+---
+sable: patch
+---
+
+added a few accessibility tags to the elements involved in message composing

src/app/features/room/RoomInput.tsx

@@ -828,6 +828,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
                       variant="SurfaceVariant"
                       size="300"
                       radii="300"
+                      title="schedule message send"
                     >
                       <Icon src={Icons.Cross} size="50" />
                     </IconButton>
@@ -853,6 +854,8 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
                       variant="SurfaceVariant"
                       size="300"
                       radii="300"
+                      aria-label="Cancel reply"
+                      title="Cancel reply"
                     >
                       <Icon src={Icons.Cross} size="50" />
                     </IconButton>
@@ -886,6 +889,8 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
               variant="SurfaceVariant"
               size="300"
               radii="300"
+              title="Upload File"
+              aria-label="Upload and attach a File"
             >
               <Icon src={Icons.PlusCircle} />
             </IconButton>
@@ -896,6 +901,9 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
                 variant="SurfaceVariant"
                 size="300"
                 radii="300"
+                title={toolbar ? 'Hide Toolbar' : 'Show Toolbar'}
+                aria-pressed={toolbar}
+                aria-label={toolbar ? 'Hide Toolbar' : 'Show Toolbar'}
                 onClick={() => setToolbar(!toolbar)}
               >
                 <Icon src={toolbar ? Icons.AlphabetUnderline : Icons.Alphabet} />
@@ -940,6 +948,8 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
                         variant="SurfaceVariant"
                         size="300"
                         radii="300"
+                        title="open sticker picker"
+                        aria-label="Open sticker picker"
                       >
                         <Icon
                           src={Icons.Sticker}
@@ -956,6 +966,8 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
                       variant="SurfaceVariant"
                       size="300"
                       radii="300"
+                      title="open emoji picker"
+                      aria-label="Open emoji picker"
                     >
                       <Icon
                         src={Icons.Smile}
@@ -1012,6 +1024,8 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
               />
               <Box display="Flex" alignItems="Center">
                 <IconButton
+                  title="Send Message"
+                  aria-label="Send your composed Message"
                   onClick={() => {
                     if (isLongPress.current) {
                       isLongPress.current = false;
@@ -1053,6 +1067,8 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
                     onClick={(evt: MouseEvent<HTMLButtonElement>) => {
                       setScheduleMenuAnchor(evt.currentTarget.getBoundingClientRect());
                     }}
+                    title="Schedule Message"
+                    aria-label="Schedule message send"
                     variant={scheduledTime ? 'Primary' : 'SurfaceVariant'}
                     size="300"
                     radii="0"

src/app/features/room/schedule-send/SchedulePickerDialog.tsx

@@ -98,7 +98,13 @@ export function SchedulePickerDialog({
               <Box grow="Yes">
                 <Text size="H4">Schedule Send</Text>
               </Box>
-              <IconButton size="300" onClick={onCancel} radii="300">
+              <IconButton
+                size="300"
+                onClick={onCancel}
+                radii="300"
+                title="Cancel scheduling"
+                aria-label="Cancel scheduling"
+              >
                 <Icon src={Icons.Cross} />
               </IconButton>
             </Header>
@@ -243,7 +249,14 @@ export function SchedulePickerDialog({
                   {error || 'Selected time is in the past'}
                 </Text>
               )}
-              <Button type="submit" variant="Primary" aria-disabled={isPast} onClick={handleSubmit}>
+              <Button
+                type="submit"
+                variant="Primary"
+                aria-disabled={isPast}
+                onClick={handleSubmit}
+                title="Schedule Send"
+                aria-label="Schedule send"
+              >
                 <Text size="B400">Schedule Send</Text>
               </Button>
             </Box>