Skip to content

Commit d160edd

Browse files
fix(draw): replace aria-pressed with role=tab and aria-selected on signature type tabs
NcButton elements inside role="tablist" were using aria-pressed which causes screen readers to announce them as toggle buttons instead of tabs. Screen readers rely on role="tab" + aria-selected to announce tab position (e.g. "Draw, tab 1 of 3") and to enable arrow-key navigation between tabs. Signed-off-by: Vitor Mattos <1079143+vitormattos@users.noreply.github.com>
1 parent ecd5fa0 commit d160edd

1 file changed

Lines changed: 2 additions & 1 deletion

File tree

src/components/Draw/Draw.vue

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,11 @@
1212
<NcButton
1313
v-for="tab in availableTabs"
1414
:key="tab.id"
15+
role="tab"
1516
class="draw-signature__tab"
1617
:class="{ 'draw-signature__tab--active': activeTab === tab.id }"
1718
variant="tertiary"
18-
:aria-pressed="activeTab === tab.id"
19+
:aria-selected="activeTab === tab.id"
1920
@click="activeTab = tab.id">
2021
<NcIconSvgWrapper :path="tab.icon" :size="18" />
2122
<span class="draw-signature__tab-label">{{ tab.label }}</span>

0 commit comments

Comments
 (0)