ドロワーを開いたときに、閉じるボタンのラベルを「とじる」に変更したい

♥ 0

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

このトピックには4件の返信、3人の参加者があり、最後にまーちゅうにより2年、 6ヶ月前に更新されました。

5件の投稿を表示中 - 1 - 5件目 (全5件中)

投稿者

投稿
2022年4月12日 6:47 PM #102950
まーちゅう
参加者

♥ 367
【お使いの 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

いいねをした人: 居ません
2022年4月12日 7:38 PM #102957
GONSY
参加者

♥ 841
以前、似たようなことを実現するのに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

いいねをした人:
2022年4月13日 8:38 AM #102982
キタジマタカシ
参加者

♥ 2421
なるほど。これ、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

いいねをした人:
2022年4月14日 2:46 PM #103095

キタジマタカシ
参加者

♥ 2421

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

♥ 0

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

2022年4月30日 5:36 PM #103982
まーちゅう
参加者

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

いいねをした人:
投稿者

投稿