add aria-labels to TopBar buttons and CalendarPopover
This commit is contained in:
@@ -109,6 +109,7 @@ export function CalendarPopover({
|
|||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
size="icon-xs"
|
size="icon-xs"
|
||||||
|
aria-label="Previous month"
|
||||||
onClick={() => setViewDate((d) => subMonths(d, 1))}
|
onClick={() => setViewDate((d) => subMonths(d, 1))}
|
||||||
className="text-pylon-text-secondary hover:text-pylon-text"
|
className="text-pylon-text-secondary hover:text-pylon-text"
|
||||||
>
|
>
|
||||||
@@ -118,12 +119,14 @@ export function CalendarPopover({
|
|||||||
<div className="flex items-center gap-1">
|
<div className="flex items-center gap-1">
|
||||||
<button
|
<button
|
||||||
onClick={() => setViewMode(viewMode === "months" ? "days" : "months")}
|
onClick={() => setViewMode(viewMode === "months" ? "days" : "months")}
|
||||||
|
aria-label="Select month"
|
||||||
className="rounded-md px-2 py-0.5 text-sm font-medium text-pylon-text transition-colors hover:bg-pylon-column"
|
className="rounded-md px-2 py-0.5 text-sm font-medium text-pylon-text transition-colors hover:bg-pylon-column"
|
||||||
>
|
>
|
||||||
{format(viewDate, "MMMM")}
|
{format(viewDate, "MMMM")}
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
onClick={() => setViewMode(viewMode === "years" ? "days" : "years")}
|
onClick={() => setViewMode(viewMode === "years" ? "days" : "years")}
|
||||||
|
aria-label="Select year"
|
||||||
className="rounded-md px-2 py-0.5 text-sm font-medium text-pylon-text transition-colors hover:bg-pylon-column"
|
className="rounded-md px-2 py-0.5 text-sm font-medium text-pylon-text transition-colors hover:bg-pylon-column"
|
||||||
>
|
>
|
||||||
{format(viewDate, "yyyy")}
|
{format(viewDate, "yyyy")}
|
||||||
@@ -133,6 +136,7 @@ export function CalendarPopover({
|
|||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
size="icon-xs"
|
size="icon-xs"
|
||||||
|
aria-label="Next month"
|
||||||
onClick={() => setViewDate((d) => addMonths(d, 1))}
|
onClick={() => setViewDate((d) => addMonths(d, 1))}
|
||||||
className="text-pylon-text-secondary hover:text-pylon-text"
|
className="text-pylon-text-secondary hover:text-pylon-text"
|
||||||
>
|
>
|
||||||
@@ -164,7 +168,7 @@ export function CalendarPopover({
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Day grid */}
|
{/* Day grid */}
|
||||||
<div className="grid grid-cols-7">
|
<div className="grid grid-cols-7" role="grid" aria-label="Calendar days">
|
||||||
{calendarDays.map((day) => {
|
{calendarDays.map((day) => {
|
||||||
const inMonth = isSameMonth(day, viewDate);
|
const inMonth = isSameMonth(day, viewDate);
|
||||||
const today = isTodayFn(day);
|
const today = isTodayFn(day);
|
||||||
@@ -179,6 +183,8 @@ export function CalendarPopover({
|
|||||||
<button
|
<button
|
||||||
key={day.toISOString()}
|
key={day.toISOString()}
|
||||||
onClick={() => handleSelectDate(day)}
|
onClick={() => handleSelectDate(day)}
|
||||||
|
aria-selected={selected}
|
||||||
|
aria-label={format(day, "EEEE, MMMM d, yyyy")}
|
||||||
className={`flex h-9 items-center justify-center rounded-lg text-sm transition-colors
|
className={`flex h-9 items-center justify-center rounded-lg text-sm transition-colors
|
||||||
${selected
|
${selected
|
||||||
? "bg-pylon-accent font-medium text-white"
|
? "bg-pylon-accent font-medium text-white"
|
||||||
|
|||||||
@@ -163,6 +163,7 @@ export function TopBar() {
|
|||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
size="icon-sm"
|
size="icon-sm"
|
||||||
|
aria-label="Undo"
|
||||||
className="text-pylon-text-secondary hover:text-pylon-text"
|
className="text-pylon-text-secondary hover:text-pylon-text"
|
||||||
onClick={() => useBoardStore.temporal.getState().undo()}
|
onClick={() => useBoardStore.temporal.getState().undo()}
|
||||||
>
|
>
|
||||||
@@ -178,6 +179,7 @@ export function TopBar() {
|
|||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
size="icon-sm"
|
size="icon-sm"
|
||||||
|
aria-label="Redo"
|
||||||
className="text-pylon-text-secondary hover:text-pylon-text"
|
className="text-pylon-text-secondary hover:text-pylon-text"
|
||||||
onClick={() => useBoardStore.temporal.getState().redo()}
|
onClick={() => useBoardStore.temporal.getState().redo()}
|
||||||
>
|
>
|
||||||
@@ -193,6 +195,7 @@ export function TopBar() {
|
|||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
size="icon-sm"
|
size="icon-sm"
|
||||||
|
aria-label="Filter cards"
|
||||||
className="text-pylon-text-secondary hover:text-pylon-text"
|
className="text-pylon-text-secondary hover:text-pylon-text"
|
||||||
onClick={() => document.dispatchEvent(new CustomEvent("toggle-filter-bar"))}
|
onClick={() => document.dispatchEvent(new CustomEvent("toggle-filter-bar"))}
|
||||||
>
|
>
|
||||||
@@ -211,6 +214,7 @@ export function TopBar() {
|
|||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
size="icon-sm"
|
size="icon-sm"
|
||||||
|
aria-label="Board settings"
|
||||||
className="text-pylon-text-secondary hover:text-pylon-text"
|
className="text-pylon-text-secondary hover:text-pylon-text"
|
||||||
>
|
>
|
||||||
<SlidersHorizontal className="size-4" />
|
<SlidersHorizontal className="size-4" />
|
||||||
@@ -256,6 +260,7 @@ export function TopBar() {
|
|||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
size="icon-sm"
|
size="icon-sm"
|
||||||
|
aria-label="Command palette"
|
||||||
className="text-pylon-text-secondary hover:text-pylon-text"
|
className="text-pylon-text-secondary hover:text-pylon-text"
|
||||||
onClick={() =>
|
onClick={() =>
|
||||||
document.dispatchEvent(new CustomEvent("open-command-palette"))
|
document.dispatchEvent(new CustomEvent("open-command-palette"))
|
||||||
@@ -275,6 +280,7 @@ export function TopBar() {
|
|||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
size="icon-sm"
|
size="icon-sm"
|
||||||
|
aria-label="Settings"
|
||||||
className="text-pylon-text-secondary hover:text-pylon-text"
|
className="text-pylon-text-secondary hover:text-pylon-text"
|
||||||
onClick={() =>
|
onClick={() =>
|
||||||
document.dispatchEvent(new CustomEvent("open-settings-dialog"))
|
document.dispatchEvent(new CustomEvent("open-settings-dialog"))
|
||||||
|
|||||||
Reference in New Issue
Block a user