Skip to content

feat: change bottom drawer to less technical context menu label #1063

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
JammingBen merged 1 commit into from
Aug 11, 2025
Merged

feat: change bottom drawer to less technical context menu label #1063

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 2 additions & 3 deletions packages/design-system/src/components/OcBottomDrawer/OcBottomDrawer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@
ref="bottomDrawerRef"
class="oc-bottom-drawer-background"
role="button"
:aria-label="$gettext('Close the bottom drawer')"
Copy link
Contributor Author

@kulmann kulmann Aug 11, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I removed the aria-label, because it would replace (!) the accessible content of the entire <div>. Don't know if it's needed at all, but if yes, we could use aria-describedby instead. I'd prefer to leave it out. Also not sure if we really need the button role here.

@click="onBackgroundClicked"
>
<focus-trap>
Expand All @@ -21,7 +20,7 @@
v-if="isNestedElement"
appearance="raw"
class="raw-hover-surface oc-bottom-drawer-back-button"
:aria-label="$gettext('Open the parent bottom drawer')"
:aria-label="$gettext('Open the parent context menu')"
@click="openParentDrawer"
>
<oc-icon name="arrow-left" fill-type="line" />
Expand All @@ -30,7 +29,7 @@
<oc-button
appearance="raw"
class="raw-hover-surface oc-bottom-drawer-close-button"
:aria-label="$gettext('Close the bottom drawer')"
:aria-label="$gettext('Close the context menu')"
@click="hide"
>
<oc-icon name="close" fill-type="line" />
Expand Down
4 changes: 2 additions & 2 deletions ...ges/design-system/src/components/OcBottomDrawer/__snapshots__/OcBottomDrawer.spec.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,12 @@
exports[`OcBottomDrawer > renders when toggle is clicked 1`] = `
"<div drawerid="button-drawer" toggle="#button-drawer-toggle" title="Bottom Drawer" closeonclick="false"><button id="button-drawer-toggle">Toggle Drawer</button>
<div>
<div class="oc-bottom-drawer-background" role="button" aria-label="Close the bottom drawer">
<div class="oc-bottom-drawer-background" role="button">
<div id="button-drawer" class="oc-bottom-drawer active">
<div class="oc-card">
<div class="oc-card-header">
<div class="oc-flex oc-flex-between oc-flex-middle">
<!--v-if--> <span class="oc-text-bold">Bottom Drawer</span> <button type="button" aria-label="Close the bottom drawer" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw raw-hover-surface oc-bottom-drawer-close-button">
<!--v-if--> <span class="oc-text-bold">Bottom Drawer</span> <button type="button" aria-label="Close the context menu" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw raw-hover-surface oc-bottom-drawer-close-button">
<!--v-if-->
<!-- @slot Content of the button --> <span class="oc-icon oc-icon-m"><svg data-testid="inline-svg-stub" src="icons/close-line.svg" transform-source="(svg) => {
if (__props.accessibleLabel !== &quot;&quot;) {
Expand Down