Improve accessibility of the title of the settings

Before every setting page had the same title and this is causing issues
for screenreaders since they can't differenciate the title of page. Now
a new variable is available for apps to declare the page subtitle.

This new variable is implemented for the settings app and while at it I
added a bit more type hinting to the stuff I touched :)

Signed-off-by: Carl Schwan <carl@carlschwan.eu>
This commit is contained in:
Carl Schwan 2021-11-24 14:08:16 +01:00
parent ab0548e4ed
commit 046d5451b1
5 changed files with 35 additions and 17 deletions

View file

@ -33,6 +33,7 @@ use OCP\Group\ISubAdmin;
use OCP\IGroupManager;
use OCP\INavigationManager;
use OCP\IUserSession;
use OCP\Settings\IIconSection;
use OCP\Settings\IManager as ISettingsManager;
use OCP\Settings\ISettings;
@ -54,28 +55,31 @@ trait CommonSettingsTrait {
private $subAdmin;
/**
* @param string $currentSection
* @return array
* @return array{forms: array{personal: array, admin: array}}
*/
private function getNavigationParameters($currentType, $currentSection) {
private function getNavigationParameters(string $currentType, string $currentSection): array {
$templateParameters = [
'personal' => $this->formatPersonalSections($currentType, $currentSection),
'admin' => []
];
$templateParameters['admin'] = $this->formatAdminSections(
$currentType,
$currentSection
);
$currentType,
$currentSection
);
return [
'forms' => $templateParameters
];
}
/**
* @param IIconSection[][] $sections
* @psam-param 'admin'|'personal' $type
* @return list<array{anchor: string, section-name: string, active: bool, icon: string}>
*/
protected function formatSections(array $sections, string $currentSection, string $type, string $currentType): array {
$templateParameters = [];
/** @var \OCP\Settings\IIconSection[] $prioritizedSections */
foreach ($sections as $prioritizedSections) {
foreach ($prioritizedSections as $section) {
if ($type === 'admin') {
@ -105,21 +109,17 @@ trait CommonSettingsTrait {
protected function formatPersonalSections(string $currentType, string $currentSections): array {
$sections = $this->settingsManager->getPersonalSections();
$templateParameters = $this->formatSections($sections, $currentSections, 'personal', $currentType);
return $templateParameters;
return $this->formatSections($sections, $currentSections, 'personal', $currentType);
}
protected function formatAdminSections(string $currentType, string $currentSections): array {
$sections = $this->settingsManager->getAdminSections();
$templateParameters = $this->formatSections($sections, $currentSections, 'admin', $currentType);
return $templateParameters;
return $this->formatSections($sections, $currentSections, 'admin', $currentType);
}
/**
* @param array<int, list<\OCP\Settings\ISettings>> $settings
* @return array
* @return array{content: string}
*/
private function formatSettings(array $settings): array {
$html = '';
@ -133,11 +133,15 @@ trait CommonSettingsTrait {
return ['content' => $html];
}
private function getIndexResponse($type, $section) {
private function getIndexResponse(string $type, string $section): TemplateResponse {
$this->navigationManager->setActiveEntry('settings');
$templateParams = [];
$templateParams = array_merge($templateParams, $this->getNavigationParameters($type, $section));
$templateParams = array_merge($templateParams, $this->getSettings($section));
$activeSection = $this->settingsManager->getSection($type, $section);
if ($activeSection) {
$templateParams['pageTitle'] = $activeSection->getName();
}
return new TemplateResponse('settings', 'settings/frame', $templateParams);
}

View file

@ -18,6 +18,7 @@ $getUserAvatar = static function (int $size) use ($_): string {
<meta charset="utf-8">
<title>
<?php
p(!empty($_['pageTitle'])?$_['pageTitle'].' - ':'');
p(!empty($_['application'])?$_['application'].' - ':'');
p($theme->getTitle());
?>

View file

@ -145,6 +145,13 @@ class Manager implements IManager {
return $this->sections[$type];
}
public function getSection(string $type, string $sectionId): ?IIconSection {
if (isset($this->sections[$type]) && isset($this->sections[$type][$sectionId])) {
return $this->sections[$type][$sectionId];
}
return null;
}
protected function isKnownDuplicateSectionId(string $sectionID): bool {
return in_array($sectionID, [
'connected-accounts',

View file

@ -31,7 +31,7 @@ interface IIconSection {
* returns the ID of the section. It is supposed to be a lower case string,
* e.g. 'ldap'
*
* @returns string
* @return string
* @since 9.1
*/
public function getID();
@ -59,7 +59,7 @@ interface IIconSection {
* returns the relative path to an 16*16 icon describing the section.
* e.g. '/core/img/places/files.svg'
*
* @returns string
* @return string
* @since 12
*/
public function getIcon();

View file

@ -116,4 +116,10 @@ interface IManager {
* @since 13.0.0
*/
public function getPersonalSettings($section): array;
/**
* Get a specific section by type and id
* @since 25.0.0
*/
public function getSection(string $type, string $sectionId): ?IIconSection;
}