[まーちゅう]

【お使いの Snow Monkey のバージョン】16.4.6
【お使いの Snow Monkey Blocks のバージョン】15.0.2
【お使いの Snow Monkey Editor のバージョン】7.0.1

### 実現したいこと
アクセシビリティ対応で、ドロワーを開いたときの、閉じるボタンのラベルを「とじる」に変更したいです。

### 試したこと

add_filter(
	'snow_monkey_get_template_part_args_template-parts/header/hamburger-btn',
	function( $args ) {
		$args['vars']['_label'] = 'メニュー';
		return $args;
	}
);

メニューのラベルは上記のコードで変更できるのですが、[aria-expanded=false]と[aria-expanded=true]で、ラベルを出し分けることはできますでしょうか？

♥ 0

いいねをした人: 居ません

[GONSY]

以前、似たようなことを実現するのにCSSで無理やりやったことがありました。

.c-hamburger-btn[aria-expanded="true"] span.c-hamburger-btn__label {
	display: none;
}

.c-hamburger-btn[aria-expanded="true"]::after {
	content: "CLOSE";
	display: block;
	font-family: Arial Narrow,Verdana,sans-serif;
	font-size: 8px;
	line-height: 1;
}

もっとスマートな方法があれば自分も知りたいです（^^

♥ 1

いいねをした人:

[キタジマ タカシ]

なるほど。これ、Snow Monkey 自体に変更をいれて、例えばこんな感じにしたほうが良さそうですかね？

<span class="c-hamburger-btn__label">
	<?php echo wp_kses_post( $args['_label'] ); ?>
</span>
<span class="c-hamburger-btn__close-label">
	<?php echo wp_kses_post( $args['_close-label'] ); ?>
</span>

.c-hamburger-btn[aria-expanded="true"].c-hamburger-btn__label {
  display: none;
}
.c-hamburger-btn[aria-expanded="false"].c-hamburger-btn__close-label {
  display: none;
}

♥ 2

いいねをした人:

[キタジマ タカシ]

ちょっとローカルで試しにやってみたのですが、現状だと開くと閉じるの文字数が変わると、その差の大きさ分だけボタンががたっと動いちゃいますね…。

♥ 0

いいねをした人: 居ません

[まーちゅう]

すみません。こちら、返事が遅くなてしまいました。
キタジマさんにご提示いただいたコードを参考に、以下のように対応しようと思います。

add_filter(
	'snow_monkey_template_part_render_template-parts/header/hamburger-btn',
	function( $html ) {
		ob_start();
		?>
		<span class="c-hamburger-btn__close-label">とじる</span>
		<?php
		$close_label = ob_get_contents();
		ob_end_clean();
		$html = str_replace(
			'</button>',
			$close_label.'</button>',
			$html
		);
		return $html;
	},
	10
);

.c-hamburger-btn__close-label {
 display: block;
}
.c-hamburger-btn[aria-expanded="true"] .c-hamburger-btn__label {
  display: none;
}
.c-hamburger-btn[aria-expanded="false"] .c-hamburger-btn__close-label {
  display: none;
}

♥ 2

いいねをした人:

[投稿者]

投稿